/* Estilos generales de tipografía */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    /* 'Inter' se aplicará a todo el texto por defecto */
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    /* 'Poppins' se aplicará solo a los encabezados */
    font-family: 'Poppins', sans-serif;
}

/* ====== ESTILOS PARA EL BANNER ====== */

.carousel-container {
    max-width: 95%;
    width: 95%; /* Ajusta este valor si quieres más o menos margen */
    margin: 1% auto; /* 25px de margen arriba/abajo y centrado automático a los lados */
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Opcional: añade bordes redondeados */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
    background-color: #444; /* Color de fondo mientras las imágenes cargan */
    aspect-ratio: 16 / 5; /* Establece una proporción fija (ancho / alto) */
    container-type: inline-size;
}

.carousel-slides {
    display: flex;
    width: 100%;
    height: 100%; /* Altura responsive, ajústala si es necesario */
    max-height: 500px; /* Altura máxima para pantallas grandes */
    min-height: 200px; /* Altura mínima para pantallas pequeñas */
    object-fit: contain;
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}
.slide-1 {
    background-image: url('Imagenes/cuepointbanner.png');
}
.slide-2 {
    background-image: url('Imagenes/banner-atrevete.png');
}
.slide-3 {
    background-image: url('Imagenes/baner-1M.png');
}

.slide.active {
    opacity: 1;
    z-index: 2; /* Se asegura que el slide activo esté por encima de los otros */
}

.carousel-arrow {
    position: absolute;
    top: 0;
    height: 100%;
    width: 15%;
    display: flex;
    align-items: center; /* <-- CORREGIDO el error de tipeo */
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    background: transparent;
    transition: opacity 0.3s ease;
}

.carousel-arrow:hover {
    opacity: 1;
}

.prev {
    left: 0;
    justify-content: flex-start; /* Alinea el ícono a la izquierda */
    padding-left: 20px; /* Espacio para que no esté pegada al borde */
    /* Degradado de izquierda a derecha */
    background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
}

.next {
    right: 0;
    justify-content: flex-end; /* Alinea el ícono a la derecha */
    padding-right: 20px; /* Espacio para que no esté pegada al borde */
    /* Degradado de derecha a izquierda */
    background: linear-gradient(to left, rgba(0,0,0,0.6), transparent);
}

/* --- Contenedor de los Puntos --- */
.carousel-dots {
    position: absolute; 
    bottom: 4%; /* Distancia desde abajo */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px; /* Espacio entre cada punto */
    z-index: 10; /* Asegura que estén por encima de las imágenes */
}

/* --- Estilo de cada Punto Individual --- */
.dot {
    width: clamp(8px, 1.5cqw, 15px); 
    height: clamp(8px, 1.5cqw, 15px);
    border-radius: 50%; /* Para que sea un círculo perfecto */
    background-color: rgba(255, 255, 255, 0.185); /* Color por defecto (blanco semitransparente) */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Animación suave al cambiar de color */
}

/* --- Estilo del Punto Activo --- */
.dot.active {
    background-color: rgba(255, 255, 255, 0.384); /* Color cuando el slide está activo (blanco sólido) */
    }

/* ====== NAVBAR ====== */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 65px;
    background: rgba(78, 7, 92, 0.301); /* Fondo blanco semitransparente */
    backdrop-filter: blur(30px); /* Difumina el fondo debajo de la barra */
    -webkit-backdrop-filter: blur(30px); /* Soporte para Safari */
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000; /* Asegura que la barra esté por encima de otros contenidos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
.nav-links {
    display: flex;
    align-items: center; 
    gap: 10px; 
    position: relative;
    cursor: pointer;
}

.nav-link {
    font-weight: normal;
    color: #ffffffce;
    font-size: 17px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background 0.2s;
    position: relative; 
    padding-bottom: 5px;
}
/* ===== ESTILO PARA EL ENLACE DE NAVEGACIÓN ACTIVO ===== */

.nav-link.active-link {
  color: #ffffff; /* Un lila más brillante para destacarlo */
}
/* Hacemos que la línea de abajo esté siempre visible en el enlace activo */
.nav-link.active-link::after {
    transform: scaleX(1);
}
#Logo-navbar { 
    width: 150px; /* Ajusta el tamaño del logo según sea necesario */
    height: auto;
    display: block;
    margin-left: 0;
    margin-right: 40px; /* Espacio de 40px entre el logo y los enlaces */
}
.nav-actions a {
    text-decoration: none;
}
.btn-login {
    display: inline-block; /* Cambia de block a inline-block */
    margin-right: 0;       /* Elimina margen si no lo necesitas */
    background-color: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    padding: 10px 18px; /* las dimensiones del relleno del botón */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transición suave para el cambio de color */
        box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.171);
}
.btn-login:hover {
    background-color: #ffffff;
    color: #2b1a64;
    transform: translateY(-3px);
}
.btn-register {
    display: inline-block; /* Cambia de block a inline-block */
    margin-right: 0;       /* Elimina margen si no lo necesitas */
    background-color: #ffffff;
    color: #2b1a64;
    font-weight: bold;
    font-size: 15px;
    padding: 10px 18px; /* las dimensiones del relleno del botón */
    border: 2px solid #ffffff;
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease; /* Transición suave para el cambio de color */
    box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.171);
}
.btn-register:hover {
    background-color: #5b1ebd;
    border-color: #5b1ebd;
    color: #ffffff;
    transform: translateY(-3px);
}
/* Contenedor para los botones de Iniciar Sesión y Registro */
.logged-out {
    display: flex;
    align-items: center;
    gap: 15px; /* <- Aquí aplicamos el espacio entre los botones */
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre los botones */
}
/* ===== EFECTO SUBRAYADO ANIMADO PARA NAVBAR ===== */

/* 1. Preparamos el contenedor del enlace */
.nav-link {
    position: relative; /* Necesario para posicionar la línea de abajo */
    padding-bottom: 5px; /* Damos un pequeño espacio para que la línea no esté pegada al texto */
}

/* 2. Creamos la línea usando un pseudo-elemento */
.nav-link::after {
    content: ''; /* Obligatorio para que el pseudo-elemento se muestre */
    position: absolute;
    bottom: 0; /* La posicionamos en la parte inferior del enlace */
    left: 0;
    width: 100%;
    height: 3px; /* Grosor de la línea */
    background-color: #ffffff9f; /* Color de la línea */
    border-radius: 5px;
    /* --- La Magia de la Animación --- */
    transform: scaleX(0); /* Hacemos la línea invisible por defecto (escala 0 en el eje X) */
    transform-origin: center; /* Hacemos que la transformación ocurra desde el centro */
    transition: transform 0.4s ease; /* Animación suave y con una ligera desaceleración */
    box-shadow: -5PX 5PX 10px 0px rgba(0, 0, 0, 0.377);
}
/* 3. Mostramos la línea cuando el mouse está encima */
.nav-link:hover::after {
    transform: scaleX(80%); /* Escalamos la línea a su tamaño completo (100%) */
}
/* ====== navbar mobil ====== */
.nav-bottom {
    display: none;
}
/* ====== ESTILOS PARA EL MENÚ DE PERFIL EN NAVBAR ====== */
/* Contenedor principal para la vista de "sesión iniciada" */
.nav-actions .logged-in {
    display: flex; 
    align-items: center;
    gap: 25px; /* Espacio entre el grupo de iconos y la foto de perfil */
}

/* Contenedor específico para los iconos */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 25px; /* Espacio entre cada icono */
}

/* Estilo para cada uno de los iconos */
.nav-icons img {
    width: 20px; /* Tamaño unificado para los iconos */
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin: 6px;
    vertical-align: middle;
}

.nav-icons img:hover {
    transform: scale(1); /* Efecto al pasar el mouse */
}

.nav-box {
    width: 35px;
    height: 35px;
    border-radius: 30%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease-out;
    outline: none; /* Elimina el contorno de enfoque por defecto */
}
.nav-box:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0);
}
/* --- ANIMACIÓN AL CLICK --- */
.nav-box:active,
.nav-box:focus { /* :focus para accesibilidad con teclado */
    transform: scale(0.9); /* Encoge ligeramente el botón al hacer click */
    background-color: rgba(255, 255, 255, 0.2); /* O un color más intenso */
}

.profile-menu {
    position: relative;
    display: inline-block;
}

/* Estilo para la foto de perfil en la barra de navegación */
.profile-pic {
    display: block; /* Aseguramos que sea visible */
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ffffff;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.profile-pic:hover {
    transform: scale(1.1);
}

/* Contenedor del menú desplegable */
.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    right: 0;
    top: 60px; /* Distancia desde la foto */
    background-color: #3b2a77;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1001;
    overflow: hidden;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 15px;
    transition: background-color 0.2s ease;
}

.dropdown-content a:hover {
    background-color: #5633c6;
}

/* Clase para mostrar el menú con JS */
.dropdown-content.show {
    display: block;
}
/* ====== ESTILOS PARA LA BARRA LATERAL (SIDEBAR) ====== */
.content-wrapper {
    display: flex;
}
:root {
    --sidebar-width-expanded: 260px;
    --sidebar-width-collapsed: 80px;
    --sidebar-bg-color: rgba(78, 7, 92, 0.301);
    --sidebar-text-color: #fcfcfcc0;
    --sidebar-hover-bg: #624c9e;
    --sidebar-active-bg: #ffffff;
    --sidebar-active-text: #000000;
}

