/* Variables de diseño globales */
:root {
    --bg-orange: #f26422;
    --btn-creme: #fce3cc;
    --text-dark: #de5314;
    --text-white: #ffffff;
    --pattern-color: rgb(255 255 255 / 0.08);
    --font-main: 'Outfit', system-ui, -apple-system, sans-serif;
    --espacio-chico: 1rem;
    --espacio-medio: 1rem;
    --borde-redondeado: 1rem;
    --radio-chico: .5rem;
    --radio-medio: 1rem;
    --radio-grande: 1,5rem;
    --fuente-base:  Montserrat sans-serif;
}

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

/*CSS PANTALLA UNO VERSIÓN MOBILE*/
.header-desktop, .footer-desktop {
display: none;
}

.pantalla-uno {
font-family: 'Montserrat', sans-serif;
background-color: #f57134; 
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url("../imagenes/fondoondeado1.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

@keyframes moverFondoOndeado {
    0% {
        background-position: 50% 50%; 
    }
    25% {
        background-position: 18% 82%; 
    }
    50% {
        background-position: 18% 88%; 
    }
    75% {
        background-position: 19% 81%; 
    }
    100% {
        background-position: 50% 50%; 
    }
}

/*MAIN*/
.pagina-uno {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.contenedor-app {
position: relative; 
overflow: hidden;
width: 100%;
max-width: 420px; 
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; 
padding: 40px 20px;
gap: 24px; 
}

/*IMÁGENES FLOTANTES DECORATIVAS*/

.decoraciones {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}

.img-deco {
position: absolute;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.rayo-amarillo {
top: 18%;
left: 12%;
width: 120px;
animation-name: floating;
animation-duration: 3s;
}

.sol-amarillo {
top: 15%;
right: -10%;
width: 190px;
animation-name: rotate-soft;
animation-duration: 1.5s;
animation-delay: 0.5s;
}

.boca-lengua {
top: 38%;
left: 8%;
width: 115px;
animation-name: floating;
animation-duration: 4.5s;
animation-delay: 0.2s;
}

.mano {
top: 42%;
right: -8%;
width: 150px;
animation-name: rotate-soft;
animation-duration: 2s;
}

.onda {
bottom: 4%;
left: 8%;
width: 220px;
animation-name: floating;
animation-duration: 5s;
}

.cara-ojos {
bottom: 12%;
right: -2%;
width: 180px;
animation-name: floating;
animation-duration: 3.2s;
animation-delay: 0.7s;
}

.imagen-logo-quiensoy img {
width: 320px;
max-width: 100%;
height: auto; 
margin-top: 60px;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px); 
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes rotate-soft {
    0% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(10deg); 
    }
    100% {
        transform: rotate(5deg);
    }
}

/*SUBTITULO Y DESCRIPCIÓN*/
.text-group {
text-align: center; 
padding: 0 15px;
z-index: 2;
margin-top: -20px;
}

.subtitle {
color: #ffe8cb; 
font-weight: 600;
font-size: 24px;
margin-bottom: 12px;
display: block;
}

.text-group .description {
color: #ffe8cb;
font-size: 16px;
font-weight: 400;
}   

/*BOTONES*/
.btn-start {
width: 100%;
display: flex;
justify-content: center;
z-index: 2;
margin-top: -10px;
}

.boton-start {
display: inline-block; 
background-color: #FADBB3;
border-radius: 50px;
width: 200px; 
padding: 14px 0;
cursor: pointer;
text-transform: uppercase;
font-weight: 700;  
font-size: 16px;
color: #f57134;
text-decoration: none;
text-align: center;
transition: transform 0.2s ease;
}

.boton-registrar {
display: inline-block; 
background-color: #292E33;
border-radius: 50px;
width: 200px; 
padding: 14px 0;
cursor: pointer;
text-transform: uppercase;
font-weight: 650;  
font-size: 16px;
color: #f57134;
text-decoration: none;
text-align: center;
transition: transform 0.2s ease;
}

.boton-start:active, .boton-registrar:active {
transform: scale(0.96);
}

/*CSS PANTALLA UNO VERSIÓN DESKTOP*/
@media screen and (min-width: 768px) {

.pantalla-uno {
flex-direction: column;
justify-content: space-between; 
min-height: 100vh;
position: relative;
}

.pagina-uno {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.contenedor-app {
max-width: 100%;  
height: auto;     
min-height: auto; 
border-radius: 0;  
box-shadow: none; 
padding: 40px 40px; 
}

/*HEADER*/
.header-desktop {
display: flex; 
justify-content: space-between; 
align-items: center;
width: 100%;
background-color: #292E33;
padding: 16px 40px;
z-index: 10;
}

.header-logo img {
height: 38px; 
width: auto;
object-fit: contain;
}

.header-nav {
.header-nav {
display: flex;
gap: 32px; 
align-items: center; 
}
}

.nav-link {
display: inline-block; 
padding: 8px 18px;
color: #FFEDD5;
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: color 0.2s ease;
}

.nav-link:hover {
color: #FADBB3; 
}

.nav-link.activo {
background-color: #7B7EBC; 
color: #ffffff;
padding: 8px 18px;
border-radius: 8px;
font-weight: 600;
}

.header-perfil img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #7B7EBC;
object-fit: cover;
}

/*FOOTER*/
.footer-desktop {
display: flex; 
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 24px 20px;
gap: 12px;
z-index: 10;
}

.footer-redes {
display: flex;
gap: 24px;
}

.red-link img {
width: 22px;
height: 22px;
transition: transform 0.2s ease;
}

.red-link img:hover {
transform: scale(1.15);
}

.footer-copyright {
color: #FADBB3;
font-size: 13px;
font-weight: 500;
margin: 0;
}

.footer-creditos {
color: #FADBB3; 
font-size: 11px;
text-align: center;
margin: 0;
line-height: 1.4;
}

/*IMAGENES DE FONDO*/
.decoraciones {
border-radius: 0;
overflow: visible; 
}

.rayo-amarillo {
left: 38%; 
top: -2%;
width: 170px; 
}

.sol-amarillo {
right: 38%;
top: -5%;
width: 200px;
}

.boca-lengua {
left: 40%;
top: 28%;
width: 130px;
}

.mano {
right: 33%;
top: 42%;
width: 180px;
}

.onda {
left: 34%;
bottom: -10%;
width: 260px;
}

.cara-ojos {
right: 35%;
bottom: -10%;
width: 235px;
}

/*TEXTOS Y BOTONES*/
.subtitle {
font-size: 32px; 
}

.text-group .description {
font-size: 19px;
}

.boton-start, .boton-registrar {
width: 240px; 
padding: 16px 0;
font-size: 17px;
margin-top: 5px;
}

.menu-desplegable {
position: fixed;
top: 0;
right: 0;
left: auto; 
width: 250px;             
height: 100vh;  
max-height: 100vh; 
overflow-y: auto;      
padding: 0; 
box-sizing: border-box;
background-color: #EF4F4F; 
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);          
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
z-index: 100;
}

.menu-desplegable.activo {
transform: translateX(0);
}

.contenedor-botones-menu {
display: flex;
flex-direction: column;
height: calc(100vh - 60px); 
padding: 20px 24px; 
box-sizing: border-box; 
width: 100%;
}

.menu-header {
display: flex;
justify-content: flex-end;
padding: 10px 20px 0 0;
}

.menu-desplegable .btn-usuario-tag {
display: flex;
width: 94%;
box-sizing: border-box;
background-color: transparent !important;
border: 2px solid #FADBB3 !important;
color: #FADBB3 !important; 
justify-content: center;
padding: 8px 10px !important; 
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 650;       
border-radius: 0px !important; 
margin: 0 auto 30px auto; 
box-shadow: none !important;
}

.menu-desplegable .btn-menu-blanco {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 0px;
width: 94%;
margin: 0 auto;
box-sizing: border-box; 
background-color: #FADBB3; 
color: #ED6C3A;             
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15.5px;
font-weight: 650;  
border-radius: 50px; 
border: none; 
outline: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-desplegable .btn-dropdown {
margin-top: 20px;
}

.menu-desplegable .btn-cerrar-sesion {
margin-top: 150px; 
display: inline-flex;
align-items: center;
justify-content: center;
width: 94%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
background-color: #292E33; 
padding: 14px 20px; 
color: #fae2c3;             
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;  
border-radius: 50px;       
border: none; 
outline: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); 
transition: transform 0.2s ease, background-color 0.2s ease; 
}

.menu-desplegable .submenu-ajustes {
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
width: 94%;
margin: 0 auto;
box-sizing: border-box;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-desplegable .submenu-ajustes.abierto {
max-height: 220px;
padding: 16px 0 0 0;
}

.menu-desplegable .btn-subopcion {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background-color: #7B7EBC;
color: #fdf0dd;
font-family: 'Montserrat', sans-serif;
font-weight: 450;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
width: 100%;
border: none;
}

.menu-desplegable .btn-subopcion.desactivado {
background-color: #292E33; 
color: #f57134;          
}

.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
display: none;
z-index: 99;
}

.menu-overlay.activo {
display: block;
}

.menu-logo-inferior {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 370px;  
width: 100%;
text-align: center;
gap: 6px;      
}

.img-logo-menu {
width: 65px;       
height: auto;
object-fit: contain;
display: block;
}

.menu-logo-frase {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 500;
color: #FADBB3;    
margin: 4px 0 0 0;
}
}




/*CSS PANTALLA DOS*/
/*Body*/
.pantalla-dos {
font-family: 'Montserrat', sans-serif;
background-color: #FFEDD5;
line-height: 1;
margin: 0;
padding: 0;
width: 100vw;          
max-width: 100%;
height: 100vh;
max-height: 100vh;
position: relative;
box-sizing: border-box;
overflow-x: hidden; 
overflow-y: auto;   
display: flex;
flex-direction: column;
align-items: stretch; 
background-image: url("../imagenes/fondoondeado2.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

main {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
flex-grow: 1;
box-sizing: border-box;
}

/*MENU HAMBURGUESA*/
.pantalla-dos .menu-hamburguesa {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 18px;
cursor: pointer;
 margin: 0 16px 0 0; 
}

.pantalla-dos .menu-hamburguesa span {
display: block;
width: 100%;
height: 3px;
background-color: #000000; 
border-radius: 2px;
}

.btn-cerrar {
background: none;
border: none;
font-size: 40px;
color: #fae2c3;
cursor: pointer;
margin-top: 20px;
width: 26%;
}

.pantalla-dos .menu-desplegable {
position: fixed;
top: 0;
right: 0 ;
left: auto; 
width: 250px;             
height: 100vh;  
max-height: 100vh; 
overflow-y: auto;      
padding: 0; 
box-sizing: border-box;
background-color: #EF4F4F; 
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);          
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

.pantalla-dos .contenedor-botones-menu {
display: flex;
flex-direction: column;
height: calc(100vh - 60px); 
padding: 20px 24px; 
box-sizing: border-box; 
width: 100%;
}

.btn-subopcion {
width: 170px;    
padding: 10px 0;
font-size: 13px;
display: block;
margin: 0px auto;       
border-radius: 50px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-subopcion.desactivado {
background-color: #292E33 !important; 
color: #f57134 !important;          
}

.pantalla-dos .btn-menu-blanco {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 0px;
width: 100%;
box-sizing: border-box; 
background-color: #FADBB3;  
color: #ED6C3A;             
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15.5px;
font-weight: 650;  
border-radius: 50px; 
border: none; 
outline: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease, background-color 0.2s ease;
}

.pantalla-dos .grupo-principal {
display: flex;
flex-direction: column;
width: 94%;
margin: 0; 
padding: 0;
box-sizing: border-box;
}

.pantalla-dos .btn-cerrar-sesion {
margin-top: 50px; 
margin-bottom: 10px;  
display: inline-flex;
align-items: center;
justify-content: center;
width: 94%;
box-sizing: border-box;
background-color: #292E33; 
padding: 14px 20px; 
color: #fae2c3;             
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;  
border-radius: 50px;       
border: none; 
outline: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); 
transition: transform 0.2s ease, background-color 0.2s ease; 
}

.pantalla-dos .btn-usuario-tag {
display: flex;
width: 94%;
box-sizing: border-box;
background-color: transparent;
border: 2px solid #FADBB3;
color: #FADBB3; 
justify-content: center;
padding: 8px 100px; 
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 500;       
transition: transform 0.2s ease, background-color 0.2s ease;  
border-radius: 0px; 
margin: 0; 
}

.pantalla-dos .btn-dropdown{
margin-top: 50px;
}

.pantalla-dos .submenu-ajustes {
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
width: 100%;
box-sizing: border-box;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pantalla-dos .submenu-ajustes.abierto {
max-height: 220px;
padding: 16px 0 0 0;
}

.pantalla-dos .btn-subopcion {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background-color: #7B7EBC;
color: #fdf0dd;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 450;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
width: 100%;
border: none;
outline: none;
}

/*HEADER*/
.perfil-header {
display: flex;
flex-direction: row;
justify-content: space-between; 
padding: 35px 24px 10px 24px; 
width: 100%;
box-sizing: border-box;
margin-top: 20px;
}

.logo2-superior img {
height: 30px;                  
width: auto;                   
display: block;
margin: 0;      
}

.logo2-superior {
margin: 0 0 0 16px; 
padding: 0;
display: block;
margin-top: -12px;
}

/*TÍTULO Y CÍRCULO DE COLORES*/
h1 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 750;
font-size: 30px;
letter-spacing: 0.5px;
color: #7B7EBC; 
text-transform: uppercase;
margin-top: 30px;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}

.imagen-colores {
width: 180px;
max-width: 500px; 
height: auto;
display: flex;
flex-direction: column; 
margin: 0 auto;  
margin-top: 30px;
margin-bottom: 0;
}  

/*AVATARES*/
.avatar {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0px;
width: 100%;
max-width: 100%;
}

.carrusel-avatar {
position: relative; 
display: block; 
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden; 
}

.escoge-avatar {
display: flex;
overflow-x: auto; 
overflow-y: hidden;  
gap: 30px;
padding: 40px 0 20px 0; 
width: 100%;
max-width: 100%;
box-sizing: border-box;
scroll-snap-type: x mandatory; 
-webkit-overflow-scrolling: touch; 
margin-top: 40px;
}

.escoge-avatar::before,
.escoge-avatar::after {
content: '';
flex-shrink: 0;
width: calc(50vw - 100px); 
}

.escoge-avatar::-webkit-scrollbar {
display: none;
}

.escoge-avatar img {
height: 230px;  
width: 200px; 
min-width: 200px; 
max-width: 200px;
object-fit: contain; 
scroll-snap-align: center;
border-radius: 20px;
flex-shrink: 0; 
animation: crecer-al-hacer-scroll linear both;
animation-timeline: view(inline); 
animation-range: cover 0% cover 100%; 
}

@keyframes crecer-al-hacer-scroll {
  0% {
    transform: scale(0.85);
    opacity: 0.2; 
  }
  50% {
    transform: scale(1.15); 
    opacity: 1;    
  }
  100% {
    transform: scale(0.85);
    opacity: 0.2; 
  }
}

/*FLECHAS FLOTANTES*/
.flecha {
position: absolute;
top: 60%;
transform: translateY(-50%); 
background: none;
border: none;
font-size: 2.5rem;
font-weight: 700;
color: #ff6b35;    
cursor: pointer;
z-index: 100;       
padding: 15px;
user-select: none;
}

.flecha-izq {
left: 75px; 
}

.flecha-der {
right: 75px; 
}

/*APODO Y ENTRADA DE TEXTO*/
h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 680;
font-size: 35px;
color: #ED6C3A; 
line-height: 1.2;
margin-top: 20px;
}

.caja-nombre {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;   
margin-top: 14px;
width: 100%; 
box-sizing: border-box;
}

#formularioNombre {
width: 100%;
display: flex;
justify-content: center;
}

.input-nombre { 
background: #292E33;
border-radius: 50px;
width: 85%;        
max-width: 340px;      
padding: 0.6rem 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-weight: 500;  
font-size: 16px;
color: #FFEDD5;
text-align: center;
border: none;
outline: none ;
}

/* BOTÓN INFERIOR Y FRASE*/
.botones-comenzar-ropa {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto; 
gap: 16px;
width: 100%;
padding: 30px 20px 40px 20px;
box-sizing: border-box;
}

.boton-ropa, .boton-continuar {
outline: none;
border: none;
background: #ED6C3A;
border-radius: 50px;
padding: 1rem 0; 
width: 100%;
max-width: 280px;
text-align: center;
cursor: pointer;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 650;  
font-size: 17.5px;
color: #FFEDD5;
text-decoration: none;
transition: background-color 0.2s;
}

.boton-ropa:hover, .boton-continuar:hover {
background: #d65b2d;
}

.textoh3-avatar{
text-align: center;         
font-family: 'Montserrat', sans-serif;
color: #292E33;            
font-size: 15px;            
font-weight: 400;                 
padding: 0 20px;            
margin: 0px auto 0 auto;  
margin-bottom: 5px;
}

.textoh3-avatar strong {
display: block;             
font-size: 15px;           
font-weight: 800;           
color: #d65b2d;             
text-transform: uppercase;
margin-bottom: 8px;
}





/*CSS PANTALLA ROPA*/
.pantalla-ropa {
background-color: #FFEDD5; 
background-image: url("../imagenes/fondoondeado2.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.logo3-superior img {
height: 30px;                  
width: auto;                   
display: block;
margin: 0;      
}

.logo3-superior {
margin: 0 0 0 16px; 
padding: 0;
display: block;
margin-top: 3px;
}

.perfil-headerropa{
display: flex;
flex-direction: row-reverse; 
justify-content: space-between; 
align-items: center;
padding: 35px 24px 10px 24px; 
width: 100%;
box-sizing: border-box;
}

.btn-atras:hover {
transform: scale(1.05);
}

.main-ropa {
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
box-sizing: border-box;
}

.visor-avatar {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
width: 100%;
height: 280px;
background: transparent; 
}

.contenedor-capas-avatar {
position: relative;
width: 240px;
height: 240px;
overflow: hidden; 
transform-origin: bottom center; 
animation: gelatinaPop 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) 1;
}

@keyframes gelatinaPop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scaleX(1) scaleY(1) translateY(-10px);
    opacity: 1;
  }
  65% {
    transform: scaleX(1.05) scaleY(0.95) translateY(2px);
  }
  75% {
    transform: scaleX(0.98) scaleY(1.02) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.capa-avatar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}

.capa-base {
z-index: 1; 
}

.capa-prenda {
z-index: 2; 
top: 15px; 
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
overflow: hidden;
margin-top: 55px;
}

.categorias-ropa {
width: 100%;
padding: 15px 20px;
box-sizing: border-box;
display: flex;         
justify-content: center;
}

.scroll-categorias {
display: flex;
justify-content: center; 
align-items: center;
gap: 16px;              
width: auto;            
padding-bottom: 5px;
}

.scroll-categorias::-webkit-scrollbar {
display: none; 
}

.btn-categoria {
background: transparent;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
color: #292E33;
padding: 8px 18px;
cursor: pointer;
text-transform: capitalize;
border-radius: 20px;
white-space: nowrap;
text-transform: uppercase;
}

.btn-categoria.activo {
background-color: #ED6C3A; 
color: #FFEDD5;
}

.galeria-prendas {
flex-grow: 0;
background-color: #FFFFFF;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
padding: 45px 36px;
box-sizing: border-box;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03);
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.grilla-prendas {
display: none; 
grid-template-columns: repeat(3, 1fr); 
gap: 16px;
width: 100%;
max-height: 260px; 
overflow-y: auto;
margin-bottom: 20px;
}

.grilla-prendas.activo {
display: grid; 
}

.tarjeta-prenda {
background-color: #F7F7F7;
border-radius: 20px;
aspect-ratio: 1 / 1; 
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
box-sizing: border-box;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.2s, border-color 0.2s;
}

.tarjeta-prenda img {
width: 95%;
height: 95%;
object-fit: contain;
}

.tarjeta-prenda.seleccionada {
border-color: #7B7EBC; 
background-color: #7B7EBC;
 box-shadow: 0 4px 12px rgba(123, 126, 188, 0.15);
}

.pantalla-ropa .seccion-confirmar {
background-color: #FFFFFF;
margin-top: -10px;
padding-top: 5px;
padding-bottom: 50px ;
}






/*CSS PANTALLA BIENVENIDA*/
.pantalla-resumen {
background-color: #FFEDD5; 
background-image: url("../imagenes/fondoondeado2.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.main-resumen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex-grow: 1;
width: 100%;
min-height: 80vh;
padding: 20px;
box-sizing: border-box;
margin-top: 20px;
}

.contenedor-titulo{
margin-top: 20px;
margin-bottom: -50px;
}

.tag-usuario {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 700;
color: #ED6C3A;
text-transform: uppercase;
text-align: center;
margin-top: 10px;
}

.contenedor-botones-menu .btn-usuario-tag2{
display: flex;
width: 94%;
box-sizing: border-box;
background-color: transparent;
border: 2px solid #FADBB3;
color: #FADBB3; 
justify-content: center;
padding: 8px 100px; 
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 500;       
transition: transform 0.2s ease, background-color 0.2s ease;  
border-radius: 0px; 
margin: 0; 
}

.contenedor-botones-menu .btn-cerrar-sesion2 {
background-color: #292E33; 
color: #FADBB3;          
font-weight: 400;
margin-top: 50px;
font-size: 17px;
}

.contenedor-botones-menu .btn-cerrar-sesion2:active {
transform: scale(0.96);
}

.contenedor-capas-avatar2{
width: 100%;
height: 250px;  
margin-top: 40px
}

.visor-avatar-final2 {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 190px;
margin-bottom: 30px;
}

.contenedor-capas-avatar2 {
position: relative;
width: 300px;  
height: 280px; 
overflow: hidden; 
animation: gelatinaPop 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) 1;
}

.capa-prenda-final2 {
position: absolute;
top: 90px;
left: 5px;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
}

.info-estilo {
text-align: center;
width: 100%;
margin-top: 0px;
margin-bottom: 28px;
}

.contenedor-titulo h1{
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 750;
font-size: 33px;
letter-spacing: 0.5px;
color: #7B7EBC; 
text-transform: uppercase;
margin-top: 30px;
width: 100%;
box-sizing: border-box;
padding: 0 20px; 
}

.seccion-confirmar {
display: flex;
flex-direction: column;   
align-items: center;    
justify-content: center; 
background-color: transparent; 
background: transparent;       
box-shadow: none;              
padding: 20px 24px;
margin-top: -95px;                
}

.pantalla-resumen main,
.pantalla-resumen .main-resumen {
background-color: transparent;
}

.boton-continuar {
display: inline-block; 
background-color: #ED6C3A; 
border-radius: 50px;      
width: 200px;              
padding: 14px 0;          
cursor: pointer;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;  
font-size: 16px;  
color: #FFEDD5;            
text-decoration: none;    
text-align: center;       
transition: transform 0.2s ease;

}

.boton-continuar:active {
transform: scale(0.96);
}

.logo-cierre-resumen {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 25px;    
margin-bottom: 5px;  
}

.logo-cierre-resumen img {
width: 50px; 
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}




/*CSS PANTALLA CUATRO*/
/*Body*/
.pantallaentorno-cuatro {
font-family: 'Montserrat', sans-serif;
background-color: #7B7EBC;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
width: 100%;
background-image: url("../imagenes/fondoondeado4.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

/*Main*/
main {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}

/*Título*/
.contenedor-titulo{
margin-top: -10px;
}

.title, .tittle {
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700; 
font-size: 32px;  
color: #FFEDD5 !important; 
text-transform: uppercase;
position: relative;
z-index: 5; 
margin-bottom: 20px; 
}

/*Cuadro para escribir*/
.caja-nombre4 {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
background-color: #292E33; 
border-radius: 50px; 
padding: 0 16px;
height: 38px;
width: 70%; 
max-width: 260px;
margin: 30px auto 0 auto;  
margin-top: -10px;
}

.input-nombre4 {
background: transparent; 
border: none;
outline: none; 
box-shadow: none;
font-family: 'Montserrat', sans-serif;
font-weight: 500;  
font-size: 16px;
color: #FFEDD5;
flex-grow: 1; 
width: 100%;
padding: 0 10px; 
margin: 0;
box-sizing: border-box;
}

#caja-buscador {
background-color: #292E33; 
border-radius: 50px;
width: 105%;        
max-width: 340px;      
padding: 10px 12px; 
box-sizing: border-box; 
display: flex; 
align-items: center; 
justify-content: space-between; 
}

.icono-buscador-lupa,
.icono-buscador-cruz {
height: 16px;
width: auto;
display: block;
flex-shrink: 0; 
cursor: pointer;          
}

.cuadro-sugerencias {
position: absolute;
top: 100%; 
left: 50%;
transform: translateX(-50%); 
width: 85%;
max-width: 340px;
background-color: #FFEDD5; 
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
margin-top: 8px;
max-height: 200px;
overflow-y: auto; 
z-index: 999; 
display: none; 
box-sizing: border-box;
}

.item-sugerencia {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid rgba(41, 46, 51, 0.08);
}

.item-sugerencia:hover {
background-color: #FADBB3; 
}

.img-sugerencia {
width: 32px;
height: 32px;
object-fit: contain;
}

.texto-sugerencia {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
color: #292E33;
}

/*Avatares Amigos*/
.contenedor-amigos {
display: flex;       
justify-content: flex-start; 
align-items: center;            
gap: 8px;                    
width: 100%;         
max-width: 100%;     
padding: 20px; 
margin: 0;
margin-bottom: -20px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; 
-webkit-overflow-scrolling: touch; 
margin-top: 50px;
}

.contenedor-amigos::-webkit-scrollbar {
display: none;
}

.tarjeta-link img{
height: 120px; 
width: auto;
object-fit: cover;
margin: 0 0 10px 0;
border-radius: 10%;
}

.tarjeta-link {       
display: inline-flex; 
flex-direction: column;
align-items: center;
justify-content: center;                            
background-color: #fae2c3;
border-radius: 35px;                   
padding: 20px 5px;                               
text-decoration: none;
color: #ED6C3A;
font-size: 18px;                       
font-weight: 600;                      
margin: 0; 
flex-shrink: 0; 
width: 110px; 
}   

.tarjeta-link::-webkit-scrollbar {
display: none;
}

.tarjeta-link:hover {
transform: translateX(6px);
transform: translateY(-8px);
}

hr {
border: none;
border-top: 1px solid #fae2c3; 
width: 80%; 
margin: 0 auto; 
margin-top: 20px;
}

/*Subtítulo h3*/
.solicitud-amigos {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 650;
font-size: 18px;
color: #fae2c3; 
margin-top: 15px;
text-transform: uppercase;
padding: 0px 0px 0px 40px;
text-align: left;
}

/*Solicitudes de amistad*/
.contenedor-solicitudes {
display: flex;
flex-direction: column;
gap: 25px; 
padding: 0 25px;
margin: 0 0 100px 0; 
margin-bottom: 90px;
margin-top: 15px;
}

.avatar-solicitud {
display: block;
animation: cabeceoSuave 3s ease-in-out infinite;
transform-origin: bottom center; 
}

@keyframes cabeceoSuave {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(-5deg) scale(1.02); 
  }
  40% {
    transform: rotate(5deg) scale(0.98);  /
  }
  60% {
    transform: rotate(0deg) scale(1);     
  }
  
}

.tarjeta-solicitud {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%; 
}

.info-usuario {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
margin: 0;
gap: 40px;
margin-bottom: -15px; 
padding: 0;
margin-left: -20px;
}

.info-usuario img {
width: 95px;
height: 95px;
min-width: 95px;
min-height: 95px;
max-width: 95px;
max-height: 95px;
object-fit: cover; 
object-position: center; 
border-radius: 50%; 
margin: 0;   
padding: 0;  
transform: none;
overflow: visible; 
position: relative;
z-index: 1;
margin-right: 20px;
}

.avatar-solicitud {
height: 85px; 
width: 85px;
min-width: 85px;
border-radius: 0;
transform: none;
}

.parrafo-usuario {
display: flex;
flex-direction: column;
align-items: flex-start; 
justify-content: center;
padding: 0;
margin: 0;
margin-right: -10px;
}

.parrafo-usuario p {
margin: 0;
padding: 0;
text-align: left; 
line-height: 1.4;
color: #fae2c3;
}

.tag-usuario {
font-weight: 700;
font-size: 16px;
}

.nombre-usuario, .expiracion-usuario {
font-weight: 400;
font-size: 14px;
}

.botones-solicitud {
display: flex;
gap: 15px;
width: 100%;
position: relative;
z-index: 10;
}

.boton-aceptar, .boton-rechazar {
outline: none;
background: #fae2c3;
border-radius: 50px;
padding: 0.7rem 0; 
flex: 1;
text-align: center;
cursor: pointer;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;  
font-size: 14px; 
color: #ED6C3A;
text-decoration: none;
}

.click-aceptar {
animation: popExito 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.click-rechazar {
animation: fadeDescarte 0.3s ease-out forwards;
}

@keyframes popExito {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9); 
    background-color: #FADBB3; 
  }
  70% {
    transform: scale(1.08); 
    background-color: #4E9F3D; 
    color: #FFFFFF;
  }
  100% {
    transform: scale(1);
    background-color: #292E33; 
    color: #FFEDD5;
  }
}

