@font-face {
    font-family: Inter;
    src: url("../Mantis_design/assets/fonts/inter/Inter-roman.var.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

.cuenta {
    --tinta: #1c2c26;
    --secundario: #52635a;
    --acento: #235742;
    --acento-oscuro: #183f30;
    --borde: #cbd6cf;
    box-sizing: border-box;
    min-height: 100vh;
    margin: 0;
    color: var(--tinta);
    background: #edf2ee;
    font: 16px/1.5 Inter, system-ui, sans-serif;
}

.cuenta *, .cuenta *::before, .cuenta *::after { box-sizing: inherit; }
.cuenta [hidden] { display: none !important; }
.cuenta a { color: var(--acento); text-underline-offset: .23em; }
.cuenta :focus-visible { outline: 3px solid #397654; outline-offset: 3px; }

.cuenta-marco {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;
    max-width: none;
    margin-inline: auto;
    padding: 0;
}

.cuenta-foto {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: end;
    min-height: 100%;
    overflow: hidden;
    padding: clamp(28px, 5vw, 84px);
    border-radius: 0;
    background: #264b3e;
    color: #fff;
}

.cuenta-foto picture, .cuenta-foto::after { position: absolute; inset: 0; }
.cuenta-foto picture { z-index: -2; }
.cuenta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cuenta-foto::after {
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, #102a201a 35%, #102a20e8 100%);
}

.cuenta-panel {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(28px, 5vw, 72px);
    border: 0;
    border-radius: 0;
    background: #fff;
}

.cuenta-panel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -44px;
    width: 88px;
    background: linear-gradient(90deg, #ffffff00, #ffffff80 45%, #fff 82%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
    mask-image: linear-gradient(90deg, transparent, #000 32%);
    pointer-events: none;
}

.cuenta-contenido { position: relative; width: min(100%, 25rem); }
.cuenta-marca { display: inline-flex; align-items: center; gap: .78rem; color: var(--tinta) !important; font-weight: 730; text-decoration: none; }
.cuenta-marca img { display: block; padding: 0; border-radius: 0; background: transparent; object-fit: contain; }
.cuenta-login .cuenta-marco { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.cuenta-login .cuenta-panel { grid-column: 2; grid-row: 1; }
.cuenta-login .cuenta-foto { grid-column: 1; grid-row: 1; }
.cuenta-login .cuenta-foto::after { background:linear-gradient(180deg,#15382504,#15382524); }
.cuenta-login .cuenta-foto img { object-position:46% center; }
.cuenta-login .cuenta-marca { display: flex; flex-direction: column; align-items: center; gap: .65rem; font-size: 1.3rem; text-align:center; }
.cuenta-login .cuenta-encabezado, .cuenta-login .cuenta-pie { text-align:center; }
.cuenta-login .cuenta-panel::before {
    inset-inline-start: -44px; inset-inline-end: auto;
    background: linear-gradient(90deg, #ffffff00, #ffffff80 45%, #fff 82%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
    mask-image: linear-gradient(90deg, transparent, #000 32%);
}
.cuenta-marca small { display: block; color: var(--secundario); font-size: .75rem; font-weight: 520; }
.cuenta-encabezado { margin: clamp(1.5rem, 4vh, 2.7rem) 0 1.45rem; }
.cuenta-encabezado h1 { margin: 0; font-size: clamp(1.85rem, 4vw, 2.7rem); font-weight: 760; line-height: 1.12; letter-spacing: -.055em; }
.cuenta-login-encabezado h1 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); letter-spacing: -.035em; }
.cuenta-encabezado p { margin: .62rem 0 0; color: var(--secundario); }
.cuenta-campo { display: grid; gap: .37rem; margin-bottom: 1rem; }
.cuenta-campo label { font-size: .89rem; font-weight: 650; }

.cuenta-campo input {
    width: 100%;
    min-height: 49px;
    padding: .64rem .8rem;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: #fbfdfb;
    color: var(--tinta);
    font: inherit;
}

.cuenta-campo input:focus { border-color: var(--acento); }
.cuenta-campo input::placeholder { color: #64736b; opacity: 1; }
.cuenta-clave { position: relative; }
.cuenta-clave input { padding-inline-end: 5.4rem; }
.cuenta-clave button {
    position: absolute;
    inset-block: 4px;
    inset-inline-end: 4px;
    min-width: 4.75rem;
    padding: .35rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--acento);
    font: inherit;
    font-size: .79rem;
    font-weight: 680;
    cursor: pointer;
}

.cuenta-clave button:hover { background: #e9f2eb; }
.cuenta-opciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem 1rem; margin-bottom: 1.15rem; font-size: .85rem; }
.cuenta-check { display: inline-flex; align-items: center; min-height: 44px; gap: .45rem; cursor: pointer; }
.cuenta-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--acento); }
.cuenta-opciones a, .cuenta-regreso { font-weight: 650; }
.cuenta-regreso { display: inline-block; margin-top: 1.1rem; }

.cuenta .cuenta-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 49px;
    padding: .65rem 1rem;
    border: 1px solid var(--acento);
    border-radius: 10px;
    background: var(--acento);
    color: #fff;
    font: inherit;
    font-weight: 670;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.cuenta-boton:hover { background: var(--acento-oscuro); }
.cuenta-boton:disabled { opacity: .75; cursor: wait; }
.cuenta-error { color: #a2252f; font-size: .84rem; }
.cuenta-error ul { margin: 0 0 1rem; padding: .63rem .75rem .63rem 1.8rem; border-radius: 8px; background: #fdf0f0; }
.cuenta .validation-summary-valid, .cuenta .field-validation-valid { display: none; }
.cuenta .input-validation-error { border-color: #a2252f; }
.cuenta-aviso { padding: .66rem .76rem; border-radius: 8px; background: #e8f5eb; color: #194432; font-size: .88rem; }
.cuenta-ayuda { color: #735116; font-size: .83rem; }
.cuenta-pie { margin-top: 1.8rem; color: var(--secundario); font-size: .79rem; }
.cuenta-credito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: .25rem;
    margin-top: .3rem;
}
.cuenta-credito img { display: block; }

@media (max-width: 700px) {
    .cuenta-login .cuenta-marco { grid-template-columns: minmax(0, 1fr); }
    .cuenta-login .cuenta-foto { grid-column: 1; grid-row: 1; }
    .cuenta-login .cuenta-panel { grid-column: 1; grid-row: 2; }
    .cuenta-login .cuenta-marca { flex-direction: column; align-items: center; font-size: 1.1rem; }
    .cuenta-marco { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0; }
    .cuenta-foto { min-height: clamp(145px, 25svh, 222px); padding: 1.2rem 1.4rem; border-radius: 0; }
    .cuenta-panel { place-items: start center; padding: 1.35rem clamp(17px, 6vw, 40px) 1.75rem; border: 0; border-radius: 0; }
    .cuenta-panel::before, .cuenta-login .cuenta-panel::before {
        inset-block: -28px auto;
        inset-inline: 0;
        width: auto;
        height: 56px;
        background: linear-gradient(180deg, #ffffff00, #ffffff80 45%, #fff 82%);
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%);
        mask-image: linear-gradient(180deg, transparent, #000 32%);
    }
}