/* Cambios del rediseño (maqueta) */

/* Hero: el rayo del media kit como textura de fondo (solo el tono, sin línea ni resplandor) */
:root .c-hero {
    overflow: hidden;
}
.c-hero__rayo {
    position: absolute;
    left: 52%;
    top: 50%;
    height: 112%;
    aspect-ratio: 42 / 73;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}
.c-hero__rayo path {
    fill: #FFFFFF;
    fill-opacity: .09;
}
/* sin el resplandor de atrás del celular (hero-app-mockup-bg.png) */
:root .c-hero__image-holder::before {
    content: none;
}
.c-hero-image {
    position: relative;
    isolation: isolate;
}
/* menos aire muerto arriba y abajo del hero */
:root .c-hero {
    padding-top: var(--header);
    padding-bottom: calc(var(--separator-y) * .35);
}
:root .c-hero__wrapper {
    padding-block: 2rem;
}
/* menos aire entre el hero y Comisiones */
:root #planes.o-section-t {
    padding-top: calc(var(--section-y) * .5);
}
/* el celular no estira la sección: alto acotado */
:root .c-hero__picture {
    width: auto;
    display: flex;
    justify-content: center;
}
.c-hero__picture img {
    width: auto;
    max-height: min(58vh, 54rem);
}
@media (max-width: 61.1875rem) {
    .c-hero__picture img { max-height: 44vh; }
}

/* Celular: "Iniciar sesión" siempre visible al lado del menú */
.c-header__login {
    margin-left: auto;
    margin-right: 1.4rem;
    padding: .7em 1.3em;
    font-size: 1.3rem;
    white-space: nowrap;
}
@media (min-width: 75rem) {
    .c-header__login { display: none; }
}
/* Hover: el violeta (#9831fd) no es de la paleta; pasa al celeste de la marca */
:root:root { --color-hover: var(--color-secondary-400); }

/* Logo apilado: la píldora queda del mismo tamaño que en el logo de una línea */
:root .c-header { --_brand-height: 3.66rem; }
@media (min-width: 75rem) {
    :root .c-header { --_brand-height: 4.2rem; }
}
@media (max-width: 47.9375rem) {
    .c-header__login { margin-right: 1.2rem; padding: .55em 1.1em; font-size: 1.2rem; }
}

/* Etiqueta "Pronto" en las pestañas */
.c-tabs__soon {
    display: inline-block;
    margin-left: .4em;
    padding: .15em .55em;
    border-radius: 99px;
    background: var(--color-secondary-400);
    color: var(--color-primary-900);
    font-size: .7em;
    font-weight: 600;
    vertical-align: .15em;
}

/* Ventana de registro */
.c-popup--registro .c-popup__holder {
    max-width: 62rem;
    min-width: min(62rem, 92vw);
}
.c-registro-popup .c-login-popup__text a {
    color: var(--color-primary-400);
    font-weight: 600;
    text-decoration: underline;
}
.c-registro-popup .c-form {
    margin-top: 2.4rem;
}
.c-registro-popup > .c-registration-form__text:last-child {
    margin-top: 1.6rem;
    font-size: .85em;
    opacity: .75;
}
@media (min-width: 48rem) {
    .c-registro-popup .c-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.2rem;
    }
    .c-registro-popup .c-form > * {
        grid-column: 1 / -1;
    }
    .c-registro-popup .c-form > label[for="reg-password"],
    .c-registro-popup .c-form > label[for="reg-password-confirm"] {
        grid-column: auto;
    }
}

/* Sección de contacto */
.c-contact-box {
    --heading-color: var(--color-primary-900);
    --text-color: hsl(var(--color-primary-900-hsl)/85%);
}
.c-contact-box .c-form {
    margin-top: 3rem;
}
.c-contact-form__row {
    display: grid;
    gap: 0 1.2rem;
}
@media (min-width: 48rem) {
    .c-contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
}
.c-contact-form textarea,
.c-contact-form__select {
    width: 100%;
    font: inherit;
    resize: vertical;
}
.c-contact-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 3rem;
}
.c-contact-form__ok {
    margin-top: 1.6rem;
    color: #15803D;
    font-weight: 600;
}

/* Ventanas de login y registro y formulario de contacto más compactos (Manu: "demasiado grandes") */
:root .c-popup--login .c-popup__holder {
    --popup-px: clamp(2rem, 3vw, 3.2rem);
    --popup-py: clamp(2.2rem, 3vw, 3rem);
    max-width: 42rem;
    min-width: min(42rem, 92vw);
}
:root .c-popup--registro .c-popup__holder {
    max-width: 50rem;
    min-width: min(50rem, 92vw);
}
:root .c-popup--login .c-login-popup {
    gap: 1.2rem;
}
:root .c-popup--login .c-login-popup__brand img {
    width: 12.5rem;
}
:root .c-popup--login .c-login-popup__heading {
    font-size: clamp(2rem, 2.2vw, 2.4rem);
}
:root .c-popup--login .c-login-popup__text {
    font-size: 1.35rem;
}
.c-popup--login .c-form,
.c-contact-box .c-form {
    --_inputs-gap: .9rem;
    --_input-fz: 1.4rem;
    --_input-py: .7em;
}
:root .c-popup--login .c-login-form .c-form__label {
    min-height: 4rem;
}
:root .c-popup--login .c-login-popup__mfa-digit {
    aspect-ratio: auto;
    min-height: 0;
    height: 4rem;
    font-size: 1.6rem;
}
.c-popup--login .c-form__btn,
.c-contact-box .c-form__btn {
    --btn-fz: 1.5rem;
    min-height: 4.2rem;
}
:root .c-registro-popup .c-form {
    margin-top: 1.6rem;
}
:root .c-contact-box .c-form {
    margin-top: 2rem;
}
@media (min-width: 48rem) {
    .c-contact-box {
        justify-self: end;
        width: 100%;
        max-width: 48rem;
    }
}
@media (min-width: 75rem) {
    :root .c-registration--contact .c-contact-box {
        padding: 3.2rem 3.6rem;
    }
}

/* Contacto: sin la foto de deportistas de fondo (form-img.png) */
.c-registration--contact .c-registration__holder::after {
    content: none;
}
/* Contacto con el collage de pantallas de fondo (antes iba abajo, como imagen de cierre) */
.c-registration--contact {
    position: relative;
    isolation: isolate;
    padding-bottom: calc(var(--section-y) * .8 + var(--sections-br));
}
.c-contact-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.c-contact-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* velo azul para que se lea el texto: arriba se funde con la sección anterior */
.c-registration--contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--color-primary-900) 0%, hsl(var(--color-primary-900-hsl)/.78) 22%,
        hsl(var(--color-primary-900-hsl)/.55) 100%);
    pointer-events: none;
}

/* Teléfono con código de país */
.c-form__group.js-phone-input.c-phone-field {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0 1.2rem;
    align-items: start;
}
.c-phone-field__code select {
    width: 100%;
    font: inherit;
    cursor: pointer;
}