: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;
}


/* =========================================================
   FIX LAYOUT - BACKUP CLOUD TUTORIALES
========================================================= */

.backup-tutorial-page-wrap{
  width:100%;
  padding:0 0 64px;
  background:transparent;
}

.backup-tutorial-page-wrap .backup-tutorial-section{
  width:100%;
  margin:0;
}

.backup-tutorial-section{
  box-sizing:border-box;
}

.backup-tutorial-grid{
  width:100%;
}

@media(max-width:950px){

  .backup-tutorial-page-wrap{
    padding-bottom:45px;
  }

}

@media(max-width:650px){

  .backup-tutorial-page-wrap{
    padding-bottom:30px;
  }

}


/* =========================================================
   UPAWEB BACKUP CLOUD - ESTILO COMPLETO
========================================================= */

.backup-tutorial-page-wrap{
    width:100%;
    padding:48px 0 64px;
}

.backup-tutorial-section{
    width:100%;
    box-sizing:border-box;
    padding:30px;
    border:1px solid rgba(24,142,226,.35);
    border-radius:22px;
    background:
        radial-gradient(circle at 90% 10%,rgba(0,149,255,.13),transparent 30%),
        linear-gradient(145deg,#06263b,#041c2d);
    box-shadow:0 24px 55px rgba(0,0,0,.24);
}

/* CABECERA */

.backup-tutorial-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px;
}

.backup-tutorial-header-copy{
    max-width:620px;
}

.backup-tutorial-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 13px;
    border:1px solid rgba(40,161,245,.4);
    border-radius:8px;
    background:rgba(10,126,211,.14);
    color:#42b1ff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
}

.backup-tutorial-header h2{
    margin:15px 0 10px;
    color:#fff;
    font-size:34px;
    line-height:1.1;
}

.backup-tutorial-header p{
    margin:0;
    color:#9fc0d1;
    font-size:15px;
    line-height:1.65;
}

.backup-tutorial-status{
    min-width:235px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px;
    border:1px solid rgba(31,150,230,.27);
    border-radius:13px;
    background:rgba(255,255,255,.035);
}

.backup-status-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0d90e8;
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.backup-tutorial-status strong{
    display:block;
    color:#fff;
    font-size:14px;
}

.backup-tutorial-status small{
    display:block;
    margin-top:3px;
    color:#88adbf;
    font-size:11px;
}

/* GRID */

.backup-tutorial-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

/* TARJETAS */

.backup-tutorial-card{
    position:relative;
    padding:22px;
    border:1px solid rgba(34,132,190,.32);
    border-radius:16px;
    background:linear-gradient(155deg,#0a3049,#061f31);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.backup-tutorial-card:hover{
    transform:translateY(-4px);
    border-color:#168fe3;
    box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.backup-tutorial-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
    border-radius:13px;
    background:rgba(18,144,226,.13);
    font-size:25px;
}

.backup-tutorial-number{
    position:absolute;
    top:20px;
    right:20px;
    color:#2385bd;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.backup-tutorial-card h3{
    margin:0 0 9px;
    color:#fff;
    font-size:18px;
}

.backup-tutorial-card > p{
    min-height:62px;
    margin:0 0 16px;
    color:#9ebdcd;
    font-size:13px;
    line-height:1.55;
}

/* ACORDEON */

.backup-tutorial-card details{
    margin-top:13px;
    padding-top:13px;
    border-top:1px solid rgba(255,255,255,.07);
}

.backup-tutorial-card summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    color:#34a9f6;
    font-size:13px;
    font-weight:800;
    list-style:none;
}

.backup-tutorial-card summary::-webkit-details-marker{
    display:none;
}

.backup-tutorial-card summary::after{
    content:"+";
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(18,145,228,.12);
    color:#45b6ff;
    font-size:17px;
}

.backup-tutorial-card details[open] summary::after{
    content:"−";
}

/* CONTENIDO */

.backup-tutorial-content{
    margin-top:16px;
    padding-top:2px;
    color:#b8d0dc;
    font-size:13px;
    line-height:1.65;
}

.backup-tutorial-content p{
    margin:0 0 12px;
}

.backup-tutorial-content ul,
.backup-tutorial-content ol{
    margin:12px 0;
    padding-left:20px;
}

.backup-tutorial-content li{
    margin:7px 0;
}

.backup-tutorial-content h4{
    margin:18px 0 5px;
    color:#fff;
    font-size:14px;
}

/* NOTAS */

.backup-tip{
    margin-top:15px;
    padding:12px 13px;
    border:1px solid rgba(23,151,232,.24);
    border-left:4px solid #168fe3;
    border-radius:9px;
    background:rgba(15,133,209,.08);
    color:#b9d9e9;
}

.backup-warning{
    margin-top:15px;
    padding:12px 13px;
    border:1px solid rgba(255,181,45,.22);
    border-left:4px solid #e2a42c;
    border-radius:9px;
    background:rgba(216,151,28,.08);
    color:#e1c991;
}

/* FAQ */

.backup-faq-card{
    grid-column:1 / -1;
}

/* CTA FINAL */

.backup-tutorial-cta{
    margin-top:26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:22px;
    border:1px solid rgba(28,151,232,.3);
    border-radius:15px;
    background:rgba(2,24,39,.58);
}

.backup-tutorial-cta span{
    color:#33aafa;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
}

.backup-tutorial-cta h3{
    margin:6px 0;
    color:#fff;
    font-size:19px;
}

.backup-tutorial-cta p{
    margin:0;
    color:#91b3c5;
    font-size:13px;
}

.backup-tutorial-cta a{
    flex:0 0 auto;
    padding:12px 17px;
    border-radius:9px;
    background:linear-gradient(135deg,#159cff,#0874db);
    color:#fff !important;
    text-decoration:none !important;
    font-size:13px;
    font-weight:900;
}

/* RESPONSIVE */

@media(max-width:850px){

    .backup-tutorial-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .backup-tutorial-status{
        width:100%;
        min-width:0;
    }

    .backup-tutorial-grid{
        grid-template-columns:1fr;
    }

    .backup-faq-card{
        grid-column:auto;
    }

}

@media(max-width:600px){

    .backup-tutorial-page-wrap{
        padding:30px 0 40px;
    }

    .backup-tutorial-section{
        padding:20px;
        border-radius:17px;
    }

    .backup-tutorial-header h2{
        font-size:28px;
    }

    .backup-tutorial-card{
        padding:18px;
    }

    .backup-tutorial-cta{
        flex-direction:column;
        align-items:flex-start;
    }

    .backup-tutorial-cta a{
        width:100%;
        text-align:center;
    }

}