:root {
    color-scheme: dark;

    --bg: #02070c;
    --bg-secondary: #050c13;

    --panel: #061019;
    --panel-light: #091620;

    --white: #f3f7f8;
    --muted: #82949d;
    --muted-light: #a7b4ba;

    --border: #243945;
    --border-hover: #36525f;

    --red: #ff3038;
    --red-light: #ff565d;
    --red-dark: #9e0b15;

    --cyan: #12d5d2;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;

    color: var(--white);

    background:
        #02070c;

    overflow-x: hidden;
}

button,
input {
    font: inherit;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.login-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(440px, 0.94fr);
}


/* =========================================================
   LEFT
   ========================================================= */

.brand-panel {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    padding:
        clamp(40px, 5vw, 76px)
        clamp(42px, 6vw, 96px);

    display: flex;

    flex-direction: column;

    background:
        radial-gradient(
            circle at 22% 20%,
            rgba(255, 34, 43, 0.07),
            transparent 30rem
        ),
        linear-gradient(
            145deg,
            #040a11 0%,
            #02070c 72%
        );

    border-right:
        1px solid
        rgba(255, 255, 255, 0.07);
}


/* =========================================================
   LOGO
   ========================================================= */

.brand-header {
    position: relative;

    z-index: 10;
}

.brand-logo {
    display: block;

    width:
        clamp(190px, 18vw, 280px);

    max-height: 110px;

    object-fit: contain;

    object-position: left center;

    filter:
        drop-shadow(
            0 12px 24px
            rgba(255, 35, 45, 0.1)
        );
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    z-index: 8;

    width:
        min(100%, 680px);

    margin-top:
        clamp(32px, 5vh, 64px);
}

.hero-kicker {
    margin: 0 0 14px;

    color: var(--red);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.19em;
}

.hero h1 {
    margin: 0;

    font-size:
        clamp(48px, 4.8vw, 76px);

    line-height: 1.015;

    letter-spacing:
        -0.055em;
}

.red {
    color: var(--red);

    text-shadow:
        0 0 30px
        rgba(255, 40, 48, 0.13);
}

.cyan {
    color: var(--cyan);

    text-shadow:
        0 0 28px
        rgba(18, 213, 210, 0.1);
}

.hero-description {
    max-width: 550px;

    margin:
        25px 0 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.features {
    width:
        min(100%, 460px);

    display: grid;

    gap: 10px;

    margin-top: 27px;
}

.feature {
    min-height: 68px;

    padding:
        12px 17px;

    display: flex;

    align-items: center;

    gap: 17px;

    border:
        1px solid
        rgba(96, 128, 143, 0.32);

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 17, 25, 0.96),
            rgba(4, 11, 17, 0.86)
        );

    backdrop-filter:
        blur(10px);

    transition:
        border-color 150ms ease,
        transform 150ms ease,
        background 150ms ease;
}

.feature:hover {
    transform:
        translateX(3px);

    border-color:
        rgba(255, 48, 56, 0.38);

    background:
        rgba(255, 40, 48, 0.035);
}

.feature-symbol {
    flex: 0 0 38px;

    color: var(--red);

    font-size: 28px;

    text-align: center;

    text-shadow:
        0 0 15px
        rgba(255, 40, 48, 0.3);
}

.feature > div:last-child {
    display: grid;

    gap: 4px;
}

.feature strong {
    color: #edf3f5;

    font-size: 14px;
}