@keyframes fadeDescarte {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(4px);
    opacity: 0;
  }
}

.remover-tarjeta {
transition: all 0.4s ease-out;
transform: translateX(-100%); 
opacity: 0;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}

.mensaje-vacio-solicitudes {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 15px;
color: #fae2c3; 
text-align: center;
padding: 30px 20px;
width: 100%;
box-sizing: border-box;
text-transform: none; 
opacity: 0;
animation: fadeInMensaje 0.4s ease-out forwards; 
}

@keyframes fadeInMensaje {
  to {
    opacity: 0.7; 
  }
}

.bottom-nav {
width: 100%;
height: 75px;
background-color: #292E33;
display: flex;
justify-content: space-around;
align-items: center;
}

.barra-controladores {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
}

.nav-item {
display: flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
text-decoration: none;
}

.nav-icon-svg {
width: 34px;
height: 34px;
opacity: 0.6;
transition: transform 0.2s, opacity 0.2s;
}

.nav-item.active .nav-icon-svg, 
.nav-item:hover .nav-icon-svg {
opacity: 1;
transform: translateY(-2px);
}




/*CSS PANTALLA CHATS*/
/*Body*/
.pantalla-chat {
font-family: 'Montserrat', sans-serif;
background-color: #fae2c3;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh; 
overflow: hidden;
background-image: url("../imagenes/fondoondeado2.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;

}

/*Header*/
.chat-header {
background-color: #292E33; 
display: flex;
align-items: center;
padding: 15px 20px;
gap: 15px;
box-sizing: border-box;
}

.boton-volver svg {
width: 24px;
height: 24px;
color: #ED6C3A; 
display: block;
}

.header-usuario {
display: flex;
align-items: center;
gap: 12px;
}

.avatar-header {
height: 40px;
border-radius: 45%;
object-fit: cover;
}

.header-info-texto h2 {
color: #fae2c3; 
margin: 0;
font-size: 18px;
font-weight: 700;
margin-left: -103px
}

.header-info-texto p {
color: #fae2c3;
opacity: 0.6;
margin: 0;
font-size: 12px;
}

/*Area de mensajes*/
.chat-mensajes {
flex: 1; 
overflow-y: auto; 
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
position: relative;
}

/* Divisor de fecha "Hoy" */
.divisor-fecha {
text-align: center;
margin: 10px 0;
position: -webkit-sticky; 
position: sticky;         
top: 0;                   
z-index: 100; 
}

.divisor-fecha span {
background-color: #292E33;
color: #fae2c3;
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
border-radius: 6px;
text-transform: uppercase;
}

/* Estructura base de las burbujas */
.mensaje {
display: flex;
width: 100%;
}

.burbuja {
max-width: 75%;
padding: 12px 14px;
border-radius: 18px;
position: relative;
box-sizing: border-box;
}

.burbuja p {
margin: 0;
font-size: 14px;
line-height: 1.4;
}

.burbuja .hora {
font-size: 9px;
display: block;
text-align: right;
margin-top: 4px;
opacity: 0.6;
}

/*Recibido-Enviado*/
.mensaje.recibido {
justify-content: flex-start;
}

.mensaje.recibido .burbuja {
background-color: #e07449; 
color: #fae2c3;
border-bottom-left-radius: 4px; 
}

.mensaje.enviado {
justify-content: flex-end;
}

.mensaje.enviado .burbuja {
background-color: #7B7EBC; 
color: #fae2c3;
border-bottom-right-radius: 4px;
}

/*Barra de mensajes*/
.chat-footer {
display: flex;
align-items: center;
padding: 15px 20px;
gap: 12px;
box-sizing: border-box;
background: transparent;
}

.caja-entrada-mensaje {
flex: 1;
background-color: #292E33;
border-radius: 30px;
height: 48px;
display: flex;
align-items: center;
padding: 0 20px;
}

.input-mensaje {
width: 100%;
background: transparent;
border: none;
outline: none;
color: #fae2c3;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
}

.input-mensaje::placeholder {
color: #fae2c3;
opacity: 0.5;
}

.boton-enviar {
width: 48px;
height: 48px;
background-color: #292E33;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}





/*CSS PANTALLA NUEVE*/
/*Body*/
.pantalla-nueve {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
}

/*Main*/
.pantalla-cifras {
font-family: 'Montserrat', sans-serif;
background-color: #7B7EBC;
width: 100%;
max-width: 100%;
min-height: 100vh;
padding: 20px 24px 0px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

/*Encabezado y Avatar*/
.perfil-header {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}

.logo9-superior{
height: 30px;                  
width: 50px;                   
display: block;
margin: 0px 0 0 16px;      
margin-top: 20px;
margin-bottom: -80px;
}

/*Icono menú hamburguesa*/
.menu-hamburguesa {
position: absolute;
top: 25px;
right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 20px;
cursor: pointer;
z-index: 100; 
}

.menu-hamburguesa span {
display: block;
width: 100%;
height: 4px;
background-color: #1a1a1a; 
border-radius: 2px;
transition: all 0.3s ease;
}

/*Panel que se desplaza*/
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); 
z-index: 999;                        
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}

.menu-overlay.activo {
opacity: 1;
pointer-events: auto;
}

.menu-desplegable {
position: fixed;
top: 0;
right: 0;
width: 250px;             
height: 100vh;            
background-color: #EF4F4F; 
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
z-index: 1000;           
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

.menu-desplegable.activo {
transform: translateX(0);
}

.menu-header {
display: flex;
justify-content: flex-end;
padding: 20px;
}

.btn-cerrar {
background: none;
border: none;
font-size: 40px;
color: #fae2c3;
cursor: pointer;
margin-top: 20px;
}

/*Botones dentro del menú hamburguesa*/
.contenedor-botones-menu {
display: flex;
flex-direction: column;
height: calc(100vh - 80px);
padding: 20px 24px;
}

.grupo-principal {
display: flex;
margin-top: 40px;
flex-direction: column;
gap: 16px; 
}

.btn-menu-usuario{
display:flex; 
background-color: transparent;
border: 2px solid #FADBB3;
color: #FADBB3; 
align-items: center;
justify-content: center;
padding: 8px 0px; 
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 500;       
transition: transform 0.2s ease, background-color 0.2s ease;  
}

.btn-cerrar-sesion {
display:flex;
margin-top: 180px;
margin-bottom: 20px;  
background-color: #292E33; 
align-items: center;
justify-content: center;
padding: 14px 20px; 
color: #fae2c3;            
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;  
border-radius: 50px;       
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); 
transition: transform 0.2s ease, background-color 0.2s ease; 
}

.btn-menu-blanco {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
background-color: #FADBB3;  
color: #ED6C3A;           
text-transform: uppercase;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 650;  
border-radius: 50px;       
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); 
transition: transform 0.2s ease, background-color 0.2s ease;
}

