:root{
    --apple-bg:#07090d;
    --apple-panel:#101319;
    --apple-panel-2:#151922;
    --apple-text:#f5f5f7;
    --apple-muted:#9299a6;
    --apple-line:#292e38;
    --apple-blue:#8fa5ff;
    --apple-purple:#a77cff;
    --apple-green:#55dca2;
    --apple-red:#ff7185;
}

*{
    box-sizing:border-box;
}

html{
    background:var(--apple-bg);
}

body,
.public-body{
    margin:0 !important;
    color:var(--apple-text) !important;
    background:
        radial-gradient(
            circle at 80% 0,
            rgba(122,103,255,.08),
            transparent 32%
        ),
        var(--apple-bg) !important;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif !important;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
}

.dashboard-layout{
    display:block !important;
    min-height:100vh;
}

.dashboard-sidebar{
    position:sticky !important;
    inset:auto !important;
    top:0 !important;
    z-index:100 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:35px !important;
    width:min(1400px,92%) !important;
    height:80px !important;
    margin:auto !important;
    padding:0 !important;
    overflow:visible !important;
    border-right:0 !important;
    border-bottom:1px solid var(--apple-line) !important;
    background:rgba(7,9,13,.9) !important;
    backdrop-filter:blur(22px);
}

.dashboard-brand{
    flex:0 0 auto;
    padding:0 !important;
    font-size:19px !important;
    letter-spacing:-.5px !important;
}

.dashboard-brand span{
    color:var(--apple-blue) !important;
}

.dashboard-brand small{
    display:none !important;
}

.dashboard-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:center;
    gap:6px !important;
    min-width:0;
}

.dashboard-nav a{
    min-height:38px !important;
    padding:9px 13px !important;
    border:0 !important;
    border-radius:20px !important;
    color:#aeb4bf !important;
    background:transparent !important;
    font-size:13px !important;
    white-space:nowrap;
}

.dashboard-nav a:hover,
.dashboard-nav a.active{
    transform:none !important;
    color:white !important;
    background:rgba(255,255,255,.065) !important;
}

.dashboard-main{
    width:min(1320px,92%) !important;
    margin:0 auto !important;
    padding:70px 0 110px !important;
}

.dashboard-topbar{
    max-width:none !important;
    margin-bottom:55px !important;
}

.dashboard-welcome small,
.mdp-eyebrow{
    color:#8498c2 !important;
    font-size:10px !important;
    letter-spacing:2.4px !important;
}

.dashboard-welcome h1{
    font-size:clamp(48px,6vw,78px) !important;
    line-height:1 !important;
    letter-spacing:-4px !important;
}

.card,
.form-card,
.detail,
.price-box,
.notice,
.mdp-info-card,
.mdp-large-link,
.dashboard-card{
    border:1px solid var(--apple-line) !important;
    border-radius:22px !important;
    color:var(--apple-text) !important;
    background:
        linear-gradient(
            145deg,
            rgba(20,24,32,.98),
            rgba(12,15,21,.98)
        ) !important;
    box-shadow:none !important;
}

.card:hover,
.detail:hover,
.mdp-large-link:hover,
.dashboard-card:hover{
    border-color:rgba(143,165,255,.4) !important;
    transform:translateY(-2px);
}

h1,
h2,
h3{
    color:var(--apple-text);
    letter-spacing:-.035em;
}

p,
.muted{
    color:var(--apple-muted) !important;
    line-height:1.65;
}

input,
select,
textarea{
    border:1px solid var(--apple-line) !important;
    border-radius:14px !important;
    outline:none !important;
    color:white !important;
    background:#090b10 !important;
    font:inherit;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--apple-blue) !important;
    box-shadow:0 0 0 4px rgba(143,165,255,.1) !important;
}

button,
.primary-button,
.mdp-back-button{
    border:1px solid var(--apple-line) !important;
    border-radius:28px !important;
    color:#080a0f !important;
    background:white !important;
    font-weight:850 !important;
    box-shadow:none !important;
}