.feature span {
    color: #77909c;

    font-size: 12px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.brand-footer {
    position: relative;

    z-index: 9;

    margin-top: auto;

    padding-top: 34px;

    display: flex;

    gap: 11px;

    align-items: center;

    color: #c8484e;

    font-size: 12px;

    font-weight: 650;
}

.claw-mark {
    color: var(--red);

    font-size: 18px;

    text-shadow:
        0 0 14px
        rgba(255, 48, 56, 0.35);
}


/* =========================================================
   ABSTRACT CLAW
   ========================================================= */

.claw-decoration {
    position: absolute;

    width: 420px;

    height: 420px;

    right: -120px;

    bottom: -125px;

    opacity: 0.28;

    transform:
        rotate(-10deg);

    pointer-events: none;
}

.claw-core {
    position: absolute;

    width: 150px;

    height: 115px;

    left: 100px;

    top: 175px;

    border:
        2px solid
        rgba(255, 43, 51, 0.65);

    border-radius:
        55% 40% 55% 45%;

    background:
        radial-gradient(
            circle,
            rgba(255, 35, 45, 0.10),
            transparent 70%
        );

    box-shadow:
        0 0 55px
        rgba(255, 24, 34, 0.1);
}

.claw-piece {
    position: absolute;

    width: 175px;

    height: 82px;

    left: 182px;

    border:
        2px solid
        rgba(255, 42, 51, 0.7);

    border-radius:
        85% 20% 80% 20%;
}

.claw-upper {
    top: 100px;

    transform:
        rotate(-27deg);
}

.claw-lower {
    top: 215px;

    transform:
        rotate(27deg);
}


/* =========================================================
   RADAR
   ========================================================= */

.radar {
    position: absolute;

    border:
        1px solid
        rgba(255, 40, 48, 0.11);

    border-radius: 50%;

    pointer-events: none;
}

.radar-a {
    width: 660px;

    height: 660px;

    right: -185px;

    top: 140px;
}

.radar-b {
    width: 490px;

    height: 490px;

    right: -100px;

    top: 225px;
}

.radar-c {
    width: 310px;

    height: 310px;

    right: -10px;

    top: 315px;

    border-style:
        dashed;
}

.radar-dot {
    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--red);

    box-shadow:
        0 0 13px
        var(--red);
}

.dot-a {
    right: 19%;

    top: 18%;
}

.dot-b {
    right: 10%;

    top: 37%;
}

.dot-c {
    right: 23%;

    top: 55%;
}


/* =========================================================
   GLOWS
   ========================================================= */

.red-glow {
    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background:
        rgba(255, 28, 39, 0.08);

    filter:
        blur(100px);

    pointer-events: none;
}

.red-glow-top {
    top: -150px;

    left: -120px;
}

.red-glow-bottom {
    right: -120px;

    bottom: -160px;
}


/* =========================================================
   LOGIN SIDE
   ========================================================= */

.login-panel {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        clamp(40px, 5vw, 82px);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 30, 41, 0.075),
            transparent 26rem
        ),
        linear-gradient(
            180deg,
            #061019,
            #030a11
        );
}

.corner-accent {
    position: absolute;

    top: 25px;

    right: 25px;

    width: 160px;

    height: 110px;

    border-top:
        2px solid
        rgba(255, 48, 56, 0.55);

    border-right:
        2px solid
        rgba(255, 48, 56, 0.55);

    border-radius:
        0 18px 0 0;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 40, 48, 0.25)
        );
}

.login-card {
    position: relative;

    z-index: 3;

    width:
        min(100%, 540px);
}

.mobile-logo-wrap {
    display: none;
}

.login-eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: var(--red);

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 0.2em;
}

.eyebrow-dot {
    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 12px var(--red);
}

.login-header h2 {
    margin: 0;

    font-size:
        clamp(46px, 4vw, 64px);

    line-height: 1;

    letter-spacing:
        -0.05em;
}

.login-header p {
    max-width: 440px;

    margin:
        18px 0 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.6;
}

.login-header strong {
    color:
        var(--white);
}


/* =========================================================
   ERROR
   ========================================================= */

.login-error {
    margin-top: 25px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(255, 74, 80, 0.27);

    border-radius: 10px;

    background:
        rgba(255, 41, 49, 0.08);

    color:
        #ffbabd;

    font-size: 13px;
}


/* =========================================================
   FORM
   ========================================================= */

.login-form {
    margin-top: 35px;

    display: grid;

    gap: 22px;
}

.login-form label {
    display: grid;

    gap: 9px;
}

.field-label {
    color:
        #ced7db;

    font-size: 13px;

    font-weight: 650;
}

.field {
    position: relative;
}

.field input {
    width: 100%;

    height: 64px;

    padding:
        0 82px
        0 55px;

    color:
        var(--white);

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    outline: none;

    background:
        rgba(4, 14, 22, 0.84);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.field input:hover {
    border-color:
        var(--border-hover);
}

.field input:focus {
    border-color:
        rgba(255, 48, 56, 0.78);

    background:
        #07141d;

    box-shadow:
        0 0 0 3px
        rgba(255, 48, 56, 0.07);
}

.field-icon {
    position: absolute;

    z-index: 2;

    left: 20px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--red);

    font-size: 21px;
}