.item-ajustes-contenedor {
display: flex;
flex-direction: column;
width: 100%;
}

.btn-dropdown {
width: 100%;
border: none;
cursor: pointer;
}

.submenu-ajustes {
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 15px; 
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
}

.submenu-ajustes.abierto {
max-height: 200px; 
padding: 12px 15px 5px 15px; 
}

.btn-subopcion {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background-color: #7B7EBC;
color: #fdf0dd;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 450;
text-transform: uppercase;
border-radius: 50px;
cursor: pointer;
width: 100%;
border: none;
outline: none; 
}

.btn-menu-blanco:hover {
transform: translateY(-2px); 
}

.btn-menu-blanco:active {
transform: translateY(0);   
}

.menu-enlaces {
list-style: none;
padding: 40px 30px;
margin: 0;
}

.menu-enlaces li {
margin-bottom: 25px;
}

.menu-enlaces a {
text-decoration: none;
color: #1a1a1a;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
display: block;
transition: color 0.2s;
}

.menu-enlaces a:hover {
color: #7B7EBC; 
}


/*AVATAR; TITULO Y VENTANA DE ESTADO*/
.usuario-bloque {
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
width: 100%;
max-width: 340px;
gap: 15px;
margin: 20px auto 10px auto;
margin-bottom: 35px;
margin-top: 20px;
}

