* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: #000000;
    color: white;
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- HEADER Y NAVEGACIÓN --- */
header {
    position: sticky;
    top: 0;
    z-index: 1000; 
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

nav ul li a:hover {
    color: #00f2ff;
}

.logo img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

/* --- LAYOUT DEL MANUAL (Dos Columnas) --- */
.main-wrapper {
    display: flex;
    flex-direction: row; 
    max-width: 1400px;
    margin: 120px auto 80px; 
    padding: 0 40px;
    gap: 50px;
    position: relative;
    z-index: 10;
}

/* Sidebar Estilo Premium Vertical */
.sidebar-manual {
    width: 280px;
    flex-shrink: 0; 
    height: fit-content;
    position: sticky;
    top: 120px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.sidebar-header {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: #c432d0;
    font-weight: bold;
    margin-bottom: 25px;
    padding-left: 15px;
    text-transform: uppercase;
}

.sidebar-nav ul {
    display: flex;
    flex-direction: column; 
    gap: 10px;
    list-style: none;
    padding: 0;
}

.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #aaa;
    text-decoration: none;
    padding: 14px 18px;
    border-radius: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.95rem;
}

.sidebar-nav ul li a:hover, 
.sidebar-nav ul li a.active {
    background: rgba(196, 50, 208, 0.15);
    color: #fff;
    transform: translateX(10px);
    border-left: 3px solid #c432d0;
}

/* --- CONTENIDO --- */
.content-manual {
    flex: 1;
}

.content-manual h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.gradient-text {
    background: linear-gradient(90deg, #c432d0, #4cc9f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.placeholder-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 80px 40px;
    text-align: center;
    margin-top: 30px;
    color: #888;
}

/* --- FOOTER --- */
.footer-do {
    background: #000;
    padding: 60px 20px 30px;
    text-align: center;
}

.footer-container {
    max-width: 800px;
    margin: 0 auto;
}

.footer-logo {
    font-size: 2rem;
    letter-spacing: 4px;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-bottom {
    border-top: 1px solid #1a1a1a;
    padding-top: 20px;
    color: #666;
    font-size: 0.85rem;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.social-icons a {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a:hover {
    border-color: #00f7ff;
    color: #00f7ff;
    box-shadow: 0 0 15px rgba(0,247,255,0.3);
}









/* --- NEBULOSA ANIMADA --- */
/* --- NEBULOSA ANIMADA MEJORADA --- */
.nebulosa-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000;
    overflow: hidden;
}

.vapor {
    position: absolute;
    border-radius: 50%;
    opacity: 0.4; /* Bajamos un poco la opacidad base */
    filter: blur(80px);
    /* Mezcla de animaciones: una para moverse y otra para el brillo (pulso) */
    animation: movimientoFlotante 25s infinite alternate ease-in-out, 
               pulsoBrillo 10s infinite alternate ease-in-out;
}

/* Variaciones de animación para que no todos hagan lo mismo */
.v-magenta { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 0, 255, 0.4) 0%, transparent 70%); top: -10%; left: -10%; animation-duration: 18s; }
.v-aqua { width: 700px; height: 700px; background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%); bottom: -10%; right: -10%; animation-duration: 30s; animation-name: movimientoCircular, pulsoBrillo; }
.v-azul-marino { width: 800px; height: 800px; background: radial-gradient(circle, rgba(0, 20, 150, 0.4) 0% , transparent 70%); top: 20%; left: 30%; animation-duration: 35s; animation-delay: -7s; }
.v-blanco { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); top: 40%; left: 50%; filter: blur(50px); animation-duration: 15s; }
.v-rojo-claro { width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 80, 80, 0.25) 0%, transparent 70%); bottom: 10%; left: 5%; animation-duration: 22s; animation-name: movimientoZigZag, pulsoBrillo; }
.v-aqua-deep { width: 450px; height: 450px; background: radial-gradient(circle, rgba(0, 150, 255, 0.3) 0%, transparent 70%); top: 5%; right: 15%; animation-delay: -4s; animation-duration: 28s; }
.v-magenta-dark { width: 550px; height: 550px; background: radial-gradient(circle, rgba(150, 0, 150, 0.3) 0%, transparent 70%); bottom: 20%; right: 30%; animation-duration: 40s; }
.v-brillo { width: 250px; height: 250px; background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 80%); top: 15%; left: 35%; filter: blur(60px); animation-duration: 12s; animation-name: pulsoBrillo; }