button:hover,
.primary-button:hover{
    transform:translateY(-1px);
    filter:brightness(.92);
}

.auth-page{
    min-height:100vh !important;
    display:grid !important;
    place-items:center !important;
    padding:30px 20px !important;
}

.auth-card{
    width:min(100%,480px) !important;
    padding:42px !important;
    border:1px solid var(--apple-line) !important;
    border-radius:30px !important;
    background:var(--apple-panel) !important;
    box-shadow:0 40px 100px rgba(0,0,0,.42) !important;
}

.auth-card .brand{
    font-size:24px;
}

.auth-card .brand span{
    color:var(--apple-blue);
}

.auth-heading h1{
    font-size:42px !important;
    letter-spacing:-2px !important;
}

.notice-error{
    color:#ff9bab !important;
    border-color:rgba(255,113,133,.35) !important;
    background:rgba(255,113,133,.08) !important;
}

.mdp-section-page{
    min-height:100vh;
    background:transparent !important;
}

.mdp-section-header,
.mdp-section-content{
    width:min(1200px,92%) !important;
    max-width:none !important;
    margin-right:auto !important;
    margin-left:auto !important;
}

.mdp-section-header{
    padding-top:55px !important;
}

.mdp-section-content{
    padding-bottom:100px !important;
}

@media(max-width:900px){

    .dashboard-sidebar{
        width:100% !important;
        padding:0 18px !important;
    }

    .dashboard-nav{
        justify-content:flex-start;
        overflow-x:auto;
    }

    .dashboard-nav a{
        flex:0 0 auto;
    }

    .dashboard-main{
        padding-top:45px !important;
    }
}

@media(max-width:768px){

    .dashboard-sidebar{
        display:none !important;
    }

    .dashboard-main{
        width:92% !important;
        padding-bottom:110px !important;
    }

    .dashboard-welcome h1{
        font-size:47px !important;
        letter-spacing:-3px !important;
    }

    .auth-card{
        padding:30px 22px !important;
        border-radius:24px !important;
    }
}

/* PORTADA WEB APPLE MDPRIME */

.public-shell{
    width:min(1400px,92%) !important;
    margin:auto !important;
}

.public-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:80px !important;
    padding:0 !important;
    border-bottom:1px solid var(--apple-line) !important;
    background:transparent !important;
}

.public-header .brand{
    color:white !important;
    font-size:20px !important;
    font-weight:900 !important;
    letter-spacing:-.5px !important;
}

.public-header .brand::before{
    content:"●";
    margin-right:9px;
    color:var(--apple-blue);
    font-size:13px;
}

.public-header .brand span{
    color:white !important;
}

.header-login{
    padding:11px 18px !important;
    border:1px solid var(--apple-line) !important;
    border-radius:28px !important;
    color:white !important;
    background:transparent !important;
    font-size:13px !important;
    font-weight:700 !important;
}

.header-login:hover{
    border-color:#656d7c !important;
    background:rgba(255,255,255,.04) !important;
}

.public-body .hero{
    display:grid !important;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr) !important;
    align-items:center !important;
    gap:90px !important;
    width:100% !important;
    min-height:650px !important;
    margin:0 !important;
    padding:80px 40px !important;
    border:0 !important;
    background:transparent !important;
}

.hero-copy{
    max-width:760px;
}

.hero-label{
    margin-bottom:23px !important;
    color:#8498c2 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:3px !important;
}

.hero-copy h1{
    max-width:760px !important;
    margin:0 0 28px !important;
    color:#f5f5f7 !important;
    font-size:clamp(55px,6.3vw,90px) !important;
    line-height:.98 !important;
    letter-spacing:-5px !important;
}

.hero-copy > p{
    max-width:650px !important;
    margin:0 !important;
    color:var(--apple-muted) !important;
    font-size:18px !important;
    line-height:1.7 !important;
}

.hero-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:11px !important;
    margin-top:35px !important;
}

.public-primary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:50px !important;
    padding:0 22px !important;
    border:1px solid var(--apple-line) !important;
    border-radius:28px !important;
    color:white !important;
    background:transparent !important;
    font-size:13px !important;
    font-weight:850 !important;
    box-shadow:none !important;
}