.password-toggle {
    position: absolute;

    z-index: 2;

    right: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    border: 0;

    padding: 8px;

    background:
        transparent;

    color:
        var(--cyan);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   BUTTON
   ========================================================= */

.submit-button {
    height: 68px;

    margin-top: 7px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border:
        1px solid
        rgba(255, 100, 104, 0.72);

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            105deg,
            #ff4147,
            #db1721
        );

    box-shadow:
        0 14px 45px
        rgba(201, 12, 25, 0.23);

    cursor: pointer;

    font-weight: 800;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}

.submit-button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.07);

    box-shadow:
        0 18px 50px
        rgba(215, 14, 27, 0.3),
        0 0 0 1px
        rgba(18, 213, 210, 0.42);
}

.submit-button:active {
    transform:
        translateY(0);
}

.button-label {
    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 18px;
}

.button-claw {
    color:
        #3a0509;

    font-size: 24px;
}

.button-arrow {
    font-size: 30px;

    font-weight: 400;
}


/* =========================================================
   SECURITY
   ========================================================= */

.secure-note {
    margin-top: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color:
        #718792;

    font-size: 12px;
}

.secure-icon {
    color:
        var(--cyan);

    font-size: 17px;

    text-shadow:
        0 0 11px
        rgba(18, 213, 210, 0.35);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

    .brand-panel {
        padding:
            44px 48px;
    }

    .hero h1 {
        font-size:
            clamp(44px, 5vw, 60px);
    }
}


@media (max-width: 900px) {

    .login-shell {
        display: block;
    }

    .brand-panel {
        display: none;
    }

    .login-panel {
        min-height: 100vh;

        padding:
            40px 24px;
    }

    .mobile-logo-wrap {
        display: block;

        margin-bottom: 48px;
    }

    .mobile-logo {
        width: 230px;

        max-height: 95px;

        object-fit: contain;

        object-position: left center;
    }
}


@media (max-width: 520px) {

    .login-panel {
        align-items:
            flex-start;

        padding-top:
            42px;
    }

    .corner-accent {
        width: 95px;

        height: 75px;
    }

    .mobile-logo {
        width:
            195px;
    }

    .login-header h2 {
        font-size:
            43px;
    }

    .field input {
        height:
            59px;
    }

    .submit-button {
        height:
            62px;
    }

    .button-label {
        font-size:
            16px;
    }
}


/* =========================================================
   SEARCHCRAB ICON POLISH
   ========================================================= */

.brand-logo {
    width: clamp(250px, 22vw, 340px);
    max-height: 140px;
}

.feature-symbol {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    color: var(--red);

    background:
        rgba(255, 48, 56, 0.06);

    border:
        1px solid
        rgba(255, 48, 56, 0.16);

    font-size: 23px;
}

.feature-symbol i,
.field-icon i,
.claw-mark i,
.secure-icon i,
.button-claw i,
.button-arrow i,
.login-eyebrow i {
    line-height: 1;
}

.login-eyebrow i {
    font-size: 17px;

    color: var(--red);

    text-shadow:
        0 0 12px
        rgba(255, 48, 56, 0.32);
}

.field-icon {
    display: grid;
    place-items: center;

    width: 26px;

    font-size: 22px;
}

.field-icon i {
    display: block;
}

.password-toggle {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 10px;

    font-size: 21px;

    transition:
        color 150ms ease,
        background 150ms ease;
}

.password-toggle:hover {
    color: #7cf5f2;

    background:
        rgba(18, 213, 210, 0.06);
}

.button-claw {
    display: grid;
    place-items: center;

    color: #4b0509;

    font-size: 25px;
}

.button-arrow {
    display: grid;
    place-items: center;

    font-size: 27px;
}

.secure-icon {
    display: grid;
    place-items: center;

    font-size: 18px;
}

.claw-mark {
    display: grid;
    place-items: center;

    font-size: 20px;
}

@media (max-width: 1000px) {
    .brand-logo {
        width: 240px;
    }
}

@media (max-width: 900px) {
    .mobile-logo {
        width: 260px;
        max-height: 115px;
    }
}

@media (max-width: 520px) {
    .mobile-logo {
        width: 220px;
    }
}

/* =========================================================
   SEARCHCRAB LOGIN - FIT EN UNA SOLA PANTALLA
   ========================================================= */

html,
body {
    height: 100%;
    overflow: hidden;
}