.sidebar {
    width: var(--sidebar-width-expanded);
    height: calc(100vh - 65px); /* Altura total menos la altura de la navbar */
    position: fixed; /* Fijo en su lugar */
    top: 65px;
    left: 0;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background-color: var(--sidebar-bg-color);
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 2000;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 12px;
    justify-content: space-between;
    margin-bottom: 30px;
}
.sidebar-toggle {
    background: transparent;
    border: 1px solid var(--sidebar-text-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sidebar-toggle img {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.sidebar-menu {
    flex-grow: 1; /* Empuja el footer hacia abajo */
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    color: var(--sidebar-text-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.sidebar-link:hover {
    background-color: var(--sidebar-hover-bg);
}
.sidebar-link.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}
.sidebar-link img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
}
.sidebar-link.active img {
    filter: invert(100%);
}
.sidebar-link span {
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* --- Estilos para el Footer del Sidebar --- */
.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.user-profile {
    display: flex;
    align-items: center;
}
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.user-details {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.user-name { font-weight: bold; color: white; }
.user-email {
    font-size: 0.8rem; color: rgba(255, 255, 255, 0.829); 
    white-space: nowrap;      /* 1. Evita que el texto salte a la siguiente línea */
    overflow: hidden;         /* 2. Oculta el texto que se desborda del contenedor */
    text-overflow: ellipsis;  /* 3. Añade los "..." al final */
    max-width: 150px;         /* 4. Define un ancho máximo (ajusta este valor si es necesario) */
}

/* ====== ESTADO COLAPSADO DEL SIDEBAR ====== */

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .dark-mode-toggle span,
.sidebar.collapsed .user-details {
    opacity: 0;
    width: 0;
    overflow: hidden;
}
.sidebar.collapsed .sidebar-toggle img {
    transform: rotate(180deg);
}

/* 1. El contenido principal SIEMPRE deja espacio para el sidebar COLAPSADO */
.main-content {
    width: calc(100% - var(--sidebar-width-collapsed));
    margin-left: var(--sidebar-width-collapsed);
    transition: all 0.3s ease;
}

/* ====== contenido del inicio ====== */

.info-inicio {
    max-width: 95%;
    width: 95%;
    display: flex;
    align-items: center;
    gap: 40px; /* Aumenté el gap para que haya espacio entre columnas */
    background-image:url(Imagenes/Recurso\ 4.webp);
    background-size:cover;
    background-position: center;
    padding: 40px; /* Aumenté el padding para más aire alrededor */
    border-radius: 8px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.438);
    margin: 2% auto; /* Centra el contenedor en la página */
}
.texto-inicio {
    width: 50%;
}

.boton-seccions {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two columns of equal width */
    gap: 15px; /* Keeps the space between buttons */
    width: 45%;
    margin-left: auto;
}

h1 {
    color: rgb(56, 11, 82);
    font-size: 35px;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
    word-break: break-word;
    line-height: 1.1;
}
.descripcion {
    color: rgb(79, 28, 109);
    font-size: 1.3rem;
    margin: 15px 0;
    text-align: left;
    line-height: 1.5;
}
.inicio-login-btn {
    background-color: white;
    color: rgb(67, 3, 80);
    display: inline-block;
    margin-top: 10px;
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.171);
}
.inicio-login-btn:hover {
    background-color: #5b1ebd;
    color: #ffffff;
    transform: translateY(-3px);
}

.boton-mentorias, .boton-comunidad, .boton-marketplace, .boton-freelancers {
    display: block;
    background-color: #ebe5ff48;
    color: rgb(83, 25, 131);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: bold;
    /* --- CHANGES START HERE --- */
    font-size: clamp(16px, 3vw, 24px); /* Makes font size responsive */
    padding: clamp(20px, 5vw, 45px) 15px; /* Makes padding responsive */
    /* --- CHANGES END HERE --- */
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.274);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.137);
}
.boton-mentorias:hover, .boton-comunidad:hover, .boton-marketplace:hover, .boton-freelancers:hover {
    color: white;
    background-color: #5533c63b;
}

body {
    margin: 0;
    background-image:linear-gradient(90deg, transparent 0%, #a7a1ff80 100%), url('Imagenes/bg-dark1.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.inicio-zona1 {
    background-color: white;
    padding: 40px;
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
    margin: 2% auto;
}
.inicio-zona1 h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2px;
    line-height: 1.3;
}
.inicio-zona1 p {
    color: rgb(54, 54, 54);
    text-align: center;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 55px;
}
span.triunfar {
    color:rgb(197, 85, 212);
}
.contenedor-de-tarjetas {
    display: grid; /* Cambiamos flex por grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* La magia responsiva */
    gap: 30px; /* Un espacio ligeramente menor para adaptarse mejor */
    list-style: none;
    align-items: stretch;
    padding: 0; /* Aseguramos que no haya padding por defecto de la lista */
    margin: 0;
}
.tarjeta1, .tarjeta2,.tarjeta3,.tarjeta4 {
    background-color: white; /* Fondo blanco */
    height: 100%;
    border: 0.5px, solid rgba(128, 128, 128, 0.103); /* Elimina el borde */
    border-radius: 12px; /* Esquinas más redondeadas (ajusta al gusto) */
    text-align: center;
    padding: 20px; /* Mantén un padding generoso para el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 210px;
    justify-content: flex-start;
    box-shadow: -5px 5px 10px 0px rgba(0, 0, 0, 0.096);
    transition: box-shadow 0.2s ease;
    margin-bottom: 15%;
    color: #444;
}
.icono-tarjeta1 {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    justify-content: center;
    cursor: pointer;
}
.icono-tarjeta2 {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    justify-content: center;
    cursor: pointer;
}

.icono-tarjeta3 {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    justify-content: center;
    cursor: pointer;
}
.tarjeta1 h3, .tarjeta2 h3, .tarjeta3 h3 {
    font-size: 1rem;
    margin-top: 30px; /* Sin margen superior */
    margin-bottom: 0; /* Sin margen inferior, el párrafo lo manejará */
}
.tarjeta1 p, .tarjeta2 p, .tarjeta3 p {
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio restante */
    display: flex; /* Para centrar el texto verticalmente dentro del párrafo si es corto */
    align-items: center; /* Centra el texto verticalmente */
    margin-top: -10px; /* Espacio entre título y párrafo */
    margin-bottom: 0; /* Elimina cualquier margen inferior que pueda empujar el contenido */
}
/* ========= ESTILOS PARA LA SECCIÓN CTA FINAL ========= */

.cta-final-seccion {
    position: relative; /* Necesario para posicionar el fondo difuminado */
    color: white;
    padding: 80px 20px;
    text-align: center;
    overflow: hidden; /* Evita que el blur se salga de los bordes */
}

.cta-final-seccion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(Imagenes/bg-login-dark.png);
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* <-- AQUÍ CONTROLAS QUÉ TAN DIFUMINADO SE VE */
    transform: scale(1.1); /* Evita bordes vacíos por el blur */
    z-index: -1; /* Coloca el fondo detrás del contenido */
}

.cta-final-seccion h2 {
    font-size: 42px;
    margin-bottom: 40px;
}

.cta-cajas {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre las dos cajas */
    flex-wrap: wrap; /* Para que se apilen en pantallas pequeñas */
    backdrop-filter: blur(8px);
}

.cta-caja {
    background: linear-gradient(rgba(255, 255, 255, 0.062), transparent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    flex: 1; /* Permite que las cajas crezcan */
    max-width: 400px; /* Ancho máximo para cada caja */
    display: flex;
    flex-direction: column; /* Alinea el contenido en columna */
}

.cta-caja h3 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 15px;
}

.cta-caja p {
    opacity: 0.8;
    line-height: 1.6;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}

.btn-cta {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px; /* Espacio entre el párrafo y el botón */
    transition: all 0.3s ease;
}

/* Botón principal (para clientes) */
.btn-cta-primario {
    background-color: #c0b7ff;
    color: #2b1a64;
}

.btn-cta-primario:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
}

/* Botón secundario (para freelancers) */
.btn-cta-secundario {
    background-color: transparent;
    border: 2px solid #c0b7ff;
    color: #c0b7ff;
}

.btn-cta-secundario:hover {
    background-color: #c0b7ff;
    color: #2b1a64;
    transform: translateY(-3px);
}

/* ====== contenido de mentorias ====== */
#mentorias-title { /* Estilo para el título de Mentorías */
    width: 100%;
    text-align:center;
    color: rgb(255, 255, 255);
}

