/*KM = Css de los mensajes usuario */

/* KM = Principal paleta de colores */
:root {
    --rosa_claro: #f7acc6;
    --rosa_oscuro: #f26a9a;
    --morado_claro: #b592bd;
    --morado_oscuro: #70338a;
    --morado_oscuro-dos: #70338a;
    --naranja_claro: #f6cdab;
    --naranja_oscuro: #ef775a;
    --amarillo_claro: #fff4b8;
    --amarillo_oscuro: #f4a300;
    --rojo_claro: #fdb7b7;
    --rojo_oscuro: #8b0000;
    --crema_claro: #fff9e6;
    --crema_oscuro: #f2e4c3;
    --durazno: #ffd6c1;
    --lavanda: #e6d6f3;
    --mantequilla: #fff4b8;
    --negro: #151414;
    --negro-dos: #151414;
    --negro_cálido: #2d2a2a;
    --gris: #868686;
    --gris_oscuro: #3c3c3c;
    --blanco: #ffffff;
    --segundo-blanco: #fff;
    --sombra: rgba(0, 0, 0, 0.381);
    --sombrita: rgba(255, 255, 255, 0.773);
    --sombre: rgba(62, 0, 55, 0.6);
}

/* KM = Colores para modo oscuro de la pagina*/
.dark-mode {
    --negro-dos: #151414;
    --rosa_claro: #b45f7d;
    --rosa_oscuro: #944062;
    --morado_claro: #4a1467;
    --morado_oscuro: #210c2b;
    --morado_oscuro: #210c2b;
    --morado_oscuro-dos: #c1a7e4;
    --naranja_claro: #f6cdab;
    --naranja_oscuro: #9a3f2c;
    --amarillo_claro: #f4a300;
    --amarillo_oscuro: #fff4b8;
    --rojo_claro: #8b0000;
    --rojo_oscuro: #fdb7b7;
    --crema_claro: #3b2f2f;
    --crema_oscuro: #2e2323;
    --durazno: #a84f3a;
    --lavanda: #9270c2;
    --mantequilla: #bfa565;
    --negro: #ffffff;
    --negro_cálido: #f7f7f7;
    --gris: #d6d6d6;
    --gris_oscuro: #aaaaaa;
    --blanco: #000;
    --segundo-blanco: #fff;
    --sombrita: rgba(0, 0, 0, 0.074)15;
    --sombra: rgba(255, 255, 255, 0.53);
    --sombre: rgba(36, 2, 34, 0.688);
}

/*KM = Carga de tipografías */
@font-face {
    font-family: 'Chewy';
    src: url('../../libreria/tipografia/Chewy/Chewy-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Comic_Neue';
    src: url('../../libreria/tipografia/Comic_Neue/ComicNeue-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Shadows_Into_Light';
    src: url('../../libreria/tipografia/Shadows_Into_Light/ShadowsIntoLight-Regular.ttf') format('truetype');
}

/* KM =  Momento de los top globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* KM =  Estilo principal de la pagina */
body {
    font-family: "Comic_Neue", sans-serif;
    background-color: var(--blanco);
    font-size: 14px;
    padding: 0 1rem;
}

/* KM = Contenedor principal */
.contact-wrapper {
    display: flex;
    max-width: 1000px;
    height: 80vh;
    margin: 3rem auto;
    box-shadow: 0 8px 24px var(--sombra);
    border-radius: 1rem;
    overflow: hidden;
    padding: 0 1rem;
}

/* KM = Panel izquierdo con fondo claro y decoracion */
.contact-left {
    flex: 1;
    position: relative;
    background: var(--crema_claro);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-left__overlay {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: var(--blanco);
    clip-path: polygon(100% 0, 0 0, 30% 100%, 100% 100%);
}

.contact-left__img {
    position: relative;
    width: 80%;
    height: auto;
    z-index: 1;
}

/* KM = Panel derecho oscuro con formulario */
.contact-right {
    flex: 1;
    background: var(--blanco);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--negro)
}

.contact-right h1 {
    font-family: 'Chewy', cursive;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--rosa_claro);
}

/* KM = Formulario */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group label {
    font-size: 1rem;
    color: var(--negro);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--morado_claro);
    border-radius: 0.5rem;
    background: var(--blanco);
    color: var(--negro);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--rosa_oscuro);
    box-shadow: 0 0 0 3px rgba(242, 106, 154, 0.3);
}

/* KM = Boton de enviar */
.btn-submit {
    align-self: center;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--blanco);
    background: linear-gradient(135deg, var(--rosa_oscuro), var(--morado_oscuro));
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 12px var(--sombra);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-3px);
}

/* KM = Medida responsiva */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
        height: auto;
        margin: 2rem 1rem;
        padding: 0 1rem;
    }

    .contact-left {
        display: none;
    }

    .contact-right {
        padding: 2rem 1rem;
    }
}

/* KM = Icono de modo oscuro */
.modo-flotante {
    position: fixed;
    bottom: 130px;
    right: 1.5rem;
    background: var(--rosa_oscuro);
    border: none;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 6px 16px var(--sombra);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-modo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    pointer-events: none;
}

.dark-mode .modo-flotante {
    background: var(--negro);
    border: 1px solid var(--lavanda_claro);
}

/* KM = Scroll para poder subir al momento de bajar XD (Esa descripcion jajaja pero no se me ocurre nada mas) */
.scroll-top-btn {
    position: fixed;
    bottom: 240px;
    right: 1.5rem;
    background: var(--morado_claro);
    border: none;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 6px 16px var(--sombra);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
}

.scroll-top-btn:hover {
    transform: scale(1.1);
}

.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.icono-flota {
    width: 40px;
    height: 40px;
    object-fit: contain;
    pointer-events: none;
    animation: floatUpDown 4s ease-in-out infinite;
}