:root{
  --bg:#031322;--bg2:#061b2e;--panel:#061d32;--panel2:#082b48;
  --blue:#087fe8;--blue2:#0b64cf;--text:#f7fbff;--muted:#b9c9d8;
  --line:rgba(126,188,237,.22);--max:1240px;
}
html{scroll-behavior:smooth;background:var(--bg)!important}
body{
  margin:0!important;
  background:linear-gradient(180deg,#031322,#061b2e 48%,#031322)!important;
  color:var(--text)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  line-height:1.5!important;
}
a{text-decoration:none}
body > header{
  position:sticky!important;top:0!important;z-index:50!important;
  background:rgba(2,15,27,.96)!important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
  min-height:74px!important;
}
body > header > .container,
body > header .container{
  width:min(var(--max),calc(100% - 42px))!important;
  max-width:none!important;margin:auto!important;
  min-height:74px!important;
}
body > header img{
  width:210px!important;height:auto!important;max-height:54px!important;object-fit:contain!important;
}
body > header nav{
  gap:28px!important;align-items:center!important;
}
body > header nav a{
  color:#eaf4fc!important;font-weight:700!important;font-size:15px!important;
  padding:12px 0!important;border-radius:0!important;background:none!important;
}
body > header nav a:hover{color:#60b5ff!important}
body > header nav a[href*="panel.upaweb.com.ar"]{
  padding:11px 18px!important;
  border-radius:6px!important;
  background:linear-gradient(90deg,var(--blue2),var(--blue))!important;
  color:#fff!important;border:0!important;
}
#mobile-menu{
  background:#031526!important;border-top:1px solid var(--line)!important;
}

/* Tutorial hero */
body > header + section{
  background:
    linear-gradient(90deg,rgba(1,13,24,.96),rgba(3,20,34,.82)),
    url("/img/hero.jpg") center/cover no-repeat!important;
  padding:76px 20px 58px!important;
  border-bottom:1px solid var(--line)!important;
}
body > header + section .container{
  width:min(900px,calc(100% - 28px))!important;max-width:none!important;margin:auto!important;
}
body > header + section h1{
  color:#fff!important;font-size:44px!important;line-height:1.05!important;
  margin:0 0 12px!important;letter-spacing:-1px!important;
}
body > header + section p{color:#c9d9e6!important;font-size:16px!important}
body > header + section .text-5xl{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:58px!important;height:58px!important;margin:0 auto 16px!important;
  border-radius:50%!important;background:#086ed5!important;font-size:28px!important;
}
body > header + section a[href^="#"],
body > header + section a[href^="/web/#"]{
  background:#0a3150!important;color:#fff!important;border:1px solid #245f8d!important;
  border-radius:6px!important;padding:9px 13px!important;font-weight:700!important;
}

/* Main wrapper */
body > .container.mx-auto.px-6.py-16.max-w-4xl{
  width:min(1040px,calc(100% - 42px))!important;
  max-width:none!important;margin:auto!important;
  padding:62px 0 72px!important;
}
body > .container > section[id]{scroll-margin-top:95px!important}

/* section titles */
body > .container > section[id] > .flex.items-center.gap-3.mb-6{
  border-bottom:1px solid var(--line)!important;
  padding-bottom:14px!important;margin-bottom:20px!important;
}
body > .container > section[id] > .flex.items-center.gap-3.mb-6 > div:first-child{
  background:#086ed5!important;border-radius:9px!important;
}
body > .container h2{
  color:#fff!important;font-size:28px!important;letter-spacing:-.3px!important;
}
body > .container h3,body > .container h4{color:#fff!important}
body > .container .text-gray-800{color:#f7fbff!important}
body > .container .text-gray-700,
body > .container .text-gray-600,
body > .container .text-gray-500,
body > .container .text-gray-400{color:#aec1d1!important}

/* Cards and steps */
body > .container .bg-white{
  background:linear-gradient(180deg,#071f36,#061a2d)!important;
  border:1px solid var(--line)!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16)!important;
}
body > .container .bg-gray-50{
  background:#08243d!important;border-color:#174a6d!important;
}
body > .container .border-gray-100,
body > .container .border-gray-200{border-color:var(--line)!important}
.paso{
  border-bottom:1px solid rgba(126,188,237,.14)!important;
  padding:18px 0!important;
}
.paso:last-child{border-bottom:0!important}
.paso-num{
  background:linear-gradient(145deg,#0a91ff,#075fc0)!important;
  box-shadow:0 6px 18px rgba(0,97,194,.25)!important;
}
.paso strong{color:#fff!important}

/* Old green palette converted to blue */
body > .container .text-green-600,
body > .container .text-green-700{color:#52adf7!important}
body > .container .bg-green-50{
  background:#073047!important;border-color:#0c668e!important;
}
body > .container .border-green-200{border-color:#0c668e!important}
body > .container .bg-yellow-50{
  background:#302b13!important;border-color:#73631b!important;color:#f1e7b8!important;
}
body > .container .bg-red-50{
  background:#35191e!important;border-color:#71313a!important;color:#f0c0c5!important;
}
.tip{
  background:#062f43!important;border-left-color:#0c94e8!important;color:#d8ecf8!important;
}
.nota{
  background:#302b13!important;border-left-color:#d4ae27!important;color:#f0e5b3!important;
}
.warn{
  background:#35191e!important;border-left-color:#ef5966!important;color:#f5c8cc!important;
}

/* FAQ */
.faq-body{color:#afc3d3!important}
body > .container #faq button{color:#fff!important}
body > .container #faq button:hover{background:#0a2945!important}

/* final CTA */
body > .container > section.bg-green-700{
  background:linear-gradient(115deg,#062b49,#074b80)!important;
  border:1px solid #1269a8!important;
  border-radius:8px!important;
}
body > .container > section.bg-green-700 p{color:#c7dbea!important}
body > .container > section.bg-green-700 a.bg-white{
  background:linear-gradient(90deg,#0b64cf,#087fe8)!important;
  color:#fff!important;border:1px solid #2998f5!important;
}
body > .container > section.bg-green-700 a.border-white{
  border-color:#5aa6db!important;color:#fff!important;
}

/* footer */
body > footer{
  background:#020d17!important;border-top:1px solid var(--line)!important;
  margin-top:0!important;padding-top:42px!important;
}
body > footer .container{
  width:min(var(--max),calc(100% - 42px))!important;max-width:none!important;margin:auto!important;
}
body > footer img{width:180px!important;height:auto!important;filter:none!important}
body > footer .text-gray-400{color:#819bae!important}
body > footer a:hover{color:#52adf7!important}

/* General radius normalization */
.rounded-2xl{border-radius:9px!important}
.rounded-xl{border-radius:7px!important}
.shadow{box-shadow:0 12px 28px rgba(0,0,0,.16)!important}

@media(max-width:767px){
  body > header img{width:168px!important}
  body > header + section{padding:52px 14px 42px!important}
  body > header + section h1{font-size:32px!important}
  body > .container.mx-auto.px-6.py-16.max-w-4xl{
    width:calc(100% - 28px)!important;padding:42px 0 54px!important;
  }
}


/* =========================================================
   HEADER TUTORIALES
   El header visual pertenece a /style.css del sitio principal.
   Estas reglas solamente neutralizan estilos heredados.
   ========================================================= */

header img {
    filter: none !important;
}

header nav a {
    text-decoration: none !important;
}