.body-mentorias {
    margin:0;
    background-image:linear-gradient(90deg, #75579e77 0%, #eca1ff80 100%), url('Imagenes/bg-1-dark.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}
.mentorias-hero {
    padding: 60px 0 30px 0;
    text-align: center;
    color: white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}
.mentorias-hero h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 16px;
} /* Estilo para el título de la sección de Mentorías */
.mentorias-hero h2 {
    font-size: 22px;
    margin-bottom: 32px;
}
.mentorias-busqueda {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 18px 24px;
    margin-bottom: 32px;
    width: 80%;
    max-width: 900px;
    backdrop-filter: blur(5px);
    margin-left: auto;
    margin-right: auto;
}
.busqueda-input {
    flex: 2;
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    font-size: 18px;
    outline: none;
}
.busqueda-filtro {
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    background: #ffffff;
    font-size: 18px;
    cursor: pointer;
}

.busqueda-area {
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.busqueda-area:hover {
    background: #f4caff;
}

.mentorias-categorias {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.emoji {
    font-size: 18px; /* Tamaño del emoji */
    line-height: 1;
    padding-right: 5px;

}
.categoria{ 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 20px;
    border: none;
    font-size: 17px;
    cursor: pointer;
    background: #fff;
    color: #484848;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease;
}
.categoria:hover {
    background: #6846e9;
    color: #fff;
}
.categoria-activa:hover {
    background: #e26bda;
    color: #fff;
}

/* ====== contenido de comunidad====== */

.body-comunidad {
    margin: 0;
    background-image:linear-gradient(90deg, #75579e77 0%, #eca1ff80 100%), url('Imagenes/bg-1-dark.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}
.comunidad-hero {
    padding: 60px 0 30px 0;
}
.comunidad-hero h1{
    width: 100%;
    text-align: center;
    color: white;
    font-size: 48px;
    margin-bottom: 16px;
}
.comunidad-hero h2 {
    font-size: 22px;
    margin-bottom: 32px;
    color: white;
    text-align: center;
}
.comunidad-panel {
    display: grid;
    grid-template-columns: 0.7fr 2.3fr; /* La columna derecha es más ancha */
    gap: 24px;
    margin: 40px 40px;
    max-width: 1800px;
} /* Contenedor principal con dos columnas */

.comunidad-estadisticas{
    background: #ffffff23;
    color: white;
    padding: 24px 60px 24px 24px;
    -webkit-backdrop-filter: blur(10px);/* Efecto de desenfoque para Safari */
    backdrop-filter: blur(20px);/* Efecto de desenfoque */
    box-shadow: 0 2px 8px rgba(104,70,233,0.08);
    border-radius: 10px;
    margin-bottom: 24px; 
    box-sizing: border-box;
} 
.comunidad-categorias {
    background: #ffffff23;
    border-radius: 10px;
    color: white;
    padding: 24px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 8px rgba(104,70,233,0.08);
    margin-bottom: 24px;
}

.comunidad-estadisticas h3,
.comunidad-categorias h3 {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 500;
}

.comunidad-estadisticas ul,
.comunidad-categorias ul {
    list-style: circle;
    padding: 0;
    margin: 0;
}

.comunidad-estadisticas li,
.comunidad-categorias li {
    display: flex; /* Usamos flexbox para alinear el texto y el número */
    justify-content: space-between;/* Espacio entre el texto y el número */
    font-size: 16px;/* Tamaño de fuente */
    margin-bottom: 10px;/* Espacio entre los elementos de la lista */
}

.categoria-label { /* Estilo base para las etiquetas de categoría */
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.categoria-label.azul {
    background: #e0f0ff;
    color: #3a8dde;
}
.categoria-label.morado {
    background: #f3e8ff;
    color: #a259c6;
}

.comunidad-publicar {
    background: #ffffff20;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(104,70,233,0.08);
    margin-bottom: 24px;
}

.comunidad-publicar textarea {
    width: 97%;/* Ancho completo */
    height: 60px; /* Altura inicial del textarea */
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    margin-bottom: 12px;
    resize: none;
    font-family: 'inter', san sans-serif;
}
.comunidad-publicar h3 {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 500;
    color: white;
    font-family: 'inter', sans-serif;
}
.comunidad-tags { /* Contenedor para los botones de etiquetas */
    display: flex;
    margin-bottom: 12px;
}

.comunidad-tags button { /* Estilo base para los botones de etiquetas */
    background: #f3e8ff;
    color: #a259c6;
    border: none;
    border-radius: 12px;
    padding: 6px 16px;
    margin-right: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.comunidad-tags button:hover {
    background: #ffffff;
}
.comunidad-publicar-btn {
    background: #6846e9;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    float: right;
    transition: background-color 0.3s ease;
}
.comunidad-publicar-btn:hover {
    background: #5633c6;
}
.comunidad-post {
    background: #ffffff20;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(104,70,233,0.08);
    margin-bottom: 24px; 
}

.comunidad-post-header { 
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.comunidad-avatar {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    object-fit: cover;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.comunidad-autor {
    font-weight: 500;
    color: white;
    cursor: pointer;
    margin-right: 6px;
}
.rol-divisor {
    color: #ffffff;
}
.comunidad-rol {
    color: #ffffff;
    background: #700c8f;
    border: none;
    border-radius: 12px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
}

.comunidad-tiempo {
    color: #ffffff;
    font-size: 13px;
    cursor: default;
}

.comunidad-post-categoria {
    background: #e0f0ff;
    color: #3a8dde;
    border: none;
    border-radius: 12px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
}

.comunidad-post h4 {
    margin-top: 24px; /* Espacio arriba del título */
    font-size: 24px;
    color: white;
    font-weight: bold;
}

/* ====== contenido de marketplace====== */
.body-marketplace {
    margin: 0;
    background-image:linear-gradient(90deg, #75579e77 0%, #eca1ff80 100%), url('Imagenes/bg-1-dark.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}
.marketplace-hero{
    padding: 60px 0 30px 0;
}
.marketplace-hero h1{
    width: 100%;
    text-align: center;
    color: white;
    font-size: 48px;
    margin-bottom: 16px;
}
.marketplace-hero h2 {
    font-size: 22px;
    margin-bottom: 32px;
    color: white;
    text-align: center;
}

/* ====== contenido de freelancers====== */
.navbar-freelancers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 20px; /* Añade espacio entre los elementos */
    height: 65px;
    background: rgba(78, 7, 92, 0.301);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Nuevo contenedor para agrupar logo y búsqueda */
.navbar-left {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Permite que el contenedor crezca */
}

/* Contenedor de la barra de búsqueda */
.nav-search {
    display: flex;
    width: 100%;
    max-width: 500px; /* Ajusta el ancho máximo de la barra */
    margin-left: 10px; /* Espacio entre el logo y la barra */
}
.nav-search:hover{
    box-shadow: 0 6px 20px rgba(140, 82, 255, 0.6);
}
.freelancers-search-bar {
    width: 100%;
    border: 2px solid #FFF;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 8px 15px;
    border-radius: 5px 0 0 5px; /* Esquinas redondeadas a la izquierda */
    border-right: none; /* Quitamos el borde derecho para unirlo al botón */
    outline: none;
    color: #333;
    font-size: 1rem;
    box-shadow: 5px 10px 15px 0px #00000030;
}

.freelancers-search-bar-button {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-left: none; /* Quitamos el borde izquierdo */
    padding: 0 15px;
    border-radius: 0 5px 5px 0; /* Esquinas redondeadas a la derecha */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 10px 15px 0px #00000030;
}

.freelancers-search-bar:focus-visible {
    box-shadow: 5px 10px 15px 0px #00000030;
}

.search-button {
    height: 22px; /* Ajusta el tamaño del ícono de búsqueda */
    width: 22px;
}
.navbar-freelancers .nav-search {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px); /* Efecto sutil de desplazamiento */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.navbar-freelancers .nav-search.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* --- Estilos para los nuevos íconos en el menú desplegable (Ocultos en Escritorio) --- */
.dropdown-content .mobile-only-item {
    display: none; /* Oculta estos elementos por defecto (Escritorio) */
    align-items: center;
    padding: 12px 16px;
}

.dropdown-content .mobile-only-item img.menu-icon {
    width: 18px; /* Tamaño del icono en el menú */
    height: 18px;
    margin-right: 10px;
}
/* -------------------------------------------------------------------------- */
/* AJUSTES PARA DISPOSITIVOS MÓVILES (Ejemplo: pantallas de 768px o menos)    */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    
    /* 1. OCULTA LOS ÍCONOS DE LA BARRA DE NAVEGACIÓN PRINCIPAL */
    #desktop-icons {
        display: none !important; /* Oculta el contenedor de notificaciones/mensajes/favs */
    }

    /* 2. MUESTRA LOS ÍCONOS DENTRO DEL MENÚ DESPLEGABLE */
    .dropdown-content .mobile-only-item {
        /* Deshace el 'display: none' del estilo base, haciéndolos visibles */
        display: flex; 
    }

    /* Opcional: Ajustar el espacio de la barra de navegación si es necesario */
    .navbar-freelancers {
        padding: 0 15px; /* Menos padding en móviles */
    }
    
    /* Opcional: Aumentar el tamaño de la foto de perfil en móvil si lo deseas */
    .profile-pic {
        width: 30px;
        height: 30px;
    }
}

.body-freelancers {
    margin: 0;
    background-image:url(Imagenes/bg-dark1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}
.freelancers-hero {
    position: relative; /* Necesario para posicionar el ::before */
    border: 2px solid rgba(255, 255, 255, 0.11);
    padding: 30px 40px;
    border-radius: 15px;
    max-width: 80%; /* Limita el ancho para mejor legibilidad */
    margin: 40px auto 20px auto;
    height: auto;
    overflow: hidden; /* Asegura que el desenfoque no se salga del borde redondeado */
    z-index: 1; /* Asegura que el contenido esté por encima del fondo */
    transition: box-shadow 0.3s ease, transform 0.3s ease, border 0.3s ease;
}

.freelancers-hero::before {
    content: ''; /* Obligatorio para que se muestre el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(Imagenes/Bghome2-noblur.png);
    filter: blur(30px);
    z-index: -1; /* Coloca el fondo detrás del contenido del div */
}
.freelancers-hero:hover{
    box-shadow: 0 6px 20px rgba(140, 82, 255, 0.6);
    border:2px solid #a06aff;
    transform: translateY(-10px);
}
.freelancers-title{
    width: 100%;
    text-align: left;
    margin-left: 10px;
    color: white;
    font-size: 2.5rem;
}
.freelancers-subtitle{
    width: 100%;
    text-align: left;
    margin-left: 10px;
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 30px;
}
@media (max-width: 768px) {
    .freelancers-title{
    font-size: 2rem;
}
}
.freelancers-categories-section {
    padding: 0px 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.freelancers-categories-section h2 {
    color: white;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
}
.freelancers-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 5%;
}
.freelancers-category-card {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none; /* Quita el subrayado del enlace */
    color: white;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}
.freelancers-category-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 20px rgba(140, 82, 255, 0.6);
    border:1px solid #a06aff;
}
.freelancers-category-card img {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.freelancers-category-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #f0eaff; /* Un blanco ligeramente morado */
}
.freelancers-category-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}
/* ====== ESTILOS PARA LA SECCIÓN CTA EN FREELANCERS.HTML ====== */
.freelancers-cta {
    background-image: url(Imagenes/bg-1-dark.png);
    background-color: #1a0f35;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 20px;
    max-width: 80%; /* Limita el ancho para mejor legibilidad */
    margin: 20px auto 20px auto;
    text-align: center;
    color: white;
    border-radius: 15px; /* Bordes ligeramente redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Sombra sutil */
    box-sizing: border-box;
}

.freelancers-cta .cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.freelancers-cta h2 {
    font-size: 2.8rem;
    margin-top: 10px;
    margin-bottom: 25px;
    line-height: 1.2;
    color: #f0eaff; /* Color brillante para el título */
}

.freelancers-cta p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.6;
    color: #ccc;
}

.freelancers-cta .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Para que los botones se envuelvan en pantallas pequeñas */
}

.freelancers-cta .btn-primary,
.freelancers-cta .btn-secondary {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.freelancers-cta .btn-primary {
    background-color: #8c52ff; /* Tu color principal */
    color: white;
    box-shadow: 0 4px 15px rgba(140, 82, 255, 0.4);
}

.freelancers-cta .btn-primary:hover {
    background-color: #a06aff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(140, 82, 255, 0.6);
}

.freelancers-cta .btn-secondary {
    background-color: transparent;
    border: 2px solid #8c52ff;
    color: #8c52ff;
}

.freelancers-cta .btn-secondary:hover {
    background-color: rgba(140, 82, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(140, 82, 255, 0.2);
}

/* Media Queries para botones en móviles */
@media (max-width: 600px) {
    .freelancers-cta h2 {
        font-size: 2rem;
    }
    .freelancers-cta p {
        font-size: 1rem;
    }
    .freelancers-cta .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .freelancers-cta .btn-primary,
    .freelancers-cta .btn-secondary {
        width: 80%; /* Botones de ancho completo */
        margin: 0 auto;
    }
}
/* ====== ESTILOS PARA LA SECCIÓN FAQ EN FREELANCERS.HTML ====== */
.freelancers-section-faq {
    padding: 50px 20px;
    max-width: 70%; /* Limita el ancho para mejor legibilidad */
    margin: -20px auto 20px auto;
    color: white;
}

.freelancers-section-faq h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    color: #f0eaff;
}

.faq-container {
    border-radius: 12px;
    overflow: hidden; /* Asegura que los bordes redondeados se vean bien */
}

.faq-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item:last-child {
    border-bottom: none; /* Sin borde en el último elemento */
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 20px 25px;
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question::after {
    content: '+'; /* Icono de más para indicar que se puede expandir */
    font-size: 1.5rem;
    margin-left: 15px;
    transition: transform 0.3s ease;
}

.faq-question.active::after {
    content: '-'; /* Icono de menos cuando está activo */
    transform: rotate(180deg);
}

.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.faq-answer {
    padding: 0 25px;
    max-height: 0; /* Oculto por defecto */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-answer.open {
    max-height: 200px; /* Suficientemente alto para la mayoría de respuestas */
    padding: 15px 25px 25px;
}

.faq-answer p {
    font-size: 1rem;
    color: #bac6cf;
    line-height: 1.6;
    margin-bottom: 45px;
}
/* ====== ESTILOS ESPECÍFICOS PARA PÁGINAS DE CATEGORÍA (cat-diseno-y-creatividad.html, etc.) ====== */

.body-category-page {
    /* Si quieres un fondo diferente para las páginas de categoría, defínelo aquí */
    background-color: #0c081f; /* Un color de fondo ligeramente diferente */
}

/* --- Category Hero --- */
.category-hero {
    background-image: url('Imagenes/bg-login-dark.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 80%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}

.category-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
    border-radius: 5px; /* El mismo radio que el contenedor principal */
}

.category-hero-design {
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.418) 0%, rgba(0, 0, 0, 0.445) 100%), url('Imagenes/design-hero.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 85%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}
.category-hero-design .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.category-hero-marketing {
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.418) 0%, rgba(0, 0, 0, 0.445) 100%), url('Imagenes/marketing-hero.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 85%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}
.category-hero-marketing .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.category-hero-desarrollo {
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), url('Imagenes/desarrollo-hero.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 85%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}
.category-hero-desarrollo .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.category-hero-negocios {
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url('Imagenes/negocios-hero.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 85%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}
.category-hero-negocios .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.category-hero-crecimiento {
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url('Imagenes/crecimiento-hero.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 85%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}
.category-hero-crecimiento .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.category-hero-musica {
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), url('Imagenes/musica-hero.png');
    background-size: cover;
    background-position: center;
    padding: 100px 20px 80px;
    color: white;
    text-align: center;
    position: relative;
    max-width: 85%;
    margin: 20px auto 20px auto;
    z-index: 1; 
    border-radius: 5px; 
    overflow: hidden;    /* ¡Muy importante! Recorta todo lo que se salga */
    box-shadow: -5px 5px 15px 0px rgba(0, 0, 0, 0.555);
}
.category-hero-musica .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.category-hero-content {
    max-width: 900px;
    margin: 0 auto;

}

.page-category-title {
    font-size: 3.8rem;
    margin-bottom: 20px;
    line-height: 1.1;
    text-align: center;
    color: white;
}

.category-description {
    font-size: 1.3rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cat-nav-search {
    display: flex;
    width: 100%;
    max-width: 500px;
    margin-left: 10px; /* <-- La volvemos a dejar como estaba */
}
/* Centrar SÓLO la barra de búsqueda que está dentro del hero */
.category-hero .cat-nav-search {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Mantenemos el ancho que se ve bien */
}
.cat-nav-search:hover{
    box-shadow: 0 6px 20px rgba(140, 82, 255, 0.6);
}
.freelancers-search-bar:focus-visible {
    box-shadow: 5px 10px 15px 0px #00000030;
}
.navbar-freelancers .cat-nav-search {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px); /* Efecto sutil de desplazamiento */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.navbar-freelancers .cat-nav-search.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Subcategory Filters Section --- */
.subcategory-filters-section {
    max-width: 1200px;
    margin: 60px auto 40px auto;
    padding: 0 20px;
    color: white;
}

.subcategory-filters-section h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #f0eaff;
}

.subcategory-filters-grid {
    display: flex; /* Usamos flexbox para que los botones se ajusten bien */
    justify-content: center;
    flex-wrap: wrap; /* Permite que los botones se envuelvan */
    gap: 12px;
}


/* ====== ESTILOS PARA LOS BOTONES DE FILTRO DE CATEGORÍA ====== */

/* --- Estilo base para cada botón --- */
.filter-btn {
    background-color: rgba(255, 255, 255, 0.9);
    color: #2b1a64;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: -5px 2px 5px rgba(0, 0, 0, 0.281);
    font-family: 'poppins';
}

.filter-btn:not(.active):hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(140, 82, 255, 0.3);
}

.filter-btn.active {
    background-color: #8c52ff; /* Tu color principal morado */
    color: white;
    border-color: #8c52ff;
    box-shadow: 0 4px 15px rgba(140, 82, 255, 0.5);
    transform: translateY(-2px);
}
/* ====== ESTILOS PARA LOS FILTROS AVANZADOS ====== */

.advanced-filters {
    display: flex;
    gap: 40px;
    padding: 20px;
    margin: 0 auto 30px auto;
    max-width: 95%;
    background-color: rgba(44, 42, 58, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
}

.filter-group h4 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: #d1c4e9;
}

.filter-options {
    display: flex;
    gap: 20px;
}

/* --- Estilos para Checkbox y Radio personalizados --- */
.custom-checkbox, .custom-radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.custom-checkbox input, .custom-radio input {
    opacity: 0; /* Ocultamos el input original */
    position: absolute;
}

.checkmark, .radiomark {
    height: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-right: 10px;
    transition: all 0.2s ease;
}

.checkmark { border-radius: 4px; }
.radiomark { border-radius: 50%; }

/* Estilo cuando está seleccionado */
.custom-checkbox input:checked ~ .checkmark,
.custom-radio input:checked ~ .radiomark {
    background-color: #8c52ff;
    border-color: #a06aff;
}

/* Icono de "check" o punto central */
.checkmark:after, .radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after,
.custom-radio input:checked ~ .radiomark:after {
    display: block;
}

/* Check para el checkbox */
.checkmark:after {
    left: 13px;
    top: 9px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Punto para el radio button */
.radiomark:after {
    left: 10px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    transform: translate(-50%, -50%);
}
/* ====== ESTILOS PARA EL ENCABEZADO Y MENÚ DE ORDENAR ====== */

.filters-and-sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(44, 42, 58, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
}

/* 3. AÑADE esta nueva regla para el título: */
.listings-main-title {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.sort-container {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d1c4e9;
}

.sort-container select {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
}

.sort-container select:focus {
    outline: none;
    border-color: #a06aff;
}

/* Estilo para las opciones del desplegable */
.sort-container option {
    background-color: #2b1a64;
    color: white;
}

/* ====== ESTILOS PARA EL MENSAJE DE "NO HAY RESULTADOS" ====== */

.no-results-message {
    text-align: center;
    color: #d1c4e9;
    padding: 60px 20px;
    background-color: rgba(44, 42, 58, 0.5); /* Un fondo sutil */
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    margin-top: 30px;
}

.no-results-message img {
    width: 60px;
    height: 60px;
    opacity: 0.5;
    margin-bottom: 20px;
}

.no-results-message h3 {
    font-size: 1.5rem;
    color: white;
    margin: 0 0 10px 0;
}

.no-results-message p {
    margin: 0;
    font-size: 1rem;
}
/* ====== NUEVOS ESTILOS PARA TARJETAS DE PERFIL (V2) ====== */

.freelancer-listings-section {
    /* Añadimos un poco de espacio para que la sección respire */
    padding: 20px 0;
    margin: 0 auto;
    max-width: 95%;
}

.freelancer-profile-grid {
    display: grid;
    gap: 30px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 250px);
}
/* --- La Tarjeta Principal (ahora es un enlace) --- */
.freelancer-card-v2 {
    display: flex;
    flex-direction: column;
    background-color: #2c2a3a; /* Un fondo oscuro sólido */
    border-radius: 12px;
    overflow: hidden; /* Muy importante para que la imagen no se salga */
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 260px;
}

.freelancer-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: -10px 8px 25px rgba(0, 0, 0, 0.3);
}

/* --- El Banner Superior --- */
.card-banner {
    position: relative;
    height: 120px; /* Altura fija para el banner */
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
}

.fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.fav-btn img {
    width: 18px;
    height: 18px;
}
/* ====== ESTILOS PARA EL BOTÓN DE FAVORITO ACTIVO ====== */

.fav-btn.favorited {
    background-color: #e63946; /* Un color rojo/rosa para indicar "activo" */
    border-color: rgba(255, 255, 255, 0.8);
}

/* Opcional: Pequeña animación de pulso al hacer clic */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.fav-btn.favorited {
    animation: pulse 0.3s ease-in-out;
}
.card-content {
    padding: 10px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

/* Forzamos el texto de los hijos a la izquierda */
.card-header, .card-description, .card-rating {
    text-align: left;
    width: 100%; /* Aseguramos que ocupen todo el ancho para alinearse bien */
}

/* Forzamos la alineación de la foto y el nombre a la izquierda */

.card-header {
    display: flex;
    gap: 12px;
    margin-bottom: 0px;
}
.card-profile-pic {
    border-radius: 50%;
    border: 2px solid white;
}

.card-title {
    display: flexbox;
    align-items: center;
}

.card-title h3 {
    margin: 0;
    font-size: 1rem;
}

.pro-badge {
    background-color: #e5dfff;
    color: #5a29e4;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-block;
}

.card-description {
    font-size: 0.9rem;
    color: #d1d1d1;
    margin: 0;
    line-height: 1.4;
    flex-grow: 1; /* Ocupa el espacio disponible para alinear los ratings */
}

.card-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: -8px;
}
.rating-icon{
    display: flex;
    align-items: center;
}
#card-rating img {
    width: 15px; /* Tamaño unificado para los iconos */
    height: 15px;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 10px;
    vertical-align: middle;
}

.card-rating strong {
    font-size: 0.8rem;
}

.card-rating span {
    color: #a0a0a0;
    font-size: 0.8rem;
}

/* --- El Pie de la Tarjeta (Precio) --- */
.card-footer {
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
    margin-top: auto; /* Se asegura de que el footer se quede abajo */
}

.card-price {
    font-size: 0.9rem;
    color: #a0a0a0;
}

.card-price strong {
    font-size: 1.1rem;
    color: white;
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    #page-category-title {
        font-size: 2.8rem;
    }
    .category-description {
        font-size: 1.1rem;
    }
    .subcategory-filters-section h2,
    .freelancer-listings-section h2 {
        font-size: 1.8rem;
    }
    /* --- 2. Hero de la Categoría --- */
    .category-hero {
        padding: 60px 20px;
    }

    .page-category-title {
        font-size: 2.5rem; /* Reducimos el tamaño del título principal */
    }

    .category-description {
        font-size: 1rem; /* Reducimos el tamaño de la descripción */
    }
    
    /* --- 3. Botones de Filtro de Subcategoría --- */
    .subcategory-filters-section h2 {
        font-size: 1.8rem;
    }

    /* --- 4. Barra de Filtros Avanzados y Ordenamiento --- */
    .filters-and-sort-bar {
        flex-direction: column;
        align-items: stretch; /* Hacemos que los hijos ocupen todo el ancho */
        gap: 25px;
    }

    .filter-group {
        width: 100%; /* Aseguramos que el grupo ocupe el ancho completo */
    }

    /* Apilamos los radio buttons verticalmente */
    .filter-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    /* Ajustamos el contenedor del menú de ordenar */
    .sort-container {
        width: 100%;
        justify-content: space-between; /* Etiqueta a la izq, menú a la der */
        flex-direction: column; /* Apila la etiqueta y el selector */
        align-items: flex-start; /* Alinea los elementos a la izquierda */
        gap: 8px; /* Reduce el espacio para vista móvil */
    }

    /* Evitamos que la etiqueta "Ordenar por:" se parta en dos líneas */
    .sort-container label {
        white-space: nowrap;
    }

    .listings-main-title {
        font-size: 1.5rem;
        text-align: center; /* Centramos el título en móvil */
    }

    /* --- 5. Rejilla de Tarjetas de Perfil --- */
    .freelancer-profile-grid {
        /* Convertimos la rejilla a una sola columna */
        grid-template-columns: 1fr;
        gap: 20px;
        /* Quitamos el 'justify-content' para que ocupe todo el ancho */
        justify-content: initial; 
    }

    /* Forzamos que la tarjeta ocupe todo el ancho disponible en la columna */
    .freelancer-card-v2 {
        width: 100%;
    }

    /* --- 6. Carrusel de subcategorías (si lo tuvieras) --- */
    .popular-subcategories-section {
        margin: 30px auto;
    }

    .carousel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    #page-category-title {
        font-size: 2.2rem;
    }
    .category-description {
        font-size: 0.9rem;
    }
    .category-hero {
        padding: 80px 15px 60px;
    }
}
/* ====== ESTILOS PARA EL BOTÓN "CARGAR MÁS" ====== */

.load-more-container {
    text-align: center;
    padding: 40px 0;
}

.btn-load-more {
    background-color: transparent;
    border: 2px solid #a06aff;
    color: #f0eaff;
    padding: 15px 35px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
/* Contenedor principal de filtros */
#interactive-filters.filters-and-sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no hay espacio */
    gap: 20px; /* Espacio entre Presupuesto y Ordenar por */
    padding: 1rem;
    margin-bottom: 20px;
}


@media (max-width: 768px) {
    /* Contenedor principal de filtros */
    #interactive-filters.filters-and-sort-bar {
        flex-direction: column; /* Apila Presupuesto y Ordenar por */
        align-items: stretch; /* Hace que ambos ocupen todo el ancho */
    }

    /* Asegura que el selector ocupe todo el ancho disponible */
    .sort-container select {
        width: 100%;
    }
}
.btn-load-more:hover {
    background-color: #a06aff;
    color: white;
}

/* Clase para ocultar el botón cuando no hay más resultados */
.btn-load-more.hidden {
    display: none;
}
/* ============================================== */
/* === PÁGINA DE PUBLICACIÓN DE SERVICIO (GIG) === */
/* ============================================== */
/* Nueva clase para forzar la visibilidad de la barra de búsqueda en la navbar */
.navbar-freelancers .nav-search.always-visible,
.navbar-freelancers .cat-nav-search.always-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-content-publication {
    width: calc(100% - var(--sidebar-width-collapsed));
    margin-left: var(--sidebar-width-collapsed);
    transition: all 0.3s ease;
}

.breadcrumbs {
    color: #d1c4e9;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

.publication-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* --- Columna Izquierda --- */
.breadcrumbs, .publication-layout {
    max-width: 100%;
    margin: 20px auto;
    padding: 0 20px;
}
.publication-main-content {
    flex: 2.5;
    color: white;
    margin-left: 20px;
}

.publication-title {
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0 0 15px 0;
    color: white;
}

.publication-freelancer-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.freelancer-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.freelancer-name {
    font-weight: bold;
    color: white;
    text-decoration: none;
}
.freelancer-name:hover {
    text-decoration: underline;
}
.publication-rating img {
    height: 15px;
    width: 15px;
}

.publication-carousel .carousel-main-image {
    width: 100%;
    aspect-ratio: 16 / 9; /*1920x620 */
    object-fit: cover; 
    border-radius: 8px;
}
.publication-carousel .carousel-thumbnails {
    display: flex;
    gap: 10px;
}
/* --- NUEVOS Estilos para Flechas de Galería (estilo index.html) --- */

/* Contenedor de la imagen principal */
.main-image-wrapper {
    position: relative;
    /* Asegura que los hijos (flechas) no se salgan de los bordes redondeados */
    overflow: hidden; 
    border-radius: 8px; /* Debe coincidir con el radio de tu imagen principal */
    margin-bottom: 10px;
}

/* Estilo general para ambas flechas */
.publication-arrow {
    position: absolute;
    top: 0;
    height: 100%;
    width: 25%; /* Hacemos que la zona de hover sea ancha */
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

/* La magia: la flecha se muestra cuando pasas el ratón SOBRE ELLA */
.publication-arrow:hover {
    opacity: 1;
}

/* Posición y degradado para la flecha ANTERIOR */
.publication-arrow.prev {
    left: 0;
    justify-content: flex-start; /* Alinea el icono a la izquierda */
    padding-left: 20px;
    background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
}

/* Posición y degradado para la flecha SIGUIENTE */
.publication-arrow.next {
    right: 0;
    justify-content: flex-end; /* Alinea el icono a la derecha */
    padding-right: 20px;
    background: linear-gradient(to left, rgba(0,0,0,0.6), transparent);
}
.carousel-thumbnails .thumbnail {
    width: 80px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}
.carousel-thumbnails .thumbnail.active,
.carousel-thumbnails .thumbnail:hover {
    border-color: #a06aff;
}

.publication-widget {
    margin-top: 40px;
}

/* --- Columna Derecha (Sidebar de Compra) --- */
.publication-sidebar {
    flex: 1.8; 
    position: sticky;
    top: 85px; /* Altura de navbar + margen */
}

.packages-container {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: #2c2a3a; /* Un fondo oscuro sólido */
}

.package-tabs {
    display: flex;
}

.package-tab {
    flex: 1;
    padding: 15px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.package-tab.active {
    color: white;
    border-bottom-color: #ffffff;
}

.package-details {
    padding: 25px;
    color: white;
}

.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.package-name { margin: 0; }
.package-price { margin: 0; font-size: 1.5rem; font-weight: bold; }
.package-description { color: #ccc; }
.package-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.package-features li {
    margin-bottom: 10px;
    color: #e0e0e0;
}
.package-features .fas.fa-check { color: #ffffff; margin-right: 10px; }
/* Archivo: styles.css */

/* --- Estilo para características NO incluidas en el paquete --- */
.feature-item--unavailable {
    color: #8a8a8a; /* Color de texto más apagado */
    text-decoration: line-through; /* Texto tachado */
    opacity: 0.7;
}

.feature-item--unavailable .fas.fa-times {
    color: #ff5252; /* Un color rojo para el icono de 'X' */
    margin-right: 10px;
}
.btn-purchase {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: rgb(56, 56, 56);
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-purchase:hover {
    background-color: #8c52ff; /* Tu color principal morado */
    color: white;
    border-color: #8c52ff;
    box-shadow: 0 4px 15px rgba(140, 82, 255, 0.5);
    transform: translateY(-2px);
}

/* --- Responsividad para la página de servicio --- */
@media (max-width: 768px) {
    .publication-layout {
        flex-direction: column;
    }
    .publication-sidebar {
        position: static;
        width: 100%;
        margin-top: 30px;
    }
}
/* ============================================== */
/* ===         SECCIÓN DE RESEÑAS             === */
/* ============================================== */

.reviews-section {
    color: white;
}

.reviews-container {
    display: grid;
    grid-template-columns: 0.5fr 2fr; /* Columna izquierda más pequeña que la derecha */
    gap: 40px;
    margin-top: 30px;
}

/* --- Columna Izquierda: Resumen --- */
.reviews-summary {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 15px;
}

.summary-overall {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.overall-rating-number {
    font-size: 2.3rem;
    font-weight: bold;
}

.overall-rating-stars {
    display: flex;
    font-size: 1.0rem;
    color: #ffffff;
}

.total-reviews {
    color: #ccc;
    font-size: 0.9rem;
}

.rating-breakdown {
    list-style: none;
    padding: 0;
}

.rating-breakdown li {
    display: flex;
    align-items: center; /* Ahora esto centrará verticalmente los 3 bloques */
    gap: 10px;
    margin-bottom: 10px;
    color: #ccc;
}

/* NUEVO: Contenedor para el número y la estrella */
.rating-label-group {
    display: flex;          /* Pone el número y la estrella en una fila */
    align-items: center;    /* Los centra verticalmente entre ellos */
    justify-content: flex-end; /* Los alinea a la derecha dentro de su caja */
    gap: 5px;
    width: 50px;            /* Un ancho fijo para que toda la columna se alinee */
    font-size: 0.9rem;
}

/* El ícono de estrella */
.rating-breakdown .fa-star {
    color: #ffffff;
    font-size: 0.8rem;
}

.progress-bar {
    flex-grow: 1; /* Permite que la barra ocupe el espacio disponible */
    height: 8px; /* Define una altura para la barra de progreso */
    background-color: rgba(0, 0, 0, 0.3); /* Color de fondo para el "riel" de la barra */
    border-radius: 4px; /* Redondea las esquinas para que coincidan con la barra interior */
    overflow: hidden; /* Asegura que la barra interior no se salga del contenedor */
    margin-top: 25px; /* Espacio entre el número y la barra */
}

.progress {
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
}

/* --- Columna Derecha: Lista de Reseñas --- */
.review-card {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.review-card:last-child {
    border-bottom: none; /* Quitamos el borde del último comentario */
}
.rating-breakdown span {
    font-size: 0.9rem;
    color: #ccc;
}
.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.review-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.reviewer-info {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    font-weight: bold;
}

.reviewer-country {
    font-size: 0.9rem;
    color: #ccc;
}

.review-rating {
    margin-bottom: 10px;
    color: #ffffff;
    height: 15px;
    width: auto;
}

.review-text {
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 10px;
}

.review-date {
    font-size: 0.8rem;
    color: #aaa;
}


/* --- Responsividad para la sección de reseñas --- */
@media (max-width: 768px) {
    .reviews-container {
        grid-template-columns: 1fr; /* Apilamos las columnas en móvil */
        gap: 30px;
    }
    .reviews-summary {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 30px;
    }
}
/* ====== footer ====== */
.footer-sencillo {
    position: relative; /* Clave para que el ::before se posicione correctamente */
    overflow: hidden;   /* Asegura que el blur no se salga de los bordes */
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}
.footer-sencillo::before {
    content: ''; /* Obligatorio para que el pseudo-elemento se muestre */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(Imagenes/bg-1-dark.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    filter: blur(10px); /* Ajusta el valor para más o menos desenfoque */
    transform: scale(1.1); /* Evita bordes vacíos causados por el blur */
    z-index: -1; 
}
.footer-contenido {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre columnas */
    align-items: flex-start; /* Alinea las columnas en la parte superior */
    flex-wrap: wrap; /* Permite que las columnas se ajusten en pantallas pequeñas */
    max-width: 1200px;
    margin: 0 auto 30px auto; /* Añade margen inferior para separar del copyright */
    padding: 0 20px;
    gap: 20px; /* Espacio entre columnas */
    text-align: left; /* Alinea el texto de todas las columnas a la izquierda */
}

/* Selector que aplica estilos a TODAS las columnas (de la 1 a la 5) */
[class^="footer-columna"] {
    flex: 1; /* Permite que las columnas crezcan y se encojan de forma flexible */
    min-width: 180px; /* Ancho mínimo para cada columna antes de que se reajusten */
}

/* --- ESTILOS PARA LOS TÍTULOS --- */
/* Selecciona el PRIMER párrafo (<p>) de cada columna */
[class^="footer-columna"] p:first-child {
    font-weight: bold; /* Pone el texto en negrita */
    margin-bottom: 15px; /* Crea separación con los textos de abajo */
    opacity: 1; /* Asegura que el título sea totalmente opaco */
}

/* --- ESTILOS PARA LOS TEXTOS DE ABAJO --- */
/* Selecciona todos los párrafos de las columnas y les baja la opacidad */
[class^="footer-columna"] p {
    opacity: 0.8; /* Hace el texto un poco menos opaco */
    margin-top: 0;
    margin-bottom: 8px; /* Espacio ligero entre cada línea */
}

.Logo-footer {
    width: 200px;
    margin-bottom: 15px; /* Espacio entre el logo y los íconos */
}

.footer-rrss {
    display: flex;
    gap: 10px; /* Espacio entre los íconos */
}

.rrss-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.footer-copy {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    opacity: 0.7;
}   
/* ====== pagina de login ====== */
/* ---- Estilos Generales y Fondo ---- */
.login-body {
    background-image: url(Imagenes/bg-login-dark.png);
    background-size: cover;
    background-position: center;
    margin: 0;
    box-sizing: border-box; /* Importante para que el padding no desborde el body */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; 
}

/* ---- NUEVO: Contenedor Principal para el layout de dos columnas ---- */
.main-container {
    display:flex;
    width: 90%;
    margin: 0 auto; /* AÑADE ESTO para centrarlo horizontalmente */
    /* height: 100vh; <-- Asegúrate que esta línea sigue eliminada */
    max-width: 1200px;
    max-height: 720px;
    align-items: center; 
    gap: 20px;
}

/* ---- Lado Izquierdo: Información ---- */
.login-info {
    flex: 1;
    padding: 30px;
    color: white;
    border-radius: 15px;
    background-color: rgba(201, 201, 248, 0.25); /* Color de fondo un poco más oscuro */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    display: flex;
    width: 40%;
    flex-direction: column;
    justify-content: center;
}

.login-info h1 {
    color: rgb(255, 255, 255);
    font-size: 2.5rem; /* Un poco más grande para mayor impacto */
    line-height: 1.2;
    margin-bottom: 0px;
    margin-top: -10px;
}

.login-info p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-top: 10px;
}

/* ---- Lado Derecho: Formulario (Ahora con los estilos de fondo) ---- */
.login-form {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(201, 201, 248, 0.25); /* Color de fondo un poco más oscuro */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* El resto del CSS permanece igual... */

.login-form h2 {
    font-size: 2rem;
    margin: 0 0 10px 0;
    color: #f0f0f0; /* Color de texto más claro */
}

.login-form .subtitle {
    margin: 0 0 30px 0;
    color: #ffffff; /* Color de texto más claro */
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ffffff; /* Color de texto más claro */
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ffffff31; /* Borde más oscuro */
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: rgba(119, 119, 119, 0.2); /* Fondo de input oscuro */
    color: white;
}

.form-group input:focus {
    outline: none;
    border-color: #ffffff9a; /* Color de enfoque morado */
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.forgot-password {
    display: block;
    text-align: right;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #f2ecff; /* Color de enfoque morado */
    text-decoration: none;
}

.btn-login-main {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: #c0ade05e; /* Morado más vibrante */
    color: white;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-login-main:hover {
    background-color: #6c28d949;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff; /* Color divisor más oscuro */
    margin: 30px 0;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ffffff5b; /* Línea divisora más oscura */
}

.divider span {
    padding: 0 15px;
}

.social-login {
    display: flex;
    gap: 15px;
}

.social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #ffffff5b; /* Borde más oscuro */
    border-radius: 8px;
    text-decoration: none;
    color: #ccc; /* Texto más claro */
    font-weight: 500;
    transition: background-color 0.3s ease;
    background-color: rgba(163, 163, 163, 0.2);
}

.social-btn:hover {
    background-color: rgba(255, 255, 255, 0.192);
}

.social-btn i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.social-btn.google i { color: #ffffff; }
.social-btn.apple i { color: #f0f0f0; } /* Apple logo más claro */

.register-link {
    text-align: center;
    margin-top: 30px;
    color: #a0a0a0; /* Texto más claro */
}

.register-link a {
    color: #ffffffcb; /* Color de enfoque morado */
    font-weight: 600;
    text-decoration: none;
}

/* ====== pagina de registro ====== */
.register-body {
    background-image: url(Imagenes/bg-login-dark.png);
    background-size: cover;
    background-position: center;
    margin: 0;
    box-sizing: border-box; /* Importante para que el padding no desborde el body */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; 
}

/* ---- NUEVO: Contenedor Principal para el layout de dos columnas ---- */
.main-container2 {
    display:flex;
    width: 90%;
    margin: 0 auto; /* AÑADE ESTO para centrarlo horizontalmente */
    /* height: 100vh; <-- Asegúrate que esta línea sigue eliminada */
    max-width: 1200px;
    max-height: 720px;
    align-items: center; 
    gap: 20px;
}

/* ---- Lado Izquierdo: Información ---- */
.register-info {
    flex: 1;
    padding: 30px;
    border-radius: 15px;
    color: rgb(255, 255, 255);
    background-color: rgba(201, 201, 248, 0.25); /* Color de fondo un poco más oscuro */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    width: 40%;
    justify-content: center;
}
.register-info h1 {
    color: rgb(255, 255, 255);
    font-size: 2.5rem; /* Un poco más grande para mayor impacto */
    line-height: 1;
    margin-bottom: 0px;
    margin-top: -10px;
}

.register-info p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-top: 10px;
}

/* ---- Lado Derecho: Formulario (Ahora con los estilos de fondo) ---- */
.register-form {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(201, 201, 248, 0.25); /* Color de fondo un poco más oscuro */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* El resto del CSS permanece igual... */

.register-form h2 {
    font-size: 2rem;
    margin: 0 0 10px 0;
    color: #f0f0f0; /* Color de texto más claro */
}

.register-form .subtitle {
    margin: 0 0 30px 0;
    color: #ffffff; /* Color de texto más claro */
}

.form-group2 {
    margin-bottom: 20px;
    position: relative;
}

.form-group2 label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ffffff; /* Color de texto más claro */
}

.form-group2 input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ffffff31; /* Borde más oscuro */
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: rgba(119, 119, 119, 0.2); /* Fondo de input oscuro */
    color: white;
}

.form-group2 input:focus {
    outline: none;
    border-color: #ffffff9a; /* Color de enfoque morado */
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.password-rules {
    display: block;
    text-align: left;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #f2ecff; /* Color de enfoque morado */
}

.btn-register-main {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: #c0ade05e; /* Morado más vibrante */
    color: white;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.btn-register-main:hover {
    background-color: #6c28d949;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff; /* Color divisor más oscuro */
    margin: 30px 0;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ffffff5b; /* Línea divisora más oscura */
}

.divider span {
    padding: 0 15px;
}

.social-register {
    display: flex;
    gap: 15px;
}

.social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid #ffffff5b; /* Borde más oscuro */
    border-radius: 8px;
    text-decoration: none;
    color: #ccc; /* Texto más claro */
    font-weight: 500;
    transition: background-color 0.3s ease;
    background-color: rgba(163, 163, 163, 0.2);
}

.social-btn:hover {
    background-color: rgba(255, 255, 255, 0.192);
}

.social-btn i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.social-btn.google i { color: #ffffff; }
.social-btn.apple i { color: #f0f0f0; } /* Apple logo más claro */

.register-link {
    text-align: center;
    margin-top: 30px;
    color: #d3d0d0; /* Texto más claro */
}

.register-link a {
    color: #ffffffcb; /* Color de enfoque morado */
    font-weight: 600;
    text-decoration: none;
}
.password-container {
    position: relative;
}

.input-wrapper {
    position: relative;
}

/* 2. Centramos el icono perfectamente con el método del transform */
.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%; /* Lo posiciona a la mitad de la altura del contenedor */
    transform: translateY(-50%); /* Lo sube la mitad de su propio tamaño */
    cursor: pointer;
    color: #e6e6e6;
}

/* ====== verificacion de registro ====== */
/* ====== ESTILOS PARA LA PÁGINA DE VERIFICACIÓN ====== */

.verification-body {
    background-image: url(Imagenes/bg-login-dark.png);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    margin: 0;
    box-sizing: border-box; /* Importante para que el padding no desborde el body */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; 
}
/* --- Clase para centrar el contenedor de verificación --- */
.main-container2.is-centered {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    width: 100%;             /* Ocupa todo el ancho */
    height: 100vh;           /* Ocupa todo el alto de la pantalla */
}
.verification-box {
    max-width: 550px;
    padding: 50px;
    text-align: center;
    color: white;
    background-color: rgba(201, 201, 248, 0.25);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.verification-icon {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
}

.verification-box h1 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 15px;
    color: white;
    text-align: center; /* Aseguramos que el h1 esté centrado */
}

.verification-text {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 30px;
}

.verification-text strong {
    font-weight: bold;
    color: #f0eaff;
}

.verification-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-resend {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background-color: #c0ade05e;
    color: white;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-resend:hover {
    background-color: #6c28d949;
}

.link-change-email {
    color: #d1c4e9;
    text-decoration: none;
    font-weight: 500;
}
.link-change-email:hover {
    text-decoration: underline;
}

/* ====== onboarding ====== */
/* ====== ESTILOS PARA LA PÁGINA DE ONBOARDING ====== */
.onboarding-body {
    background-image: url(Imagenes/bg-login-dark.png);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; 
}
.onboarding-container {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    padding: 40px;
    background-color: rgba(201, 201, 248, 0.25);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 30px;
    overflow: hidden;
}
.progress-step {
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.onboarding-step {
    display: none;
}
.onboarding-step.active {
    display: block;
}
.onboarding-step h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}

/* === CORRECCIÓN DE TARJETAS DE ROL === */
.role-selection {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.role-card {
    flex: 1;
    min-width: 250px;
    border-radius: 10px;
    cursor: pointer;
    /* Quitamos el padding de aquí para dárselo al hijo */
    padding: 0; 
    transition: all 0.3s ease-in-out;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-color: transparent; /* El fondo lo controla el hijo */
    overflow: hidden; /* Importante para los bordes redondeados */
}
.role-card input[type="radio"] {
    display: none;
}
.card-content {
    padding: 25px 20px; /* Movimos el padding aquí */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.role-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.role-card:hover .card-content {
    background-color: rgba(255, 255, 255, 0.12);
}
.role-card input[type="radio"]:checked + .card-content {
    background-color: #ffffff;
    color: #2b1a64;
}
.card-content img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    transition: filter 0.3s ease-in-out;
}
.role-card input[type="radio"]:checked + .card-content img {
    filter: none; /* Iconos con su color original al seleccionar */
}
.role-card input[type="radio"]:checked + .card-content h3,
.role-card input[type="radio"]:checked + .card-content p {
    color: #000000;
}
.card-content img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    /* filter: invert(1); */ /* Comentar esta línea si tus iconos son de color y quieres que mantengan su color */
    transition: filter 0.3s ease-in-out;
}
/* Cambia el color del icono cuando la tarjeta está seleccionada */
.role-card input[type="radio"]:checked + .card-content img {
    filter: invert(1);
}
/* Estilos para el formulario de perfil */
.profile-form .form-group {
    margin-bottom: 20px;
}
.profile-form label {
    display: block;
    margin-bottom: 8px;
}
/* Unificamos estilos para inputs y selects */
/* 1. ESTILOS COMUNES para todos los campos del formulario */
.profile-form input,
.profile-form select {
    width: 100%;
    padding: 12px 15px; /* Añadimos un poco más de padding lateral */
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

/* 2. ESTILOS EXCLUSIVOS PARA LA FLECHA del menú desplegable */
.profile-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px; /* Damos más espacio a la derecha para que la flecha no se solape con el texto */
}
/* Opcional: Un pequeño ajuste para el input de archivo */
.profile-form input[type="file"] {
    color: rgba(255, 255, 255, 0.7);
}
.profile-form select option {
    background-color: #1a0649cc; /* Un fondo oscuro consistente con tu paleta */
    color: white;             /* Texto blanco para un buen contraste */
}

/* ====== ESTILOS PARA EL PASO DE FOTO DE PERFIL ====== */

.profile-pic-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.cropper-wrapper {
    flex: 2; /* Ocupa 2/3 del espacio */
    height: 300px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    position: relative;
}

.cropper-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

#image-to-crop {
    display: block;
    max-width: 100%;
    opacity: 0; /* Se hace visible con JS cuando se carga la imagen */
}

.preview-wrapper {
    flex: 1; /* Ocupa 1/3 del espacio */
    text-align: center;
}

.preview-wrapper p {
    font-weight: 500;
    margin-bottom: 10px;
    opacity: 0.8;
}

.profile-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* La clave para el marco circular */
    background-color: #c0b7ff; /* Color de fondo para las iniciales */
    margin: 0 auto;
    overflow: hidden; /* Oculta las partes de la imagen que se salen del círculo */
    border: 3px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#initials-fallback {
    color: #2b1a64;
    font-size: 3.5rem;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

.btn-upload {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-upload:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #c0b7ff;
}
/* Estilos para los tags de intereses */
.interests-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}
.interest-tag input[type="checkbox"] {
    display: none;
}
.interest-tag span {
    display: block;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.interest-tag input[type="checkbox"]:checked + span {
    background-color: #ffffff;
    color: #020202;
    border-color: #ffffff;
    font-weight: bold;
}

/* Estilos para los botones de navegación */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
.btn-next, .btn-back, .btn-finish {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-next, .btn-finish {
    background-color: #ffffff;
    color: #000000;
}
.btn-back {
    background-color: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
/* Estilo para los botones cuando están deshabilitados */
.btn-next:disabled, .btn-finish:disabled {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed; /* Muestra un cursor de "no permitido" */
}

/* ====== Dashboard====== */
.body-dashboard{
    margin: 0;
    background-image:url(Imagenes/bg-dark1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}
.dashboard-bg{
    margin: 15px;
    border-radius: 15px;
    background-color: white;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    padding-left: 0; /* Para alinear con el contenido */;
}

.dashboard-header h1 {
    color: rgb(0, 0, 0);
    font-size: 2.2rem;
    margin: 20px;
}

.view-toggle {
    display: flex;
    align-items: center;
    background-color: rgb(94, 94, 94);
    border-radius: 20px;
    padding: 4px;
}

.view-toggle span {
    color: rgb(255, 255, 255);
    margin-right: 10px;
    padding-left: 12px;
    font-size: 0.9rem;
}

.toggle-btn {
    border: none;
    background-color: transparent;
    color: white;
    padding: 8px 16px;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.toggle-btn.active {
    background-color: #ffffff;
    color: #2b1a64;
}

.dashboard-view {
    padding: 0 20px;
    display: none; /* Ocultamos las vistas por defecto */
}

.dashboard-view.active {
    display: block; /* Mostramos solo la activa */
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.kpi-card {
    background-color: rgb(109, 7, 192);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.281);
}

.kpi-card h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: rgb(255, 255, 255);
}

.kpi-number {
    font-size: 2rem;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin: 0;
}

.freelancer-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 2px solid #c0b7ff;
}

.freelancer-card h3 {
    margin: 0; color: white;
}
.freelancer-card p {
    color: rgba(255, 255, 255, 0.822); margin-top: 5px;
}

.freelancer-card .tags {
    margin-top: 15px;
}

.freelancer-card .tags span {
    display: inline-block;
    background-color: rgb(255, 255, 255);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    margin: 0 5px;
    color: rgb(0, 0, 0);
}

.widget-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.profile-completion-widget, .todo-list-widget {
    background-color: rgb(109, 7, 192);
    border-radius: 12px;
    padding: 25px;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.281);
}

.widget-progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(22, 22, 22, 0.322);
    border-radius: 4px;
    margin: 10px 0 15px;
}

.widget-progress {
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
}
.profile-completion-widget a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
}
.todo-list-widget ul {
    list-style: none; padding: 0; margin-top: 15px;
}
.todo-list-widget li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.541);
}
.todo-due-date {
    color: rgb(255, 255, 255);
}
/* --- Estilos para el nuevo Carrusel de Freelancers --- */

.carousel-section {
    margin-top: 40px; /* Espacio superior */
}

.carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.carousel-header h2 {
    margin: 0;
    color: rgb(0, 0, 0); /* Aseguramos el color del título */
}

.carousel-nav .arrow-btn {
    background-color: rgba(92, 92, 92, 0.356);
    border: 1px solid rgba(0, 0, 0, 0.637);
    color: rgb(0, 0, 0);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

.carousel-nav .arrow-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


.freelancer-grid {
    display: flex; /* Cambiamos de grid a flex */
    flex-wrap: nowrap; /* Evita que las tarjetas se apilen */
    overflow-x: auto; /* Habilita el scroll horizontal */
    gap: 20px;
    padding-bottom: 20px; /* Espacio para la barra de scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.freelancer-grid::-webkit-scrollbar { /* WebKit */
    display: none;
}

.freelancer-card {
    flex: 0 0 240px;
    background-color: rgb(109, 7, 192);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.281);
    margin-bottom: 20px;
}

    /* ============================================= */
    /* === 1. ESTILOS PARA LA BARRA DE NAVEGACIÓN === */
    /* ============================================= */

/* --- ESTILOS PARA LA NUEVA PÁGINA DE PERFIL --- */
.body-profile {
    margin: 0;
    background-image: url(Imagenes/bg-dark1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    padding: 0;
    box-sizing: border-box; /* Asegura que el padding no desborde el body */
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
}
#contenido-profile {
    max-width: 1250px;
    margin: 2%;
    padding: 20px;
    color: white;
}

.profile-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 30px;
    padding: 30px;
    background-color: #2c2a3a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
}
.profile-header::before {
    content: ''; /* Obligatorio para que se muestre el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(Imagenes/Bghome2-noblur.png);
    filter: blur(30px);
    z-index: -1; /* Coloca el fondo detrás del contenido del div */
}
.profile-avatar-wrapper {
    position: relative; /* Asegura que los elementos dentro se posicionen correctamente */
    display: flex; /* Para centrar la imagen y el botón */
    flex-direction: column; /* Para que el botón quede debajo de la imagen */
    align-items: center; /* Centra horizontalmente */
    margin-right: 30px; /* Espacio a la derecha de la imagen */
}
.profile-avatar-wrapper img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #c0b7ff;
}
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    margin-bottom: 20px; /* Espacio entre el avatar y el botón */
}
.profile-header-info h1 {
    margin: 0px 0 10px 0;
    font-size: 2.5rem;
    color: white;
}
/* En styles.css, junto a los otros estilos del perfil */
.profile-username-display {
    font-size: 1.1rem;
    color: #c1b7ffcc; /* Un color de acento para destacarlo */
    font-weight: 500;
    margin: -5px 0 10px 0; /* Ajusta el espaciado vertical */
}
.profile-location-display {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: #d1c4e9;
    opacity: 0.9;
}
/* --- Estilos para los Iconos de Habilidades en el Perfil --- */
.skills-icon-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre cada icono */
    margin-top: 15px; /* Espacio debajo del título/rol */
    margin-bottom: 15px;
}

.skills-icon-container img {
    height: 24px; /* Altura unificada para todos los iconos */
    width: 24px;  /* Ancho unificado */
    border-radius: 50%;
    object-fit: contain; /* Asegura que el icono se vea bien sin deformarse */
}

.profile-header-info .profile-role {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    color: #d1c4e9;
}
.profile-rating-display{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}
.btn-edit-profile {
    background-color: #ffffff; /* O el color que uses para los botones */
    color: #2b1a64;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 30px;
    font-weight: 500;
    margin: 30px 0 0 0;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: -5px 2px 5px rgba(0, 0, 0, 0.281);
    white-space: nowrap; /* Evita que el texto se rompa */
}

.btn-edit-profile:hover {
    background-color: #f9f0ff;
    box-shadow: 0 0 20px 10px rgba(140, 82, 255, 0.3);
}

.profile-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.profile-widget {
    background-color: #2c2a3a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
}


.profile-widget h3 {
    margin: 0 0 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    color: #f0eaff;
}

.interests-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.interests-tags-container .interest-tag {
    background-color: #8c52ff;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.danger-zone {
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    text-align: center;
}
.danger-zone h3 { color: #ff8a80; }
.danger-zone button {
    background-color: #e63946;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
.interests-tags-container .interest-tag {
    background-color: rgba(140, 82, 255, 0.2); /* Fondo semitransparente */
    border: 1px solid rgba(140, 82, 255, 0.6); /* Borde con tu color de acento */
    color: #f0eaff; /* Un blanco ligeramente morado */
    padding: 8px 18px; /* Un poco más de padding */
    font-weight: 500;
    transition: all 0.3s ease;
}

.interests-tags-container .interest-tag:hover {
    background-color: rgba(140, 82, 255, 0.4); /* Cambia de color al pasar el ratón */
    border-color: #c0b7ff;
}

/* --- ESTILOS DE ENFOQUE PERSONALIZADOS (ACCESIBLES) --- */
/* 1. Anulamos el 'outline' por defecto del navegador en el estado :focus */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* 2. Añadimos nuestro propio estilo de enfoque, que es más sutil y elegante.
   Usamos :focus-visible para que se active principalmente con el teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    /* Creamos un "resplandor" exterior con box-shadow que se ve mucho mejor */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.397); 
}

/* ====== ESTILOS PARA LA NUEVA SIDEBAR DE AJUSTES ====== */

/* --- 1. Botón de Flecha en el perfil --- */
.user-profile {
    position: relative; /* Necesario para posicionar la flecha */
}

.settings-arrow-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: background-color 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.settings-arrow-btn img {
    width: 20px;
    height: 20px;
}

.settings-arrow-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- 2. Contenedor principal de la Sidebar de Ajustes --- */
.settings-sidebar {
    position: fixed;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    top: 65px; /* Misma altura que la navbar */
    left: 0;
    background-color: var(--sidebar-bg-color);
    width: var(--sidebar-width-expanded); /* Mismo ancho que la sidebar principal */
    height: calc(100vh - 65px);
    background-color: #9473ff34; /* Un color de fondo ligeramente distinto para diferenciarla */
    z-index: 2001; /* Un z-index más alto para que aparezca por encima de la otra */
    display: flex;
    flex-direction: column;
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

/* Clase que mostrará la sidebar */
.settings-sidebar.is-open {
    transform: translateX(0);
}

/* --- 3. Cabecera y Menú --- */
.settings-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 30px;
}

.settings-sidebar-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.settings-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.settings-sidebar-menu {
    flex-grow: 1; /* Empuja el footer hacia abajo */
}

.settings-link {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    color: var(--sidebar-text-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.settings-link:hover {
    background-color: var(--sidebar-hover-bg);
}

.settings-link img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
}

.settings-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}
/* Oculta la flecha de ajustes cuando la sidebar principal está colapsada */
.sidebar.collapsed .settings-arrow-btn {
    opacity: 0;
    visibility: hidden;
}
/* ====== ESTILOS PARA EL CTA DEL SIDEBAR (LOGOUT) ====== */
#sidebar-logout-cta {
    text-align: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#sidebar-logout-cta .cta-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 15px 0;
    line-height: 1.4;
}

#sidebar-logout-cta .cta-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    color: #2b1a64;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

#sidebar-logout-cta {
    text-align: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden; /* Oculta el contenido mientras se encoge */
    max-height: 150px; /* Una altura máxima suficientemente grande */
    transition: all 0.3s ease-in-out; /* Animará todos los cambios */
}
/* Estilos para el contenedor del perfil que ahora es un enlace */
.profile-link-wrapper {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: inherit; /* Hereda el color del texto para que no se vea azul */
    display: block; /* Hace que el enlace ocupe todo el ancho del contenedor */
    border-radius: 8px; /* Opcional: para que el hover se vea bien */
    padding: 5px; /* Pequeño padding para el efecto hover */
    margin: -5px; /* Contrarresta el padding para mantener el alineamiento */
    transition: background-color 0.2s ease;
}

.profile-link-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Efecto hover sutil */
}
/* Ajusta el placeholder para que no tenga márgenes/paddings que lo desplacen */
.sidebar.collapsed .cta-collapsed-placeholder {
    display: block;
    margin: 0; /* Asegura que no tenga margen */
    padding: 0; /* Asegura que no tenga padding */
    line-height: 1; /* Para ayudar a centrar verticalmente si fuera necesario */
}
/* --- Estilo para el enlace activo en la sidebar de ajustes --- */
.settings-link.active {
    background-color: var(--sidebar-active-bg); /* Fondo blanco */
    color: var(--sidebar-active-text);      /* Texto negro */
    font-weight: bold;
}

.settings-link.active img {
    filter: invert(100%); /* Invierte el color del icono para que se vea negro */
}

/* ====== BLOQUE RESPONSIVE UNIFICADO ====== */

@media (max-width: 768px) {
    /* Barra de Navegación */
    .navbar {
        height: 60px;
        padding: 10px 15px;
    }
    .navbar .nav-links,
    .navbar-freelancers .nav-actions .btn-login,
    .navbar-freelancers .nav-actions .btn-register {
        display: none;
    }
    #Logo-navbar {
        width: 130px;
        margin-right: 10px;
    }
    .btn-login, .btn-register {
        font-size: 10px;
        padding: 10px 14px;
    }
    .nav-bottom {
        padding: 0 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: rgba(98, 12, 156, 0.342);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(126, 63, 63, 0.1);
        z-index: 1001;
    }
    .nav-bottom-link img {
        width: 28px;
        height: 28px;
    }
    .nav-bottom-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 25px;
        text-decoration: none;
        transition: all 0.4s ease-in-out;
    }
    .nav-bottom-link span {
        color: white;
        font-weight: 500;
        font-size: 14px;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width 0.4s ease-in-out, opacity 0.3s ease;
    }
    .nav-bottom-link.active-link {
        background-color: rgba(255, 255, 255, 0.2);
    }
    .nav-bottom-link.active-link span {
        max-width: 100px;
        opacity: 1;
    }
    #desktop-icons {
        display: none !important;
    }
    .dropdown-content .mobile-only-item {
        display: flex; 
    }
    .navbar-freelancers {
        padding: 0 15px;
    }
    .profile-pic {
        width: 30px;
        height: 30px;
    }
    
    /* Contenido General */
    body {
        padding-bottom: 65px;
    }
    .info-inicio {
        max-width: 90%;
        flex-direction: column;
        padding: 25px 20px;
        text-align: center !important;
    }
    .texto-inicio, .boton-seccions {
        width: 100%;
        margin-left: 0;
    }
    .inicio-login-btn {
        margin-bottom: -50px;
    }
    .boton-seccions {
        gap: 10px;
    }
    .info-inicio h1, .info-inicio p {
        text-align: center !important;
    }
    .info-inicio h1 {
        font-size: 28px;
    }
    .info-inicio .descripcion {
        font-size: 16px;
    }
    .boton-mentorias, .boton-comunidad, .boton-marketplace, .boton-freelancers {
        padding: 20px 10px;
        font-size: 15px;
        background-color: rgba(223, 192, 235, 0.6);
    }
    .inicio-zona1 {
        padding: 25px 20px;
    }
    .inicio-zona1 h2 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 2px;
    }
    .carousel-container {
        aspect-ratio: 4 / 2;
        margin: 25px auto;
        width: 90%;
        max-width: 90%;
        border-radius: 10px; 
    }
    .slide-1 {
        background-image: url('Imagenes/cuepointbannermobile.png');
    }
    .slide-2 {
        background-image: url('Imagenes/banner-atrevetemobile.png');
    }
    .slide-3{
        background-image: url('Imagenes/baner-1M-mobile.png');
    }
    /* Comunidad */
    .comunidad-hero {
        padding: 40px 20px 20px 20px;
    }
    .comunidad-hero h1 {
        font-size: 32px;
    }
    .comunidad-hero h2 {
        font-size: 18px;
    }
    .comunidad-panel {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 20px 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .comunidad-estadisticas, .comunidad-categorias, .comunidad-publicar, .comunidad-post {
        padding: 20px;
    }
    .comunidad-estadisticas li {
        display: block;
        text-align: left;
        overflow: hidden;
        margin-bottom: 12px;
    }
    .comunidad-estadisticas li span {
        float: right;
        font-weight: bold;
    }
    .comunidad-post-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .comunidad-post h4 {
        font-size: 20px;
    }
    .comunidad-publicar-btn {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }

    /* Páginas de Categoría */
    .category-hero {
        padding: 60px 20px;
    }
    .page-category-title {
        font-size: 2.5rem;
    }
    .category-description {
        font-size: 1rem;
    }
    .subcategory-filters-section h2 {
        font-size: 1.8rem;
    }
    #interactive-filters.filters-and-sort-bar, .filters-and-sort-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }
    .filter-group {
        width: 100%;
    }
    .filter-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .sort-container select {
        width: 100%;
    }
    .sort-container label {
        white-space: nowrap;
    }
    .listings-main-title {
        font-size: 1.5rem;
        text-align: center;
    }
    .freelancer-profile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        justify-content: initial; 
    }
    .freelancer-card-v2 {
        width: 100%;
    }

    /* Login, Register y Onboarding */
    .main-container, .main-container2 {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        margin: 20px;
        max-height: none;
    }
    .social-login, .social-register {
        flex-direction: column;
    }
    .login-info, .register-info {
        display: none;
    }
    .onboarding-body {
        padding: 20px 0;
    }
    .onboarding-container {
        padding: 40px 20px;
        margin: 0;
        width: 90%;
    }
    .role-selection {
        flex-direction: column;
    }
    .login-form, .register-form {
        width: 100%;
        box-sizing: border-box;
    }
    .login-body, .register-body {
        padding: 0;
        align-items: flex-start;
        padding-top: 20px;
    }
    
    /* Dashboard */
    .sidebar {
        display: none;
    }
    .main-content {
        width: 100%;
        margin-left: 0;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 20px;
    }
    .dashboard-header h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    .view-toggle {
        width: 100%;
        justify-content: space-between;
        padding-right: 12px;
    }
    .view-toggle span {
        margin-right: 0;
    }
    .kpi-grid, .widget-container {
        grid-template-columns: 1fr;
    }
    .freelancer-card {
        flex: 0 0 80%;
        max-width: 250px;
    }
    .freelancer-grid {
        gap: 15px;
    }
    .carousel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .publication-layout {
        flex-direction: column;
    }
    .publication-sidebar {
        position: static;
        width: 100%;
        margin-top: 30px;
    }
    .reviews-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .reviews-summary {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 30px;
    }
    .freelancers-title{
        font-size: 2rem;
    }
    .card-header span{
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    .freelancers-cta h2 {
        font-size: 2rem;
    }
    .freelancers-cta p {
        font-size: 1rem;
    }
    .freelancers-cta .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .freelancers-cta .btn-primary, .freelancers-cta .btn-secondary {
        width: 80%;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .page-category-title {
        font-size: 2.2rem;
    }
    .category-description {
        font-size: 0.9rem;
    }
    .category-hero {
        padding: 80px 15px 60px;
    }
}