/* =========================================================
   PAWMED - CREAR CUENTA
   Medidas tomadas de la imagen de referencia:
   1rem = 10px de la captura. El tamaño de todo el diseño
   escala con la pantalla, así se ve igual que la imagen
   en cualquier monitor de escritorio.
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: clamp(8.5px, min(0.9268vw, 1.773vh), 22px);
}

body {
    font-family: "Poppins", sans-serif;
    color: #23415c;
    background: #f4fafd;
    overflow-x: hidden;
}


/* =========================================================
   PÁGINA
========================================================= */

.pagina-registro {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(circle at 78% 15%, rgba(102, 195, 240, 0.10), transparent 30%),
        radial-gradient(circle at 10% 80%, rgba(87, 205, 189, 0.09), transparent 30%),
        radial-gradient(circle at 52% 45%, #ffffff, transparent 45%),
        #f4fafd;
}


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

.logo {
    position: absolute;

    top: 1.2rem;
    left: 1.5rem;

    width: 9.2rem;

    z-index: 50;
}

.logo img {
    display: block;

    width: 100%;
    height: auto;

    mix-blend-mode: multiply;
}


/* =========================================================
   CONTENIDO CENTRAL
========================================================= */

.registro-contenido {
    position: relative;

    z-index: 10;

    width: 100%;
    min-height: 100vh;

    padding: 3.4rem 0 4rem 3vw;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.encabezado-registro {
    text-align: center;

    margin-bottom: 1.7rem;
}

.titulo-registro {
    display: block;
    width: fit-content;

    margin: 0 auto;

    font-size: 4.2rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 800;

    background: linear-gradient(100deg, #328fe9, #54c8bb);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.subtitulo-registro {
    max-width: 38.8rem;

    margin: 0.25rem auto 0;

    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;

    color: #7d9bb3;
}


/* =========================================================
   TARJETA
========================================================= */

.tarjeta-registro {
    width: 37.2rem;
    max-width: 100%;

    padding: 1.4rem 2.3rem 1.8rem;

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

    border: 1px solid #e3f0f8;
    border-radius: 1rem;

    box-shadow:
        0 1.8rem 4.2rem rgba(49, 125, 168, 0.11),
        0 0.4rem 1.2rem rgba(49, 125, 168, 0.05);
}


/* =========================================================
   CAMPOS
========================================================= */

.campo {
    margin-bottom: 0.85rem;
}

.campo label {
    display: block;

    margin-bottom: 0.45rem;

    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;

    color: #23415c;
}

.input-box {
    width: 100%;
    height: 2.9rem;

    display: flex;
    align-items: center;

    gap: 1.2rem;

    padding: 0 1.1rem 0 1rem;

    background: #ffffff;

    border: 1px solid #cbe3f3;
    border-radius: 0.7rem;

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

.input-box:hover {
    border-color: #a8d4e9;
}

.input-box:focus-within {
    border-color: #54afe7;

    box-shadow: 0 0 0 0.3rem rgba(61, 162, 230, 0.10);
}

.input-box .icono {
    flex: 0 0 auto;

    width: 1.1rem;
    height: 1.1rem;

    fill: none;
    stroke: #48a4e6;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.input-box input {
    flex: 1;

    min-width: 0;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #315b77;

    font-family: "Poppins", sans-serif;
    font-size: 0.92rem;
}

.input-box input::placeholder {
    color: #96b4cb;

    opacity: 1;
}


/* =========================================================
   MOSTRAR CONTRASEÑA
========================================================= */

.btn-ver-password {
    flex: 0 0 auto;

    border: none;

    background: transparent;

    cursor: pointer;

    color: #78a7bd;

    padding: 0.2rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-ver-password svg {
    width: 1.1rem;
    height: 1.1rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-ver-password .ojo-cerrado {
    display: none;
}

.btn-ver-password.activo .ojo-abierto {
    display: none;
}

.btn-ver-password.activo .ojo-cerrado {
    display: block;
}

.btn-ver-password:hover {
    color: #319de5;
}


/* =========================================================
   TEXTOS DE AYUDA Y MENSAJES
========================================================= */

.ayuda-password {
    display: block;

    margin-top: 0.15rem;

    font-size: 0.8rem;
    line-height: 0.85rem;

    color: #8fb0c6;
}

.mensaje-password {
    display: block;

    margin-top: 0.3rem;

    font-size: 0.8rem;
}

.mensaje-registro {
    margin-bottom: 0.9rem;

    padding: 0.8rem 1.1rem;

    border-radius: 0.8rem;

    background: #fff3f3;
    border: 1px solid #ffd6d6;

    color: #dc5c5c;

    font-size: 0.9rem;
    font-weight: 500;
}

.mensaje-password:empty,
.mensaje-registro:empty {
    display: none;
}


/* =========================================================
   BOTÓN CREAR CUENTA
========================================================= */

.btn-registro {
    width: 100%;
    height: 3.2rem;

    margin-top: 0.25rem;

    border: none;
    border-radius: 50px;

    background: linear-gradient(100deg, #369bea, #55c9bb);

    color: #ffffff;

    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;

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

    gap: 0.8rem;

    box-shadow: 0 0.9rem 1.8rem rgba(52, 160, 218, 0.25);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-registro svg {
    width: 1.3rem;
    height: 1.3rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

    box-shadow: 0 1.3rem 2.4rem rgba(52, 160, 218, 0.30);
}


/* =========================================================
   YA TIENES CUENTA
========================================================= */

.login-link {
    margin-top: 1.2rem;

    text-align: center;

    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.login-link p {
    font-size: 0.9rem;

    color: #91aabd;
}

.login-link a {
    font-size: 0.9rem;
    font-weight: 700;

    color: #42bdaf;

    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}


/* =========================================================
   MASCOTAS (izquierda)
========================================================= */

.blob-mascotas {
    position: absolute;

    left: 2rem;
    top: 23.5rem;

    width: 28.5rem;
    height: 25.5rem;

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

    background: linear-gradient(135deg, #e3f3fd, #dff6f3);

    z-index: 2;
}

.img-mascotas {
    position: absolute;

    left: 3.3rem;
    top: 24.8rem;

    width: 26.7rem;
    height: 24.6rem;

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

    /* si la imagen tiene fondo blanco, se funde con el fondo */
    mix-blend-mode: multiply;

    z-index: 3;

    pointer-events: none;
}


/* =========================================================
   DECORACIONES
   top = centro vertical / left o right = centro horizontal
========================================================= */

.huella {
    position: absolute;

    z-index: 1;

    fill: rgba(110, 185, 240, 0.28);

    pointer-events: none;
}

.huella-1 { width: 2.6rem; height: 2.6rem; top: 4.5rem;  right: 7.6rem;  transform: translate(50%, -50%) rotate(8deg); }
.huella-2 { width: 3.4rem; height: 3.4rem; top: 24.7rem; right: 7.6rem;  transform: translate(50%, -50%) rotate(8deg); }
.huella-3 { width: 3.4rem; height: 3.4rem; top: 37.5rem; right: 12.6rem; transform: translate(50%, -50%) rotate(12deg); }
.huella-4 { width: 3.6rem; height: 3.6rem; top: 15.7rem; left: 5.5rem;   transform: translate(-50%, -50%) rotate(-12deg); }


.cruz {
    position: absolute;

    z-index: 1;

    pointer-events: none;
}

.cruz::before,
.cruz::after {
    content: "";

    position: absolute;

    background: #b3dbf3;

    border-radius: 2px;
}

.cruz::before {
    left: calc(50% - 0.1rem);
    top: 0;

    width: 0.2rem;
    height: 100%;
}

.cruz::after {
    top: calc(50% - 0.1rem);
    left: 0;

    width: 100%;
    height: 0.2rem;
}

.cruz-1 { width: 2rem;   height: 2rem;   top: 12.1rem; left: 11.7rem;  transform: translate(-50%, -50%); }
.cruz-2 { width: 1.6rem; height: 1.6rem; top: 13.6rem; right: 9.4rem;  transform: translate(50%, -50%); }
.cruz-3 { width: 1.5rem; height: 1.5rem; top: 45.3rem; right: 7.6rem;  transform: translate(50%, -50%); }


.circulo {
    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;
}

.circulo-anillo {
    width: 1rem;
    height: 1rem;

    border: 0.15rem solid #b9ddf3;
}

.circulo-punto {
    background: #d5ecf9;
}

.circulo-1 { top: 11.6rem; left: 4.1rem;  transform: translate(-50%, -50%); }
.circulo-2 { width: 0.9rem; height: 0.9rem; top: 24.1rem; left: 7.5rem;  transform: translate(-50%, -50%); }
.circulo-3 { top: 24rem;   left: 22.4rem; transform: translate(-50%, -50%); }
.circulo-4 { width: 1.5rem; height: 1.5rem; top: 42rem;   left: 28.1rem; transform: translate(-50%, -50%); z-index: 4; background: #c9e6f7; }
.circulo-5 { width: 0.8rem; height: 0.8rem; top: 23.8rem; right: 27.4rem; transform: translate(50%, -50%); background: #e0f0fa; }
.circulo-6 { width: 1.6rem; height: 1.6rem; top: 42rem;   right: 1.7rem;  transform: translate(50%, -50%); border: 0.2rem solid #cde6f6; }


.punteada {
    position: absolute;

    z-index: 1;

    border: 2px dashed #cde5f5;
    border-radius: 50%;

    pointer-events: none;
}

.punteada-izquierda {
    width: 11rem;
    height: 11rem;

    left: -8.5rem;
    top: 12.7rem;
}

.punteada-arriba {
    width: 40.4rem;
    height: 25rem;

    right: -22.3rem;
    top: -12.5rem;
}

.punteada-abajo {
    width: 5.4rem;
    height: 5.4rem;

    right: -2.3rem;
    top: 41rem;
}


/* =========================================================
   ONDAS INFERIORES
========================================================= */

.ondas {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 6rem;

    z-index: 2;

    pointer-events: none;
}

.onda {
    position: absolute;

    bottom: 0;

    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.onda-1 { left: -10%; width: 120%; height: 6rem;   background: #eef7fd; }
.onda-2 { left: -8%;  width: 75%;  height: 4.4rem; background: #dcebfa; }
.onda-3 { left: 38%;  width: 80%;  height: 3.4rem; background: #cbeef5; }
.onda-4 { left: -12%; width: 48%;  height: 2rem;   background: #c5ddf6; }


/* =========================================================
   RESPONSIVE (tablet y celular)
========================================================= */

@media (max-width: 900px) {

    html {
        font-size: 13px;
    }

    .blob-mascotas,
    .img-mascotas,
    .punteada,
    .huella-3,
    .huella-4,
    .cruz-1,
    .circulo-1,
    .circulo-2,
    .circulo-3,
    .circulo-4,
    .circulo-5,
    .circulo-6 {
        display: none;
    }

    .logo {
        width: 7.5rem;
    }

    .registro-contenido {
        padding: 8.5rem 1.5rem 6rem;
    }

    .titulo-registro {
        font-size: 3.4rem;
    }

    .subtitulo-registro {
        font-size: 1.15rem;
    }

    .tarjeta-registro {
        width: 100%;
        max-width: 42rem;

        padding: 1.6rem 1.6rem 1.8rem;
    }

    .campo label {
        font-size: 1.05rem;
    }

    .input-box {
        height: 3.4rem;
    }

    .input-box input {
        font-size: 1.05rem;
    }

    .btn-registro {
        height: 3.6rem;

        font-size: 1.1rem;
    }

    .login-link p,
    .login-link a {
        font-size: 1rem;
    }
}
/* =========================================================
   BOTÓN VOLVER
========================================================= */

.btn-volver {
    position: fixed;

    top: 28px;
    left: 32px;

    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    height: 42px;
    padding: 0 17px;

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

    border: 1px solid #dcecf5;

    border-radius: 14px;

    color: #4b9fe3;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(40, 110, 150, 0.08);

    backdrop-filter: blur(8px);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}


.btn-volver i {
    font-size: 12px;

    transition:
        transform 0.25s ease;
}


.btn-volver:hover {

    background:
        linear-gradient(
            90deg,
            #63d2be,
            #4ea8f0
        );

    color: #ffffff;

    border-color: transparent;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(78, 168, 240, 0.20);
}


.btn-volver:hover i {
    transform: translateX(-3px);
}


/* =========================================================
   INDICADOR ESC
========================================================= */

.btn-volver::after {

    content: "ESC";

    margin-left: 3px;

    padding: 3px 6px;

    border-radius: 6px;

    background: #f1f8fc;

    color: #8caabd;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .5px;

    transition: 0.25s ease;
}


.btn-volver:hover::after {

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

    color: #ffffff;
}


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

@media (max-width: 800px) {

    .btn-volver {

        top: 20px;
        left: 20px;

        height: 40px;

        padding: 0 14px;

        border-radius: 12px;

        font-size: 10px;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 500px) {

    .btn-volver {

        top: 16px;
        left: 16px;

        width: 40px;
        height: 40px;

        padding: 0;

        justify-content: center;

        border-radius: 12px;
    }


    .btn-volver span,
    .btn-volver::after {

        display: none;
    }


    .btn-volver i {

        font-size: 13px;
    }

}