.textos-perfil {
display: flex;
flex-direction: column;
align-items: flex-start; 
text-align: left;     
margin: 0;
padding: 0;
}

.titulo-cifras {
font-family: 'Montserrat', sans-serif;
font-weight: 800;          
font-size: 38px;          
color: #FFEDD5;          
text-transform: uppercase; 
line-height: 1.1;          
margin: 0;                
padding: 0; 
text-align: left;              
}

.tag-perfil {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 20px;
color: #FFEDD5;        
opacity: 0.8;            
text-transform: lowercase; 
margin: 8px 0 0 0;
padding: 0; 
margin-top: 0px;   
}    

/*Contenedor del personaje y su globo de diálogo*/
.avatar-perfil-contenedor {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 190px; 
margin: 0 auto;
}

.grupo-globo-interactivo {
position: absolute;
top: 110px;       
left: 200px;      
z-index: 5;         
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

.globo-dialogo {
background-color: #fae2c3;
color: #292E33;
font-weight: 500;
font-size: 12px;
padding: 6px 12px;
border-radius: 12px;
border-bottom-right-radius: 0;
white-space: nowrap;
position: relative; 
}

.globo-dialogo {
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

@keyframes aparecerGlobo {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.btn-editar-globo {
position: absolute;
top: -8px;          
right: -8px;        
border: none;
border-radius: 50%;
width: 24px;        
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
z-index: 6;         
transition: transform 0.2s ease;
}

.btn-editar-globo:hover {
transform: scale(1.15) rotate(-10deg);
}

.btn-editar-globo img {
width: 17px;
height: auto;
}

@keyframes aparecerGlobo {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.avatar-3d {
width: 190px;
height: auto;
object-fit: contain;
margin-top: -20px
}

.avatar-3d {
animation: saludar 2.5s ease-in-out infinite; 
transform-origin: bottom center; 
}

@keyframes saludar {
    0%, 100% {
        transform: rotate(0deg); 
    }
    25% {
        transform: rotate(-3deg); 
    }
    50% {
        transform: rotate(3deg);  
    }
    75% {
        transform: rotate(-2deg); 
    }
}

.modal-editor {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none; 
justify-content: center;
align-items: center;
z-index: 999;
padding: 20px;
}

.contenido-modal {
background-color: #FFEDD5; 
width: 100%;
max-width: 290px;
padding: 24px;
border-radius: 24px;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.25);
text-align: center;
font-family: 'Montserrat', sans-serif;
animation: popInModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
}

@keyframes popInModal {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.contenido-modal h3 {
color: #292E33;
font-size: 18px;
font-weight: 700;
margin-bottom: 14px;
}

.contenido-modal input {
width: 100%;
padding: 11px 16px;
border: 2px solid #fae2c3;
background-color: #FFFFFF;
border-radius: 50px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #292E33;
outline: none;
margin-bottom: 18px;
box-sizing: border-box;
}

.grupo-botones-modal {
display: flex;
gap: 10px;
justify-content: center;
width: 100%;
}

.btn-modal-cancelar {
background-color: #292E33;
color: #FFEDD5;
border: none;
border-radius: 50px;
padding: 9px 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 13px;
cursor: pointer;
text-transform: uppercase;
}

.btn-modal-guardar {
background-color: #ED6C3A; 
color: #FFEDD5;
border: none;
border-radius: 50px;
padding: 9px 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 13px;
cursor: pointer;
text-transform: uppercase;
}

.btn-modal-cancelar:active, .btn-modal-guardar:active {
transform: scale(0.96);
}

.linea-divisoria {
border: none;
border-top: 1px solid #fae2c3;
width: 100%;
margin: 0px;
margin-bottom: 20px;
margin-top: -40px
}

/* Subtítulos*/
.subtitulo-cifras {
font-size: 16px;
font-weight: 600;
color: #fae2c3;
text-transform: uppercase;
margin: 0;
text-align: left;
margin-top: 0px
}

/*Trofeos*/
.vitrina-trofeos {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
background: transparent;
margin-top: 10px;
}

.trofeo {
height: 145px;
width: auto;
object-fit: contain;
}

/*Tarjetas de resumen*/
.seccion-resumen {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 10px;
width: auto;
max-width: none;
margin-bottom: 15px;
}

.seccion-resumen h2{
text-align: left;
margin-bottom: 15px;
}

.contenedor-tarjetas-resumen {
display: flex;
justify-content: center;
gap: 10px;
width: 100%;
}

.tarjeta-metrica {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid #fae2c3;
border-radius: 16px;
padding: 12px 0px;
color: #fae2c3;
}

.icono-metrica {
font-size: 14px;
margin-bottom: 2px;
}

.label-metrica {
font-size: 13px;
font-weight: 500;
text-transform: capitalize;
}

.valor-metrica {
font-size: 35px;
font-weight: 800;
margin-top: 2px;
}

/*Lista de Ranking*/
.seccion-ranking{
display: flex;
flex-direction: column;
width: 100%;
margin-top: 10px;
width: auto;
max-width: none;
margin-bottom: 15px;
}

.seccion-ranking .subtitulo-cifras {
text-align: left;
}

.lista-ranking {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
margin: 0;
margin-top: 15px;
}

.fila-ranking {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
border: 1.5px solid #fae2c3;
border-radius: 18px;
padding: 10px 18px;
box-sizing: border-box;
text-decoration: none;
cursor: pointer;
}

.fila-ranking:hover {
transform: scale(1.04);
transform: translateY(1.4);
background-color: #292E33;
border-color: #292E33;
}

.datos-competidor {
display: flex;
align-items: center;
gap: 15px;
}

.avatar-ranking {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}

.info-competidor h3 {
color: #fae2c3;
font-size: 16px;
font-weight: 700;
margin: 0;
}

.info-competidor p {
color: #fae2c3;
opacity: 0.8;
font-size: 13px;
margin: 2px 0 0 0;
}

.puesto-numero {
color: #fae2c3;
font-size: 32px;
font-weight: 600;
letter-spacing: -0.05rem;
}




/*CSS PANTALLA CIFRAS KATIA*/
/*Body*/
.katia-cifras {
font-family: 'Montserrat', sans-serif;
background-color: #292E33;
width: 100%;
max-width: 100%;
min-height: 100vh;
padding: 20px 24px 0px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.perfilcifra-header{
position: relative; 
padding-top: 60px; 
}

.btn-atras {
position: absolute;
top: 20px;
left: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;    
text-decoration: none;
transition: transform 0.2s ease, background-color 0.2s ease;
z-index: 10;              
} 

.btn-atras:hover {
transform: scale(1.05);
}

.avatarkatia-3d {
width: 120px;
height: auto;
object-fit: contain;
margin-top: -20px
}


.avatarkatia-3d {
animation: saludar 2.5s ease-in-out infinite; 
transform-origin: bottom center; 
}


@keyframes saludar {
    0%, 100% {
        transform: rotate(0deg); 
    }
    25% {
        transform: rotate(-3deg); 
    }
    50% {
        transform: rotate(3deg);  
    }
    75% {
        transform: rotate(-2deg); 
    }
}

.globo-dialogokatia {
position: absolute;
top: 15px;
left: 90px;
background-color: #fae2c3;
color: #292E33;
font-weight: 500;
font-size: 12px;
padding: 5px 10px;
border-radius: 12px;
border-bottom-right-radius: 0;
white-space: nowrap;
z-index: 5;
}

.globo-dialogokatia {
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

@keyframes aparecerGlobo {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.usuariokatia-bloque {
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
width: 100%;
max-width: 340px;
gap: 15px;
margin: 20px auto 10px auto;
margin-bottom: 55px;
}


/*CSS PANTALLA CIFRAS FR4N*/
/*Body*/
.fr4n-cifras {
font-family: 'Montserrat', sans-serif;
background-color: #EF4F4F;
width: 100%;
max-width: 100%;
min-height: 100vh;
padding: 20px 24px 0px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.avatarfr4n-3d {
width: 120px;
height: auto;
object-fit: contain;
margin-top: -20px
}


.avatarfr4n-3d {
animation: saludar 2.5s ease-in-out infinite; 
transform-origin: bottom center; 
}


@keyframes saludar {
    0%, 100% {
        transform: rotate(0deg); 
    }
    25% {
        transform: rotate(-3deg); 
    }
    50% {
        transform: rotate(3deg);  
    }
    75% {
        transform: rotate(-2deg); 
    }
}

.globo-dialogofr4n {
position: absolute;
top: 15px;
left: 90px;
background-color: #fae2c3;
color: #292E33;
font-weight: 500;
font-size: 12px;
padding: 5px 10px;
border-radius: 12px;
border-bottom-right-radius: 0;
white-space: nowrap;
z-index: 5;
}

.globo-dialogofr4n {
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

@keyframes aparecerGlobo {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.usuariofr4n-bloque {
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
width: 100%;
max-width: 340px;
gap: 15px;
margin: 20px auto 10px auto;
margin-bottom: 55px;
}


/*CSS PANTALLA CIFRAS YULI*/
/*Body*/
.yuli-cifras {
font-family: 'Montserrat', sans-serif;
background-color: #558874;
width: 100%;
max-width: 100%;
min-height: 100vh;
padding: 20px 24px 0px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.avataryuli-3d {
width: 120px;
height: auto;
object-fit: contain;
margin-top: -20px
}


.avataryuli-3d {
animation: saludar 2.5s ease-in-out infinite; 
transform-origin: bottom center; 
}


@keyframes saludar {
    0%, 100% {
        transform: rotate(0deg); 
    }
    25% {
        transform: rotate(-3deg); 
    }
    50% {
        transform: rotate(3deg);  
    }
    75% {
        transform: rotate(-2deg); 
    }
}

.globo-dialogoyuli {
position: absolute;
top: 0px;
left: 90px;
background-color: #fae2c3;
color: #292E33;
font-weight: 500;
font-size: 12px;
padding: 5px 10px;
border-radius: 12px;
border-bottom-right-radius: 0;
white-space: nowrap;
z-index: 5;
}

.globo-dialogoyuli {
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

@keyframes aparecerGlobo {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.usuarioyuli-bloque {
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
width: 100%;
max-width: 340px;
gap: 15px;
margin: 20px auto 10px auto;
margin-bottom: 38px;
}


/*CSS PANTALLA CIFRAS JAIMETO*/
/*Body*/
.jaimeto-cifras {
font-family: 'Montserrat', sans-serif;
background-color: #7B7EBC;
width: 100%;
max-width: 100%;
min-height: 100vh;
padding: 20px 24px 0px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.avatarjaimeto-3d {
width: 120px;
height: auto;
object-fit: contain;
margin-top: -20px
}


.avatarjaimeto-3d {
animation: saludar 2.5s ease-in-out infinite; 
transform-origin: bottom center; 
}


@keyframes saludar {
    0%, 100% {
        transform: rotate(0deg); 
    }
    25% {
        transform: rotate(-3deg); 
    }
    50% {
        transform: rotate(3deg);  
    }
    75% {
        transform: rotate(-2deg); 
    }
}

.globo-dialogojaimeto {
position: absolute;
top: 5px;
left: -40px;
background-color: #fae2c3;
color: #292E33;
font-weight: 500;
font-size: 12px;
padding: 5px 10px;
border-radius: 12px;
border-bottom-right-radius: 0;
white-space: nowrap;
z-index: 5;
}

.globo-dialogojaimeto {
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

@keyframes aparecerGlobo {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.usuariojaimeto-bloque {
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
width: 100%;
max-width: 340px;
gap: 15px;
margin: 20px auto 10px auto;
margin-bottom: 38px;
}


/*CSS PANTALLA CIFRAS DANIEL@*/
/*Body*/
.daniel-cifras {
font-family: 'Montserrat', sans-serif;
background-color: #ED6C3A;
width: 100%;
max-width: 100%;
min-height: 100vh;
padding: 20px 24px 0px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 30px;
background-image: url("../imagenes/fondoondeado9.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: moverFondoOndeado 20s ease-in-out infinite;
}

.avatardaniel-3d {
width: 120px;
height: auto;
object-fit: contain;
margin-top: -20px
}

.avatardaniel-3d {
animation: saludar 2.5s ease-in-out infinite; 
transform-origin: bottom center; 
}


@keyframes saludar {
    0%, 100% {
        transform: rotate(0deg); 
    }
    25% {
        transform: rotate(-3deg); 
    }
    50% {
        transform: rotate(3deg);  
    }
    75% {
        transform: rotate(-2deg); 
    }
}

.globo-dialogodaniel {
position: absolute;
top: 5px;
left: 90px;
background-color: #fae2c3;
color: #292E33;
font-weight: 500;
font-size: 12px;
padding: 5px 10px;
border-radius: 12px;
border-bottom-right-radius: 0;
white-space: nowrap;
z-index: 5;
}

.globo-dialogodaniel {
transform-origin: bottom left; 
animation: aparecerGlobo 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation-delay: 1s; 
}

@keyframes aparecerGlobo {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.usuariodaniel-bloque {
display: flex;
flex-direction:row;
justify-content:center;
align-items: center;
width: 100%;
max-width: 340px;
gap: 15px;
margin: 20px auto 10px auto;
margin-bottom: 50px;
}