.login-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.brand-panel,
.login-panel {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* Compactamos ligeramente el lado izquierdo */
.brand-panel {
    padding:
        clamp(28px, 3.3vh, 48px)
        clamp(42px, 5vw, 82px);
}

.brand-logo {
    width: clamp(220px, 19vw, 300px);
    max-height: 105px;
}

.hero {
    margin-top: clamp(18px, 2.7vh, 34px);
}

.hero-kicker {
    margin-bottom: 10px;
}

.hero h1 {
    font-size:
        clamp(46px, 4.15vw, 67px);

    line-height: 0.98;
}

.hero-description {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 530px;
}

.features {
    margin-top: 18px;
    gap: 7px;
}

.feature {
    min-height: 54px;
    padding: 8px 13px;
    gap: 13px;
}

.feature-symbol {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 20px;
}

.feature strong {
    font-size: 13px;
}

.feature span {
    font-size: 11px;
}

.brand-footer {
    padding-top: 16px;
    font-size: 11px;
}

/* Panel derecho un poco más compacto */
.login-panel {
    padding:
        clamp(30px, 4vh, 58px)
        clamp(44px, 5vw, 78px);
}

.login-card {
    width: min(100%, 520px);
}

.login-header h2 {
    font-size:
        clamp(44px, 3.6vw, 58px);
}

.login-header p {
    margin-top: 14px;
    font-size: 14px;
}

.login-form {
    margin-top: 26px;
    gap: 16px;
}

.field input {
    height: 58px;
}

.submit-button {
    height: 62px;
}

.secure-note {
    margin-top: 18px;
}

/* En laptops con poca altura, apretamos un poco más */
@media (max-height: 850px) and (min-width: 901px) {
    .brand-panel {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .brand-logo {
        width: 210px;
        max-height: 88px;
    }

    .hero {
        margin-top: 14px;
    }

    .hero h1 {
        font-size: clamp(42px, 3.8vw, 59px);
    }

    .hero-description {
        margin-top: 13px;
        font-size: 13px;
    }

    .features {
        margin-top: 13px;
        gap: 6px;
    }

    .feature {
        min-height: 49px;
        padding: 7px 12px;
    }

    .brand-footer {
        padding-top: 10px;
    }

    .login-panel {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .login-form {
        margin-top: 21px;
    }

    .field input {
        height: 55px;
    }

    .submit-button {
        height: 58px;
    }
}

/* En móvil sí permitimos scroll porque no hay magia geométrica */
@media (max-width: 900px) {
    html,
    body {
        height: auto;
        overflow-y: auto;
    }

    .login-shell,
    .login-panel {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
}

/* =========================================================
   SEARCHCRAB LOGIN - LOGO MÁS GRANDE
   ========================================================= */

.brand-logo {
    width: clamp(260px, 22vw, 360px);
    max-height: 130px;
    height: auto;
    object-fit: contain;
}

@media (max-height: 850px) and (min-width: 901px) {
    .brand-logo {
        width: clamp(230px, 20vw, 310px);
        max-height: 112px;
    }
}

@media (max-width: 900px) {
    .brand-logo {
        width: clamp(190px, 42vw, 260px);
        max-height: 96px;
    }
}

/* =========================================================
   SEARCHCRAB LOGIN - LOGO REAL MÁS GRANDE
   ========================================================= */

.brand-header {
    width: 360px;
    height: 120px;
    overflow: visible;
}

.brand-logo {
    width: 360px;
    max-height: none;
    height: auto;

    transform: scale(1.45);
    transform-origin: left center;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(
            0 10px 26px
            rgba(255, 38, 45, 0.16)
        );
}

@media (max-height: 850px) and (min-width: 901px) {
    .brand-header {
        width: 330px;
        height: 110px;
    }

    .brand-logo {
        width: 330px;
        transform: scale(1.42);
    }
}

@media (max-width: 900px) {
    .brand-header {
        width: auto;
        height: auto;
    }

    .brand-logo {
        width: 280px;
        transform: scale(1.15);
    }
}

/* =========================================================
   AJUSTE FINAL LOGO SEARCHCRAB
   ========================================================= */

.brand-header {
    width: 300px;
    height: 92px;
    overflow: visible;
}

.brand-logo {
    width: 300px;
    height: auto;
    max-height: 92px;

    transform: none;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(
            0 8px 20px
            rgba(255, 38, 45, 0.14)
        );
}

@media (max-height: 850px) and (min-width: 901px) {
    .brand-header {
        width: 280px;
        height: 84px;
    }

    .brand-logo {
        width: 280px;
        max-height: 84px;
        transform: none;
    }
}

@media (max-width: 900px) {
    .brand-header {
        width: auto;
        height: auto;
    }

    .brand-logo {
        width: 240px;
        max-height: 90px;
        transform: none;
    }
}

/* =========================================================
   SEARCHCRAB LOGIN - FIT EN UNA SOLA PANTALLA
   ========================================================= */

html,
body {
    height: 100%;
    overflow: hidden;
}

.login-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.brand-panel,
.login-panel {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* Compactamos ligeramente el lado izquierdo */
.brand-panel {
    padding:
        clamp(28px, 3.3vh, 48px)
        clamp(42px, 5vw, 82px);
}

.brand-logo {
    width: clamp(220px, 19vw, 300px);
    max-height: 105px;
}

.hero {
    margin-top: clamp(18px, 2.7vh, 34px);
}

.hero-kicker {
    margin-bottom: 10px;
}

.hero h1 {
    font-size:
        clamp(46px, 4.15vw, 67px);

    line-height: 0.98;
}

.hero-description {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 530px;
}

.features {
    margin-top: 18px;
    gap: 7px;
}

.feature {
    min-height: 54px;
    padding: 8px 13px;
    gap: 13px;
}

.feature-symbol {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 20px;
}

.feature strong {
    font-size: 13px;
}

.feature span {
    font-size: 11px;
}

.brand-footer {
    padding-top: 16px;
    font-size: 11px;
}

/* Panel derecho un poco más compacto */
.login-panel {
    padding:
        clamp(30px, 4vh, 58px)
        clamp(44px, 5vw, 78px);
}

.login-card {
    width: min(100%, 520px);
}

.login-header h2 {
    font-size:
        clamp(44px, 3.6vw, 58px);
}

.login-header p {
    margin-top: 14px;
    font-size: 14px;
}

.login-form {
    margin-top: 26px;
    gap: 16px;
}

.field input {
    height: 58px;
}

.submit-button {
    height: 62px;
}

.secure-note {
    margin-top: 18px;
}

/* En laptops con poca altura, apretamos un poco más */
@media (max-height: 850px) and (min-width: 901px) {
    .brand-panel {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .brand-logo {
        width: 210px;
        max-height: 88px;
    }

    .hero {
        margin-top: 14px;
    }

    .hero h1 {
        font-size: clamp(42px, 3.8vw, 59px);
    }

    .hero-description {
        margin-top: 13px;
        font-size: 13px;
    }

    .features {
        margin-top: 13px;
        gap: 6px;
    }

    .feature {
        min-height: 49px;
        padding: 7px 12px;
    }

    .brand-footer {
        padding-top: 10px;
    }

    .login-panel {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .login-form {
        margin-top: 21px;
    }

    .field input {
        height: 55px;
    }

    .submit-button {
        height: 58px;
    }
}

/* En móvil sí permitimos scroll porque no hay magia geométrica */
@media (max-width: 900px) {
    html,
    body {
        height: auto;
        overflow-y: auto;
    }

    .login-shell,
    .login-panel {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
}

/* =========================================================
   SEARCHCRAB LOGIN - AJUSTE REAL DE LOGO
   ========================================================= */

.brand-header {
    width: 380px;
    height: 115px;
    overflow: visible;
}

.brand-logo {
    width: 380px;
    height: auto;
    max-height: 115px;

    transform: scale(1.12);
    transform-origin: left center;

    object-fit: contain;
    object-position: left center;

    filter:
        drop-shadow(
            0 10px 24px
            rgba(255, 38, 45, 0.16)
        );
}

/* Laptops con poca altura */
@media (max-height: 850px) and (min-width: 901px) {
    .brand-header {
        width: 350px;
        height: 105px;
    }

    .brand-logo {
        width: 350px;
        max-height: 105px;

        transform: scale(1.1);
    }
}

/* Tablet / móvil */
@media (max-width: 900px) {
    .brand-header {
        width: auto;
        height: auto;
    }

    .brand-logo {
        width: 280px;
        max-height: 105px;

        transform: none;
    }
}

/* Logo SearchCrab +10% */
.brand-header {
    width: 418px;
    height: 126px;
}

.brand-logo {
    width: 418px;
    max-height: 126px;
    transform: scale(1.12);
    transform-origin: left center;
}

@media (max-height: 850px) and (min-width: 901px) {
    .brand-header {
        width: 385px;
        height: 116px;
    }

    .brand-logo {
        width: 385px;
        max-height: 116px;
        transform: scale(1.1);
    }
}