.public-primary:first-child{
    border-color:white !important;
    color:#080a0f !important;
    background:white !important;
}

.public-primary:hover{
    transform:translateY(-2px) !important;
    border-color:#687181 !important;
}

.hero-features{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:20px !important;
    margin-top:35px !important;
    color:var(--apple-muted) !important;
    font-size:12px !important;
}

.hero-features span::first-letter{
    color:var(--apple-green);
}

.portal-preview{
    position:relative !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
}

.preview-glow{
    position:absolute !important;
    inset:20% !important;
    background:rgba(125,107,255,.16) !important;
    filter:blur(65px) !important;
}

.preview-card{
    position:relative !important;
    z-index:2 !important;
    padding:38px !important;
    border:1px solid #343a46 !important;
    border-radius:30px !important;
    color:white !important;
    background:
        linear-gradient(
            145deg,
            rgba(24,28,37,.98),
            rgba(13,16,22,.98)
        ) !important;
    box-shadow:0 35px 100px rgba(0,0,0,.4) !important;
}

.preview-icon{
    display:grid !important;
    place-items:center !important;
    width:54px !important;
    height:54px !important;
    margin-bottom:30px !important;
    border:1px solid rgba(143,165,255,.3) !important;
    border-radius:17px !important;
    color:var(--apple-blue) !important;
    background:rgba(143,165,255,.08) !important;
}

.preview-card > span{
    color:#8498c2 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:2px !important;
}

.preview-card > strong{
    display:block !important;
    margin:10px 0 !important;
    font-size:30px !important;
    letter-spacing:-1.5px !important;
}

.preview-card > p{
    margin-bottom:28px !important;
    color:var(--apple-muted) !important;
}

.preview-row{
    display:flex !important;
    justify-content:space-between !important;
    gap:20px !important;
    padding:17px 0 !important;
    border-top:1px solid var(--apple-line) !important;
    color:var(--apple-muted) !important;
    font-size:13px !important;
}

.preview-row b{
    color:var(--apple-green) !important;
}

.public-options{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    margin-bottom:100px !important;
    border-top:1px solid var(--apple-line) !important;
}

.public-option{
    min-height:260px !important;
    padding:42px 35px !important;
    border:0 !important;
    border-right:1px solid var(--apple-line) !important;
    border-bottom:1px solid var(--apple-line) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.public-option:last-child{
    border-right:0 !important;
}

.public-option:hover{
    background:rgba(255,255,255,.025) !important;
}

.option-icon{
    margin-bottom:28px !important;
    font-size:24px !important;
}

.public-option h2{
    margin:0 0 14px !important;
    font-size:29px !important;
    letter-spacing:-1.5px !important;
}

.public-option p{
    max-width:500px !important;
    color:var(--apple-muted) !important;
}

.public-option a{
    display:inline-block !important;
    margin-top:20px !important;
    color:white !important;
    font-weight:850 !important;
}

@media(max-width:900px){

    .public-body .hero{
        grid-template-columns:1fr !important;
        gap:60px !important;
        padding:70px 0 !important;
    }

    .hero-copy h1{
        font-size:58px !important;
        letter-spacing:-4px !important;
    }

    .portal-preview{
        max-width:600px;
    }
}

@media(max-width:650px){

    .public-header{
        height:70px !important;
    }

    .public-body .hero{
        padding-top:55px !important;
    }

    .hero-copy h1{
        font-size:45px !important;
        letter-spacing:-3px !important;
    }

    .hero-actions{
        flex-direction:column !important;
    }

    .public-primary{
        width:100% !important;
    }

    .hero-features{
        display:grid !important;
    }

    .preview-card{
        padding:25px !important;
        border-radius:23px !important;
    }

    .public-options{
        grid-template-columns:1fr !important;
    }

    .public-option{
        min-height:auto !important;
        padding:35px 10px !important;
        border-right:0 !important;
    }
}
