/* =========================================================
   REGISTRO DE SALÓN
========================================================= */

.registro-page {
    background: #ffffff;
}


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

.registro-hero {
    padding:
        170px 0 110px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(39, 170, 115, 0.20),
            transparent 30%
        ),
        var(--apapacho-blue-dark);
}

.registro-hero-grid {
    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    align-items: center;

    gap: 90px;
}

.registro-intro {
    max-width: 760px;
}

.registro-kicker {
    display: inline-block;

    margin-bottom: 20px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.registro-intro h1 {
    margin:
        0 0 25px;

    font-size:
        clamp(
            54px,
            6vw,
            92px
        );

    line-height: 0.92;

    letter-spacing: -0.055em;
}

.registro-intro h1 span {
    display: block;

    color: #8be8f6;
}

.registro-intro > p {
    max-width: 650px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 18px;
    line-height: 1.65;
}


/* =========================================================
   PASOS
========================================================= */

.registro-steps {
    display: grid;

    gap: 15px;
}

.registro-step {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 22px;

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

    border-radius: 22px;

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

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.registro-step > span {
    min-width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    color:
        var(--apapacho-ink);

    border-radius: 50%;

    background:
        var(--apapacho-yellow);

    font-size: 12px;
    font-weight: 900;
}

.registro-step strong {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;
}

.registro-step p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 13px;
    line-height: 1.5;
}


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

.registro-form-section {
    padding:
        140px 0 170px;

    background:
        var(--apapacho-blue-light);
}

.registro-card {
    max-width: 1100px;

    margin: 0 auto;

    padding: 65px;

    border-radius:
        var(--radius-xl);

    background: #ffffff;

    box-shadow:
        0 35px 90px
        rgba(9, 43, 59, 0.08);
}

.registro-card-header {
    max-width: 700px;

    margin-bottom: 50px;
}

.registro-card-header > span {
    display: block;

    margin-bottom: 12px;

    color:
        var(--apapacho-blue);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.13em;
}

.registro-card-header h2 {
    margin:
        0 0 14px;

    color:
        var(--apapacho-ink);

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    line-height: 1;

    letter-spacing: -0.04em;
}

.registro-card-header p {
    margin: 0;

    color:
        var(--apapacho-text);

    font-size: 16px;
    line-height: 1.6;
}


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

.registro-form {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px 22px;
}

.form-group {
    min-width: 0;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;

    margin-bottom: 9px;

    color:
        var(--apapacho-ink);

    font-size: 13px;
    font-weight: 800;
}

.form-group input:not([type="file"]),
.form-group select {
    width: 100%;
    height: 58px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(9, 43, 59, 0.14);

    border-radius: 15px;

    outline: none;

    color:
        var(--apapacho-ink);

    background:
        #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input::placeholder {
    color:
        rgba(9, 43, 59, 0.38);
}

.form-group input:focus,
.form-group select:focus {
    border-color:
        var(--apapacho-blue);

    box-shadow:
        0 0 0 4px
        rgba(20, 181, 212, 0.10);
}


/* =========================================================
   SELECTS
========================================================= */

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding:
        0 52px 0 18px;

    cursor: pointer;

    font: inherit;

    background-color:
        #ffffff;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23092b3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        right 18px center;

    background-size:
        18px;
}

.form-group select:hover {
    border-color:
        rgba(20, 181, 212, 0.55);
}

.form-group select:disabled {
    cursor: not-allowed;

    color:
        rgba(9, 43, 59, 0.45);

    background-color:
        rgba(9, 43, 59, 0.04);

    opacity: 0.75;
}

.form-group select option {
    color:
        var(--apapacho-ink);

    background:
        #ffffff;
}


/* =========================================================
   UPLOAD
========================================================= */

.logo-upload {
    min-height: 125px;

    display: flex !important;

    align-items: center;

    gap: 18px;

    padding: 25px;

    cursor: pointer;

    border:
        1.5px dashed
        rgba(20, 181, 212, 0.45);

    border-radius: 20px;

    background:
        var(--apapacho-blue-light);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.logo-upload:hover {
    border-color:
        var(--apapacho-blue);

    background:
        rgba(20, 181, 212, 0.12);
}

.logo-upload-icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    color: #ffffff;

    border-radius: 50%;

    background:
        var(--apapacho-blue);

    font-size: 28px;
}

.logo-upload strong {
    display: block;

    margin-bottom: 4px;

    color:
        var(--apapacho-ink);
}

.logo-upload small {
    display: block;

    color:
        var(--apapacho-text);
}

.logo-upload input {
    display: none;
}


/* =========================================================
   SUBMIT
========================================================= */

.form-footer {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 10px;
}

.registro-submit {
    min-height: 58px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding:
        0 28px;

    cursor: pointer;

    border: 0;

    border-radius: 999px;

    color: #ffffff;

    background:
        var(--apapacho-green);

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 14px 30px
        rgba(39, 170, 115, 0.18);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

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

    background:
        var(--apapacho-green-dark);
}

#form-message {
    margin: 0;

    font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .registro-hero-grid {
        grid-template-columns:
            1fr;

        gap: 60px;
    }

    .registro-steps {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .registro-step {
        flex-direction: column;
    }

}


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

@media (max-width: 700px) {

    .registro-hero {
        padding:
            130px 0 85px;
    }

    .registro-intro h1 {
        font-size:
            clamp(
                48px,
                14vw,
                64px
            );
    }

    .registro-steps {
        grid-template-columns:
            1fr;
    }

    .registro-form-section {
        padding:
            90px 0 110px;
    }

    .registro-card {
        padding:
            38px 22px;

        border-radius: 32px;
    }

    .registro-form {
        grid-template-columns:
            1fr;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-footer {
        align-items: stretch;

        flex-direction: column;
    }

    .registro-submit {
        width: 100%;
    }

}


/* =========================================================
   PREVIEW LOGO - REGISTRO DE SALÓN
========================================================= */

.logo-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}


/* Imagen seleccionada */
.logo-upload .logo-preview {
    display: block !important;

    width: 72px !important;
    height: 72px !important;

    min-width: 72px !important;
    min-height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;

    flex: 0 0 72px !important;

    object-fit: contain !important;

    padding: 7px;

    border-radius: 14px;

    background: #ffffff;

    border: 1px solid rgba(9, 43, 59, 0.10);

    box-sizing: border-box;
}


/* Cuando ya existe una imagen,
   ocultamos el círculo con el + */
.logo-upload.has-file .logo-upload-icon {
    display: none !important;
}


/* El texto permanece junto a la miniatura */
.logo-upload.has-file > span:not(.logo-upload-icon) {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}


/* Evita que reglas generales de imágenes
   hagan crecer la preview */
.logo-upload.has-file img.logo-preview {
    width: 72px !important;
    height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;
}


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

@media (max-width: 560px) {

    .logo-upload .logo-preview {
        width: 62px !important;
        height: 62px !important;

        min-width: 62px !important;
        min-height: 62px !important;

        max-width: 62px !important;
        max-height: 62px !important;

        flex-basis: 62px !important;
    }

}