/* 1. Movimiento Errante Principal */
@keyframes movimientoFlotante {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(100px, -50px) rotate(10deg) scale(1.1); }
    66% { transform: translate(-50px, 100px) rotate(-10deg) scale(0.9); }
    100% { transform: translate(50px, 50px) rotate(5deg) scale(1.05); }
}

/* 2. Movimiento Circular (para dar variedad) */
@keyframes movimientoCircular {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

/* 3. Movimiento ZigZag */
@keyframes movimientoZigZag {
    0% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-100px) translateX(50px); }
    75% { transform: translateY(100px) translateX(-50px); }
    100% { transform: translateY(0) translateX(0); }
}

/* 4. Efecto de Respiración (Opacidad) */
@keyframes pulsoBrillo {
    0%, 100% { opacity: 0.3; filter: blur(80px); }
    50% { opacity: 0.6; filter: blur(100px); }
}












/* --- VARIABLES DE COLOR --- */
/* --- VARIABLES PARA LOS TEMAS (NUEVO) --- */
:root {
    --primary-manual: #c432d0;
    --gradiente-phone: linear-gradient(180deg, #8E44AD 0%, #E91E63 100%);
    --sombra-logo: #d8318e;
    --gradiente-btn: linear-gradient(90deg, #7b3dbb, #e13a8b);
    body.theme-pink   { --primary-manual: #FF007A; }
    body.theme-orange { --primary-manual: #AD3333; }
    body.theme-aqua   { --primary-manual: #008392; }
    body.theme-red    { --primary-manual: #000000; }
}

body.theme-orange {
    --primary-manual: #AD3333;
    --gradiente-phone: linear-gradient(180deg, #BD2222 0%, #FF4D00 100%);
    --sombra-logo: #ec6002;
    --gradiente-btn: linear-gradient(90deg, #FF4D00, #BD2222);
}

body.theme-aqua {
    --primary-manual: #AD3333;
    --gradiente-phone: linear-gradient(180deg, #00FFCC 0%, #0094A4 100%);
    --sombra-logo: #008392;
    --gradiente-btn: linear-gradient(90deg, #00FFCC, #0094A4);
}

body.theme-red {
    --primary-manual: #ff0000;
    --gradiente-phone: linear-gradient(180deg, #000000 0%, #000000 100%);
    --sombra-logo: #A80303;
    --gradiente-btn: linear-gradient(90deg, #A80303, #BD2222);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
body { background-color: #000000; color: white; overflow-x: hidden; min-height: 100vh; transition: 0.5s; 
transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;

}

.mockup-phone, .side-link, .mockup-btn-new, .color-dot {
    transition: all 0.6s ease-in-out;
}


.cambiando-tema {
    animation: fadeTheme 1.2s ease-in-out;
}

@keyframes fadeTheme {
    0% { opacity: 1; }
    50% { opacity: 0.7; filter: grayscale(100%); } /* El color se "apaga" a la mitad */
    100% { opacity: 1; filter: grayscale(0%); }
}



header {
    position: sticky; top: 0; z-index: 1000; width: 100%; padding: 20px;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex;
    justify-content: space-between; align-items: center;
}

.logo img { width: 50px; height: 50px; border-radius: 10px; }
nav ul { display: flex; list-style: none; }
nav ul li { margin-left: 20px; }
nav ul li a { color: white; text-decoration: none; font-weight: bold; transition: 0.3s; }
nav ul li a:hover { color: #00f2ff; }

.main-wrapper { display: flex; flex-direction: row; max-width: 1400px; margin: 120px auto 80px; padding: 0 40px; gap: 50px; position: relative; z-index: 10; }
.sidebar-manual { width: 280px; flex-shrink: 0; height: fit-content; position: sticky; top: 120px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 30px 20px; }
.sidebar-header { font-size: 0.7rem; letter-spacing: 3px; color: rgba(255, 255, 255, 0.5); /* Un blanco con transparencia se ve muy elegante */; font-weight: bold; margin-bottom: 25px; padding-left: 15px; text-transform: uppercase; }

.sidebar-nav ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.sidebar-nav ul li a { display: flex; align-items: center; gap: 15px; color: #aaa; text-decoration: none; padding: 14px 18px; border-radius: 14px; transition: 0.4s; font-size: 0.95rem; }
.sidebar-nav ul li a:hover, .sidebar-nav ul li a.active { background: rgba(196, 50, 208, 0.15); color: #fff; transform: translateX(10px); border-left: 3px solid var(--primary-manual); }

.content-manual { flex: 1; display: flex; justify-content: center; align-items: flex-start; }

.mockup-phone {
    width: 400px; background: var(--gradiente-phone); border-radius: 40px;
    padding: 50px 30px 35px; box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    overflow: hidden; position: relative;
}

.mockup-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }

.mockup-logo {
    font-size: 8.5rem; 
    font-weight: 900; 
    color: white;
    font-family: 'Arial Black', sans-serif; 
    line-height: 0.8;
    letter-spacing: -6px; 
    display: inline-block; 
    position: relative;
    /* La sombra masiva ahora usa la VARIABLE para cambiar con el tema */
    text-shadow: 
        1px 1px var(--sombra-logo), 2px 2px var(--sombra-logo), 3px 3px var(--sombra-logo), 4px 4px var(--sombra-logo), 5px 5px var(--sombra-logo),
        6px 6px var(--sombra-logo), 7px 7px var(--sombra-logo), 8px 8px var(--sombra-logo), 9px 9px var(--sombra-logo), 10px 10px var(--sombra-logo),
        11px 11px var(--sombra-logo), 12px 12px var(--sombra-logo), 13px 13px var(--sombra-logo), 14px 14px var(--sombra-logo), 15px 15px var(--sombra-logo),
        16px 16px var(--sombra-logo), 17px 17px var(--sombra-logo), 18px 18px var(--sombra-logo), 19px 19px var(--sombra-logo), 20px 20px var(--sombra-logo),
        21px 21px var(--sombra-logo), 22px 22px var(--sombra-logo), 23px 23px var(--sombra-logo), 24px 24px var(--sombra-logo), 25px 25px var(--sombra-logo),
        26px 26px var(--sombra-logo), 27px 27px var(--sombra-logo), 28px 28px var(--sombra-logo), 29px 29px var(--sombra-logo), 30px 30px var(--sombra-logo),
        31px 31px var(--sombra-logo), 32px 32px var(--sombra-logo), 33px 33px var(--sombra-logo), 34px 34px var(--sombra-logo), 35px 35px var(--sombra-logo),
        36px 36px var(--sombra-logo), 37px 37px var(--sombra-logo), 38px 38px var(--sombra-logo), 39px 39px var(--sombra-logo), 40px 40px var(--sombra-logo),
        41px 41px var(--sombra-logo), 42px 42px var(--sombra-logo), 43px 43px var(--sombra-logo), 44px 44px var(--sombra-logo), 45px 45px var(--sombra-logo),
        46px 46px var(--sombra-logo), 47px 47px var(--sombra-logo), 48px 48px var(--sombra-logo), 49px 49px var(--sombra-logo), 50px 50px var(--sombra-logo),
        51px 51px var(--sombra-logo), 52px 52px var(--sombra-logo), 53px 53px var(--sombra-logo), 54px 54px var(--sombra-logo), 55px 55px var(--sombra-logo),
        56px 56px var(--sombra-logo), 57px 57px var(--sombra-logo), 58px 58px var(--sombra-logo), 59px 59px var(--sombra-logo), 60px 60px var(--sombra-logo),
        61px 61px var(--sombra-logo), 62px 62px var(--sombra-logo), 63px 63px var(--sombra-logo), 64px 64px var(--sombra-logo), 65px 65px var(--sombra-logo),
        66px 66px var(--sombra-logo), 67px 67px var(--sombra-logo), 68px 68px var(--sombra-logo), 69px 69px var(--sombra-logo), 70px 70px var(--sombra-logo),
        71px 71px var(--sombra-logo), 72px 72px var(--sombra-logo), 73px 73px var(--sombra-logo), 74px 74px var(--sombra-logo), 75px 75px var(--sombra-logo),
        76px 76px var(--sombra-logo), 77px 77px var(--sombra-logo), 78px 78px var(--sombra-logo), 79px 79px var(--sombra-logo), 80px 80px var(--sombra-logo),
        81px 81px var(--sombra-logo), 82px 82px var(--sombra-logo), 83px 83px var(--sombra-logo), 84px 84px var(--sombra-logo), 85px 85px var(--sombra-logo),
        86px 86px var(--sombra-logo), 87px 87px var(--sombra-logo), 88px 88px var(--sombra-logo), 89px 89px var(--sombra-logo), 90px 90px var(--sombra-logo),
        91px 91px var(--sombra-logo), 92px 92px var(--sombra-logo), 93px 93px var(--sombra-logo), 94px 94px var(--sombra-logo), 95px 95px var(--sombra-logo),
        96px 96px var(--sombra-logo), 97px 97px var(--sombra-logo), 98px 98px var(--sombra-logo), 99px 99px var(--sombra-logo), 100px 100px var(--sombra-logo),
        101px 101px var(--sombra-logo), 102px 102px var(--sombra-logo), 103px 103px var(--sombra-logo), 104px 104px var(--sombra-logo), 105px 105px var(--sombra-logo),
        106px 106px var(--sombra-logo), 107px 107px var(--sombra-logo), 108px 108px var(--sombra-logo), 109px 109px var(--sombra-logo), 110px 110px var(--sombra-logo),
        111px 111px var(--sombra-logo), 112px 112px var(--sombra-logo), 113px 113px var(--sombra-logo), 114px 114px var(--sombra-logo), 115px 115px var(--sombra-logo),
        116px 116px var(--sombra-logo), 117px 117px var(--sombra-logo), 118px 118px var(--sombra-logo), 119px 119px var(--sombra-logo), 120px 120px var(--sombra-logo),
        121px 121px var(--sombra-logo), 122px 122px var(--sombra-logo), 123px 123px var(--sombra-logo), 124px 124px var(--sombra-logo), 125px 125px var(--sombra-logo),
        126px 126px var(--sombra-logo), 127px 127px var(--sombra-logo), 128px 128px var(--sombra-logo), 129px 129px var(--sombra-logo), 130px 130px var(--sombra-logo),
        131px 131px var(--sombra-logo), 132px 132px var(--sombra-logo), 133px 133px var(--sombra-logo), 134px 134px var(--sombra-logo), 135px 135px var(--sombra-logo),
        136px 136px var(--sombra-logo), 137px 137px var(--sombra-logo), 138px 138px var(--sombra-logo), 139px 139px var(--sombra-logo), 140px 140px var(--sombra-logo),
        141px 141px var(--sombra-logo), 142px 142px var(--sombra-logo), 143px 143px var(--sombra-logo), 144px 144px var(--sombra-logo), 145px 145px var(--sombra-logo),
        146px 146px var(--sombra-logo), 147px 147px var(--sombra-logo), 148px 148px var(--sombra-logo), 149px 149px var(--sombra-logo), 150px 150px var(--sombra-logo),
        151px 151px var(--sombra-logo), 152px 152px var(--sombra-logo), 153px 153px var(--sombra-logo), 154px 154px var(--sombra-logo), 155px 155px var(--sombra-logo),
        156px 156px var(--sombra-logo), 157px 157px var(--sombra-logo), 158px 158px var(--sombra-logo), 159px 159px var(--sombra-logo), 160px 160px var(--sombra-logo),
        161px 161px var(--sombra-logo), 162px 162px var(--sombra-logo), 163px 163px var(--sombra-logo), 164px 164px var(--sombra-logo), 165px 165px var(--sombra-logo),
        166px 166px var(--sombra-logo), 167px 167px var(--sombra-logo), 168px 168px var(--sombra-logo), 169px 169px var(--sombra-logo), 170px 170px var(--sombra-logo),
        171px 171px var(--sombra-logo), 172px 172px var(--sombra-logo), 173px 173px var(--sombra-logo), 174px 174px var(--sombra-logo), 175px 175px var(--sombra-logo),
        176px 176px var(--sombra-logo), 177px 177px var(--sombra-logo), 178px 178px var(--sombra-logo), 179px 179px var(--sombra-logo), 180px 180px var(--sombra-logo),
        181px 181px var(--sombra-logo), 182px 182px var(--sombra-logo), 183px 183px var(--sombra-logo), 184px 184px var(--sombra-logo), 185px 185px var(--sombra-logo),
        186px 186px var(--sombra-logo), 187px 187px var(--sombra-logo), 188px 188px var(--sombra-logo), 189px 189px var(--sombra-logo), 190px 190px var(--sombra-logo),
        191px 191px var(--sombra-logo), 192px 192px var(--sombra-logo), 193px 193px var(--sombra-logo), 194px 194px var(--sombra-logo), 195px 195px var(--sombra-logo),
        196px 196px var(--sombra-logo), 197px 197px var(--sombra-logo), 198px 198px var(--sombra-logo), 199px 199px var(--sombra-logo), 200px 200px var(--sombra-logo),
        201px 201px var(--sombra-logo), 202px 202px var(--sombra-logo), 203px 203px var(--sombra-logo), 204px 204px var(--sombra-logo), 205px 205px var(--sombra-logo),
        206px 206px var(--sombra-logo), 207px 207px var(--sombra-logo), 208px 208px var(--sombra-logo), 209px 209px var(--sombra-logo), 210px 210px var(--sombra-logo),
        211px 211px var(--sombra-logo), 212px 212px var(--sombra-logo), 213px 213px var(--sombra-logo), 214px 214px var(--sombra-logo), 215px 215px var(--sombra-logo),
        216px 216px var(--sombra-logo), 217px 217px var(--sombra-logo), 218px 218px var(--sombra-logo), 219px 219px var(--sombra-logo), 220px 220px var(--sombra-logo),
        221px 221px var(--sombra-logo), 222px 222px var(--sombra-logo), 223px 223px var(--sombra-logo), 224px 224px var(--sombra-logo), 225px 225px var(--sombra-logo),
        226px 226px var(--sombra-logo), 227px 227px var(--sombra-logo), 228px 228px var(--sombra-logo), 229px 229px var(--sombra-logo), 230px 230px var(--sombra-logo),
        231px 231px var(--sombra-logo), 232px 232px var(--sombra-logo), 233px 233px var(--sombra-logo), 234px 234px var(--sombra-logo), 235px 235px var(--sombra-logo),
        236px 236px var(--sombra-logo), 237px 237px var(--sombra-logo), 238px 238px var(--sombra-logo), 239px 239px var(--sombra-logo), 240px 240px var(--sombra-logo),
        241px 241px var(--sombra-logo), 242px 242px var(--sombra-logo), 243px 243px var(--sombra-logo), 244px 244px var(--sombra-logo), 245px 245px var(--sombra-logo),
        246px 246px var(--sombra-logo), 247px 247px var(--sombra-logo), 248px 248px var(--sombra-logo), 249px 249px var(--sombra-logo), 250px 250px var(--sombra-logo),
        255px 255px 70px rgba(0,0,0,0.8);
}

/* Si el mockup-phone tiene esta clase extra, el logo se oculta automáticamente */
.mockup-phone.hide-logo .mockup-header {
    display: none;
}

/* Ajuste para que la tarjeta suba cuando no hay logo */
.mockup-phone.hide-logo {
    padding-top: 20px;
}


.mockup-card { background: #FFFFFF; border-radius: 35px; padding: 45px 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); position: relative; z-index: 2; }
/* El título "Iniciar Sesión" */
.mockup-title { 
    text-align: center; 
    font-size: 2.2rem; 
    color: var(--primary-manual); /* <-- CAMBIO AQUÍ */
    margin-bottom: 35px; 
    font-weight: bold; 
    transition: color 0.3s ease;
}

/* El enlace "¿Olvidaste tu contraseña?" */
.forgot-container a { 
    color: var(--primary-manual); /* <-- CAMBIO AQUÍ */
    font-size: 0.85rem; 
    text-decoration: underline; 
    transition: color 0.3s ease;
}

/* El enlace "REGÍSTRATE AQUÍ" */
.register-link { 
    color: var(--primary-manual); /* <-- CAMBIO AQUÍ */
    font-weight: bold; 
    text-decoration: underline; 
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.mockup-input { background: #F0F0F0; border-radius: 30px; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; color: #888; }
.mockup-btn { width: 100%; padding: 18px; border: none; border-radius: 35px; font-size: 2rem; font-weight: bold; color: white; background: var(--gradiente-btn); margin-bottom: 20px; }

/* FOOTER Y NEBULOSA */
.footer-do { background: #000; padding: 60px 20px 30px; text-align: center; }
.footer-logo { font-size: 2rem; letter-spacing: 4px; font-weight: bold; margin-bottom: 20px; text-transform: uppercase; }
.footer-bottom { border-top: 1px solid #1a1a1a; padding-top: 20px; color: #666; font-size: 0.85rem; }
.social-icons { display: flex; justify-content: center; gap: 20px; margin: 30px 0; }
.social-icons a { width: 45px; height: 45px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; }

.nebulosa-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #000; overflow: hidden; }
.vapor { position: absolute; border-radius: 50%; opacity: 0.6; filter: blur(80px); animation: movimientoEpico 15s infinite alternate ease-in-out; }
.v-magenta { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 0, 255, 0.4) 0%, transparent 70%); top: -10%; left: -10%; }
.v-aqua { width: 700px; height: 700px; background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%); bottom: -10%; right: -10%; }
/* ... Resto de tus vapores ... */

@keyframes movimientoEpico {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(150px, 100px) scale(1.2) rotate(15deg); }
    100% { transform: translate(-100px, 200px) scale(0.9) rotate(-15deg); }
}

.color-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; transition: 0.3s; border: 2px solid transparent; }
.color-dot.active { border-color: white; transform: scale(1.3); }
.dot-pink { background: #d8318e; }
.dot-orange { background: #ff8c00; }
.dot-aqua { background: #009a97; }
.dot-red { background: #000000; }

/* Alineación derecha para "Olvidaste tu contraseña" */
.forgot-container {
    text-align: right;
    margin-bottom: 25px;
}

.forgot-container a {
    color: #3F51B5;
    font-size: 0.85rem;
    text-decoration: underline;
}

/* Bloque de Registro como lo teníamos */
.register-block {
    text-align: center;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}

.register-link {
    color: #E91E63;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
}

/* Derechos reservados centrado debajo de la tarjeta */
.mockup-footer-text {
    text-align: center;
    color: white;
    margin-top: 30px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 1. El título "Iniciar Sesión" */
.mockup-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 35px;
    font-weight: bold;
    /* Usamos la variable para que cambie con el tema */
    color: var(--primary-manual); 
    transition: color 0.3s ease;
}

/* 2. El contenedor y el enlace "Olvidaste tu contraseña" */
.forgot-container {
    text-align: right;
    margin-bottom: 25px;
}

.forgot-container a {
    font-size: 0.85rem;
    text-decoration: underline;
    /* CAMBIO CLAVE: quitamos el azul fijo y ponemos la variable */
    color: var(--primary-manual); 
    transition: color 0.3s ease;
}

/* 3. El bloque de "¿Aún no tienes cuenta?" */
.register-block {
    text-align: center;
    color: #555; /* Texto normal en gris */
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 15px;
}

/* 4. El enlace resaltado "REGÍSTRATE AQUÍ" */
.register-link {
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
    /* CAMBIO CLAVE: usamos la variable para que cambie con el tema */
    color: var(--primary-manual); 
    transition: color 0.3s ease;
}



/* --- ENCABEZADO REGISTRO (SIN CUADRO DEGRADADO) --- */
/* --- ENCABEZADO REGISTRO ALINEADO --- */
/* Cuando el teléfono tiene la clase 'hide-logo', eliminamos TODO el rastro del logo gigante */
/* 1. ESTO ELIMINA EL LOGO GIGANTE Y SU SOMBRA POR COMPLETO */
/* Cuando estemos en registro, borramos el logo gigante y su sombra */
/* 1. ELIMINACIÓN TOTAL DEL LOGO GIGANTE Y SU SOMBRA */
.mockup-phone.hide-logo .mockup-header, 
.mockup-phone.hide-logo .mockup-logo,
.mockup-phone.hide-logo .old-logo-container {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2. ENCABEZADO FLEXIBLE PARA QUE NADA SE CORTE */
/* --- ENCABEZADO REGISTRO FINAL --- */
/* --- ENCABEZADO REGISTRO FINAL (SIN CORTES) --- */
/* --- ENCABEZADO REGISTRO (LETRA MINI + LOGO GRANDE) --- */
/* --- ENCABEZADO REGISTRO (LOGO ESQUINA + TÍTULO CENTRADO) --- */
.mockup-header-new {
    display: flex;
    flex-direction: column; /* Cambiamos a columna para separar logo de título */
    align-items: center;
    padding: 30px 15px 5px;
    width: 100%;
    box-sizing: border-box;
}

.logo-container-top {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Logo a la izquierda */
    margin-bottom: 5px;
}

.logo-small {
    width: 55px;            /* Logo grande y claro */
    height: 55px;
    border-radius: 12px;
}

.registration-title {
    color: white;
    font-size: 1.8rem;      /* Título grande ahora que tiene espacio */
    font-weight: 900;
    text-align: center;     /* CENTRADO */
    text-transform: uppercase;
    margin: 5px 0;
}

/* --- MEJORAS EN LA TARJETA --- */
.mockup-subtitle-new {
    font-size: 1.3rem !important; /* DATOS PERSONALES MÁS GRANDE */
    font-weight: bold;
    color: var(--primary-manual);
    margin-bottom: 15px;
}

.progress-bar-custom {
    display: flex; 
    gap: 8px; 
    margin-bottom: 25px; 
    justify-content: center;
}

.progress-step-big {
    width: 50px;           /* BARRA DE PROGRESO MÁS GRANDE */
    height: 6px;           /* Más gruesa */
    border-radius: 10px;
}

/* --- TARJETA MÁS PEGADA --- */
.mockup-card {
    margin-top: 5px !important; /* La subimos casi al toque del título */
    padding: 15px 20px !important;
}

.mockup-subtitle-new {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
}

.progress-bar-custom {
    gap: 6px !important;
    margin-bottom: 15px !important; /* Menos espacio aquí también */
}






.screen-title-new {
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 1px;
}

/* --- TEXTOS DENTRO DE LA TARJETA --- */
.mockup-subtitle-new {
    color: #D63384; /* Rosa/Magenta del tema */
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* --- ESTILO DE INPUTS NUEVOS --- */
.input-group-new {
    margin-bottom: 18px;
    padding: 0 10px;
}

.input-group-new label {
    display: block;
    color: #9E9E9E;
    font-size: 0.85rem;
    margin-bottom: 8px;
    margin-left: 5px;
}

.input-field-new {
    height: 45px;
    background-color: #F5F7FA;
    border-radius: 25px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    border: 1px solid #EAECEF;
}

.placeholder-text {
    display: flex;
    align-items: center;
    padding-left: 20px;
    color: #C0C4CC;
    font-size: 0.9rem;
}

/* --- BOTÓN NUEVO --- */
.mockup-btn-new {
    width: 85%;
    margin: 20px auto 10px auto;
    display: block;
    padding: 14px;
    background: #D63384; /* O usa var(--primary-manual) */
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(214, 51, 132, 0.3);
}

.sub-link {
    font-size: 0.9rem !important;
    padding: 5px 10px !important;
    opacity: 0.8;
}

.sub-link:hover {
    opacity: 1;
    color: var(--primary-manual) !important;
}

/* Animación simple para el chevron */
.rotate-icon {
    transform: rotate(180deg);
    transition: transform 0.3s;
}


/* --- TRANSICIÓN AVANZADA DE INTERFAZ --- */

/* Clase para el contenedor cuando el contenido está saliendo */
.fade-out {
    opacity: 0;
    filter: blur(8px); /* Añade un desenfoque al salir */
    transform: scale(0.95); /* Se encoge ligeramente */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación de entrada con escalado y opacidad */
.fade-in {
    animation: advancedFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes advancedFadeIn {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.05) translateY(-10px); /* Viene desde atrás y arriba */
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1) translateY(0);
    }
}


.mockup-btn-new:active {
    transform: scale(0.95);
    filter: brightness(0.9);
    transition: all 0.1s;
}


.mockup-btn {
    cursor: pointer; /* Asegura que el usuario sepa que es clickable */
    transition: transform 0.2s ease, background 0.3s ease;
}

.mockup-btn:hover {
    transform: scale(1.02); /* Pequeño feedback visual al pasar el cursor */
    filter: brightness(1.1);
}

/* --- ESTILOS DE FOCO Y BRILLO POR CURSOR (OPTIMIZADO) --- */

/* Clase que "ilumina" el campo al pasar el cursor (Hover) */
.resaltar-foco {
    /* 1. Usamos var(--primary-manual) para que cambie según el tema (pink, aqua, etc.) */
    border: 2px solid var(--primary-manual) !important;
    
    /* 2. El EFECTO DE BRILLO SUTIL que solicitaste */
    /* Brillo interior (inset) + Brillo exterior difuminado del color del tema */
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.4), /* Brillo blanco interior sutil */
        0 0 20px var(--primary-manual),         /* Brillo principal del tema */
        0 0 10px rgba(255, 255, 255, 0.2)       /* Halo blanco exterior */
        !important;
        
    /* 3. Transformación sutil para dar feedback visual de selección */
    transform: scale(1.02);
    
    /* 4. Aseguramos transiciones suaves para el hover */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Opcional: Para asegurar que el texto sea legible y combine con el brillo */
.mockup-input, #registro-form div {
    transition: all 0.3s ease;
}