/* --- Variables y Estilos Globales --- */
:root {
    --primary-color: #4a148c;
    --secondary-color: #ffab00;
    /* Nuevo color de fondo lila más marcado */
    --background-color: #f0e9f7; 
    --text-color: #333;
    --card-bg: #ffffff;
    --grey-text: #888;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--background-color); /* Aquí se aplica el nuevo color */
    color: var(--text-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}
/* --- HEADER MODERNO --- */
.main-header {
    background: #4a148c; /* Morado base */
    color: white;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LOGO */
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    gap: 10px;
}

.logo-icon {
    font-size: 2rem;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text .title {
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo-text .subtitle {
    font-size: 0.8rem;
    color: #ffab00; /* Dorado */
    font-weight: 600;
}

/* BOTONES INVITADO (LOGIN/REGISTRO) */
.user-actions-guest {
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn-login {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.btn-register {
    background: #ffab00;
    color: #4a148c;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: transform 0.2s;
}

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

/* BOTONES USUARIO LOGUEADO */
.user-actions-logged {
    display: flex;
    gap: 15px;
    align-items: center;
}

.wallet-pill {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255, 171, 0, 0.3);
}

.wallet-pill .balance {
    font-weight: bold;
    color: #ffab00;
}

.user-link {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.btn-logout-head {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.btn-logout-head:hover {
    color: #ff5252;
}

/* RESPONSIVO MÓVIL */
@media (max-width: 600px) {
    .logo-text {
        display: none; /* Escondemos texto del logo en móviles muy pequeños */
    }
    
    .user-name {
        display: none; /* Escondemos nombre, dejamos solo icono */
    }
    
    .wallet-pill {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
    
    .btn-register {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}
/* --- Header y Footer --- */
.main-header, .main-footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 15px 0;
}
.main-header h1 a { font-size: 1.8em; color: white; letter-spacing: 1px; }
.main-header p { margin: 0; color: var(--secondary-color); }
.main-footer { margin-top: 40px; }

/* --- Navegación de Categorías (Opcional) --- */
.category-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.category {
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}
.category.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.category span { font-size: 1.2em; font-weight: bold; }


/* --- Nuevo Grid Estilo Wengo --- */
.wengo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.expert-card-wengo {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expert-card-wengo:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* --- Parte Superior de la Tarjeta --- */
.card-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    color: white;
    padding: 15px;
    border-radius: 11px 11px 0 0;
}
.stat-box {
    width: 40%;
    display: flex;
    flex-direction: column;
}
.stat-box strong { font-size: 1.5em; }
.stat-box span { font-size: 0.8em; opacity: 0.9; }
.stat-box.left { text-align: left; }
.stat-box.right { text-align: right; }

.profile-image-container {
    position: absolute;
    left: 50%;
    top: 15px; /* Misma altura que el padding del .card-top */
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid white;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* Indicador de estado (círculo verde/rojo) */
.profile-image-container .status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
}
.profile-image-container .status.disponible { background-color: #4caf50; }
.profile-image-container .status.ocupado { background-color: #f44336; }


/* --- Cuerpo y Footer de la Tarjeta --- */
.card-body {
    padding: 60px 20px 20px 20px; /* Padding superior para dejar espacio a la foto */
}
.card-body h3 {
    margin: 0 0 5px 0;
    font-size: 1.4em;
    color: var(--primary-color);
}
.card-body .specialty {
    margin: 0 0 15px 0;
    color: var(--grey-text);
}

.testimonial {
    position: relative;
    padding: 0 20px;
    font-style: italic;
    color: #555;
}
.testimonial .quote-start, .testimonial .quote-end {
    position: absolute;
    font-size: 3em;
    color: var(--secondary-color);
    opacity: 0.5;
}
.testimonial .quote-start { top: -10px; left: 0; }
.testimonial .quote-end { bottom: -20px; right: 0; }
.testimonial p { margin: 0; }
.testimonial p strong { font-style: normal; }

.card-footer {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    color: var(--grey-text);
    font-size: 0.9em;
}

/* -- Página de Perfil (estilos anteriores, siguen funcionando) -- */
/* Se pueden retocar si es necesario, pero la base es la misma */
.profile-container { display: flex; flex-wrap: wrap; gap: 30px; background: var(--card-bg); padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.profile-left { flex: 1; min-width: 250px; text-align: center; }
.profile-left img { width: 100%; max-width: 300px; height: auto; border-radius: 50%; border: 5px solid var(--secondary-color); }
.status-box { display: inline-block; margin-top: 20px; padding: 10px 25px; border-radius: 30px; color: white; font-weight: bold; font-size: 1.1em; background: #ccc; }
.status-box.disponible { background-color: #4caf50; }
.status-box.ocupado { background-color: #f44336; }
.profile-right { flex: 2; min-width: 300px; }
.profile-right h2 { font-size: 2.5em; margin-top: 0; color: var(--primary-color); }
.profile-right h3 { color: #555; border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; }
.profile-right p { line-height: 1.7; }
.contact-button-container { margin-top: 30px; }
.contact-button { display: inline-block; background-color: #25D366; color: white; padding: 15px 30px; border-radius: 30px; font-size: 1.2em; font-weight: bold; transition: background-color 0.3s ease; }
.contact-button:hover { background-color: #128C7E; }
.back-link { display: inline-block; margin-top: 25px; color: var(--primary-color); font-weight: bold; }
/* --- ARREGLO SECCIÓN EVALUACIONES --- */

.reviews-container-fixed {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.reviews-header-block {
    text-align: center;
    margin-bottom: 40px;
}

.reviews-header-block h3 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 10px;
}

.reviews-underline {
    width: 60px;
    height: 4px;
    background: var(--secondary-color);
    margin: 0 auto;
    border-radius: 2px;
}

/* LA CARD DEL FORMULARIO */
.evaluacion-card-premium {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 50px;
    border: 1px solid #eee;
}

.eval-card-header {
    text-align: center;
    margin-bottom: 30px;
}

.eval-card-header h4 {
    font-size: 1.4rem;
    color: #333;
    margin: 0;
}

/* GRID DEL FORMULARIO */
.eval-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-bottom: 20px;
}

.eval-group {
    margin-bottom: 20px;
    text-align: left;
}

.eval-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #555;
    font-size: 0.9rem;
}

.eval-group input, .eval-group select, .eval-group textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 1rem;
    background: #f9f9f9;
}

.btn-submit-review {
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn-submit-review:hover {
    background: #310d5e;
    transform: translateY(-2px);
}

/* LISTA DE REVIEWS */
.review-item-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border-left: 6px solid #ddd;
}

.review-item-card.positiva { border-left-color: #4caf50; }
.review-item-card.negativa { border-left-color: #f44336; }

.review-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.eval-badge {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f0f0f0;
}

.review-text {
    font-style: italic;
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
}

.review-footer {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: #999;
}

/* RESPONSIVO */
@media (max-width: 600px) {
    .eval-row { grid-template-columns: 1fr; }
    .evaluacion-card-premium { padding: 25px; }
    .review-item-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* --- ESTILOS PANEL MI CUENTA --- */

.container-cuenta {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.cuenta-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

/* SIDEBAR DEL USUARIO */
.cuenta-sidebar {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    height: fit-content;
}

.user-avatar {
    width: 80px;
    height: 80px;
    background: #4a148c;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 15px;
}

.user-info h2 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: #333;
}

.user-info p {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.user-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.nav-link {
    text-decoration: none;
    color: #555;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.3s;
    font-weight: 600;
    text-align: left;
}

.nav-link:hover {
    background: #f5f5f5;
    color: #4a148c;
}

.nav-link.logout {
    color: #f44336;
    margin-top: 10px;
}

/* SECCIÓN DE LA BILLETERA (WALLET) */
.wallet-card {
    background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(74, 20, 140, 0.3);
    position: relative;
    overflow: hidden;
}

/* Círculos decorativos de fondo */
.wallet-card::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.wallet-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    opacity: 0.9;
}

.wallet-balance {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.wallet-balance span {
    font-size: 1.5rem;
    opacity: 0.8;
}

.wallet-footer {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 30px;
    max-width: 300px;
}

.btn-recarga-main {
    display: inline-block;
    background: #ffab00;
    color: #fff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(255, 171, 0, 0.4);
    transition: transform 0.2s;
}

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

/* INFO EXTRA */
.info-extra {
    margin-top: 30px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.info-extra h3 {
    margin-bottom: 20px;
    color: #333;
}

.steps-mini {
    display: flex;
    gap: 20px;
}

.step {
    flex: 1;
}

.step strong {
    display: block;
    color: #4a148c;
    margin-bottom: 5px;
}

.step p {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}

/* RESPONSIVO */
@media (max-width: 850px) {
    .cuenta-grid {
        grid-template-columns: 1fr;
    }
    
    .wallet-balance {
        font-size: 2.5rem;
    }

    .steps-mini {
        flex-direction: column;
    }
}
/* --- NUEVA PÁGINA DE RECARGA DE SALDO (SOLO EUROS) --- */

.container-recarga {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.recarga-header {
    text-align: center;
    margin-bottom: 50px;
}

.recarga-header h1 {
    color: #4a148c;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.packs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    justify-content: center;
}

.card-credit {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid #eee;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-credit:hover {
    transform: translateY(-5px);
    border-color: #4a148c;
    box-shadow: 0 12px 30px rgba(74, 20, 140, 0.1);
}

.credit-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffab00;
    color: #fff;
    padding: 4px 15px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.credit-icon {
    font-size: 2.5rem;
    color: #ffab00;
    margin-bottom: 15px;
}

.credit-amount small {
    display: block;
    color: #888;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.credit-amount span {
    display: block;
    font-size: 3.2rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
}

.credit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
}

.credit-list li {
    font-size: 0.9rem;
    color: #666;
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

.credit-list li .icon {
    color: #4caf50;
    margin-right: 8px;
}

.price-footer {
    background: #f8f9fa;
    margin: 0 -25px 20px -25px;
    padding: 10px;
    font-weight: 600;
    color: #4a148c;
    font-size: 0.95rem;
}

.btn-buy-credit {
    background: #4a148c;
    color: #fff;
    text-decoration: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: bold;
    transition: background 0.3s;
    display: block;
    margin-top: auto;
}

.btn-buy-credit:hover {
    background: #6a1b9a;
}

/* RESPONSIVO */
@media (max-width: 600px) {
    .credit-amount span {
        font-size: 2.5rem;
    }
}
/* --- MEJORAS PÁGINA PERFIL --- */

.profile-right { display: flex; flex-direction: column; justify-content: space-between; }
.profile-header-main h2 { color: var(--primary-color); font-size: 2.2rem; margin: 0; }
.profile-header-main h3 { color: #666; font-weight: 400; border-bottom: 2px solid var(--secondary-color); display: inline-block; padding-bottom: 5px; margin-bottom: 15px; }
.profile-desc { line-height: 1.8; color: #444; font-size: 1.05rem; }

.separator { border: 0; border-top: 1px solid #eee; margin: 50px 0; }

/* BOTÓN CHAT PREMIUM */
.btn-chat-premium {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffab00 0%, #ff8f00 100%);
    color: white;
    text-decoration: none;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(255, 171, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 20px;
}

.btn-chat-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 171, 0, 0.4);
}

.btn-chat-premium .icon { font-size: 2.5rem; margin-right: 20px; }
.btn-chat-premium strong { display: block; font-size: 1.2rem; letter-spacing: 1px; }
.btn-chat-premium small { opacity: 0.9; font-size: 0.9rem; }

/* ALERTAS LLAMATIVAS (PARA INVITADOS) */
.alert-striking {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    border: 2px dashed #ddd;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.alert-warning { border-color: #ffab00; background: #fffcf5; }
.alert-guest { border-color: #4a148c; background: #f9f6ff; }
.alert-eval-guest { border-color: #4a148c; margin-bottom: 30px; }

.alert-striking p { margin: 5px 0; }
.alert-striking strong { font-size: 1.1rem; color: #333; }

.btn-mini-action {
    display: inline-block;
    background: #ffab00;
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: all 0.3s;
}

.btn-mini-action.secondary { background: #4a148c; margin-left: 10px; }
.btn-mini-action.purple { background: #4a148c; }
.btn-mini-action:hover { opacity: 0.9; transform: scale(1.05); }

.guest-buttons { display: flex; justify-content: center; }

/* MEJORAS LISTA EVALUACIONES */
.eval-meta { margin-top: 10px; display: flex; gap: 15px; border-top: 1px solid #f0f0f0; padding-top: 10px; }
.user-tag, .date-tag { font-size: 0.8rem; color: #888; font-weight: 600; }
.no-eval { text-align: center; color: #999; font-style: italic; padding: 20px; }

.back-link-modern {
    color: #4a148c;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 20px;
    border: 2px solid #4a148c;
    border-radius: 30px;
    transition: all 0.3s;
}

.back-link-modern:hover { background: #4a148c; color: #fff; }

/* Responsive móvil */
@media (max-width: 600px) {
    .btn-chat-premium { flex-direction: column; text-align: center; }
    .btn-chat-premium .icon { margin-right: 0; margin-bottom: 10px; }
    .guest-buttons { flex-direction: column; gap: 5px; }
    .btn-mini-action.secondary { margin-left: 0; }
}
.alert-busy {
    border-color: #f44336; /* Rojo */
    background-color: #fff9f9;
}
.icon-busy {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
}
.alert-busy strong {
    color: #d32f2f;
}
/* HERO SECTION */
.hero {
    height: 500px;
    background: url('https://images.unsplash.com/photo-1501004318641-729e8e26bd05?auto=format&fit=crop&q=80&w=1920'); /* Imagen mística de fondo */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 50px;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(74, 20, 140, 0.8), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 { font-size: 3rem; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-content p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; }

.hero-btns { display: flex; gap: 20px; justify-content: center; }
.cta-main { background: #ffab00; color: #4a148c; padding: 15px 35px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.1rem; transition: transform 0.3s; }
.cta-sec { background: rgba(255,255,255,0.2); color: white; padding: 15px 35px; border-radius: 30px; text-decoration: none; font-weight: bold; border: 1px solid white; transition: 0.3s; }
.cta-main:hover { transform: scale(1.05); }

/* HOW IT WORKS */
/* --- SECCIÓN CÓMO FUNCIONA PREMIUM --- */
.how-it-works-premium {
    background-color: #ffffff;
    padding: 90px 0;
    position: relative;
}

.section-title-modern {
    text-align: center;
    margin-bottom: 60px;
}

.section-title-modern .pre-title {
    color: #ffab00;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.section-title-modern h2 {
    color: #4a148c;
    font-size: 2.5rem;
    margin: 0;
}

.title-line {
    width: 50px;
    height: 4px;
    background: #ffab00;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* CONTENEDOR DE PASOS */
/* ============================================================
   SECCIÓN CÓMO FUNCIONA PREMIUM (LIMPIO Y OPTIMIZADO)
   ============================================================ */

.how-it-works-premium {
    background-color: #f9f8fd; /* Fondo sutil para que resalten las tarjetas blancas */
    padding: 100px 0;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* CONTENEDOR DE FLUJO */
.steps-container-flow {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centra las tarjetas y conectores verticalmente */
    gap: 15px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* LA TARJETA (CARD) */
.step-block {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 40px 25px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(74, 20, 140, 0.06);
    border: 1px solid #f0edf5;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}

/* EFECTO HOVER */
.step-block:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(74, 20, 140, 0.15);
    border-color: #ffab00;
}

/* EL ICONO CIRCULAR */
.step-icon-wrapper {
    width: 90px;
    height: 90px;
    background: #f3e5f5;
    color: #4a148c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
    position: relative;
    transition: 0.3s;
}

.step-block:hover .step-icon-wrapper {
    background: #4a148c;
    color: #ffab00;
    transform: scale(1.1);
}

/* NÚMERO BADGE */
.step-number-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 32px;
    height: 32px;
    background: #ffab00;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(255, 171, 0, 0.3);
}

.step-block h3 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
}

.step-block p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* CONECTORES (Flechas entre pasos) */
.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1c4e9;
    font-size: 1.5rem;
    opacity: 0.7;
    min-width: 30px;
}

/* --- ADAPTACIÓN PARA MÓVIL --- */
@media (max-width: 900px) {
    .how-it-works-premium {
        padding: 60px 0;
    }
    
    .steps-container-flow {
        flex-direction: column; /* Apilar tarjetas */
        align-items: center;
        gap: 20px;
    }
    
    .step-block {
        width: 100%;
        max-width: 340px; /* Tamaño contenido en móvil */
    }

    .step-connector {
        transform: rotate(90deg); /* Flecha hacia abajo */
        margin: 10px 0;
        height: 30px;
    }

    .section-title-modern h2 {
        font-size: 1.8rem;
    }
}
/* HOW IT WORKS */
.how-it-works { padding: 60px 0; background: #fff; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { color: #4a148c; font-size: 2.2rem; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }

.step-card { text-align: center; padding: 30px; }
.step-icon { width: 50px; height: 50px; background: #ffab00; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold; font-size: 1.5rem; }
/* TRUST SECTION */
/* --- SECCIÓN DE CONFIANZA PREMIUM --- */
.trust-section-premium {
    background: linear-gradient(180deg, #ffffff 0%, #f4f0f9 100%);
    padding: 80px 0;
    border-top: 1px solid #eee;
}

.trust-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 0 20px;
}

.trust-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(74, 20, 140, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(74, 20, 140, 0.05);
}

.trust-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(74, 20, 140, 0.12);
}

.trust-icon-circle {
    width: 70px;
    height: 70px;
    background: #f3e5f5; /* Morado muy clarito */
    color: #4a148c; /* Morado principal */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.trust-card:hover .trust-icon-circle {
    background: #4a148c;
    color: #ffab00; /* Cambio a dorado al pasar el ratón */
    transform: rotateY(360deg);
}

.trust-card h4 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.trust-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVO PARA MÓVILES */
@media (max-width: 768px) {
    .trust-section-premium {
        padding: 50px 0;
    }
    .trust-grid-modern {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 20px;
    }
    .trust-card {
        padding: 30px 20px;
    }
}

/* MEJORAS CARDS INDEX */
.price-badge { background: #fdf9ff; border: 1px solid #4a148c; color: #4a148c; display: inline-block; padding: 5px 15px; border-radius: 20px; font-weight: bold; margin-top: 10px; }
.card-footer-index { padding: 15px; background: #f8f9fa; border-top: 1px solid #eee; }
.btn-perfil-view { color: #4a148c; font-weight: bold; font-size: 0.9rem; }

/* RESPONSIVE */
@media (max-width: 600px) {
    .hero-content h1 { font-size: 2rem; }
    .hero-btns { flex-direction: column; }
}
/* --- ESTADÍSTICAS PÚBLICAS EN PERFIL --- */
.expert-stats-public {
    display: flex;
    gap: 15px;
    margin: 15px 0 25px 0;
    flex-wrap: wrap;
}

.stat-item {
    background: #f8f9fa;
    border: 1px solid #eee;
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    border-color: var(--secondary-color);
    background: #fff;
    transform: translateY(-2px);
}

.stat-item i {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.stat-item strong {
    font-size: 1.1rem;
    color: var(--primary-color);
    line-height: 1;
}

.stat-item span {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 3px;
}

/* Ajuste móvil */
@media (max-width: 600px) {
    .expert-stats-public {
        justify-content: center;
    }
    .stat-item {
        flex: 1;
    }
}
/* --- SECCIÓN TOP SOLICITADAS --- */
.top-requested-section {
    padding: 60px 0;
    background-color: #fcfaff;
}

.badge-popular {
    background: #ff5252;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}

.top-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.top-expert-card {
    background: white;
    border-radius: 20px;
    position: relative;
    border: 2px solid #eee;
    transition: all 0.3s ease;
    overflow: hidden;
}

.top-expert-card:hover {
    border-color: #ffab00;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(106, 27, 154, 0.1);
}

.rank-number {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #4a148c;
    color: #ffab00;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    z-index: 5;
    border: 2px solid #ffab00;
}

.top-card-flex {
    display: flex;
    align-items: center;
    padding: 20px;
}

.top-photo-side {
    position: relative;
    flex-shrink: 0;
}

.top-photo-side img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f3e5f5;
}

.top-photo-side .status {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border: 3px solid white;
}

.top-info-side {
    margin-left: 20px;
}

.top-info-side h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #4a148c;
}

.top-specialty {
    font-size: 0.85rem;
    color: #888;
    margin: 3px 0 10px 0;
}

.top-stats-row {
    display: flex;
    gap: 15px;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 10px;
}

.top-stats-row i {
    color: #ffab00;
}

.top-price {
    font-weight: bold;
    color: #4a148c;
    font-size: 0.9rem;
    background: #f3e5f5;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
}

/* RESPONSIVO */
@media (max-width: 600px) {
    .top-card-flex {
        flex-direction: column;
        text-align: center;
    }
    .top-info-side {
        margin-left: 0;
        margin-top: 15px;
    }
    .top-stats-row {
        justify-content: center;
    }
}
/* --- BOTONES DE CONTACTO EXTRA --- */
.btn-contact-visa {
    background: #2c3e50; /* Azul oscuro elegante */
    color: white;
    text-decoration: none;
    padding: 15px;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: 0.3s;
}
.btn-contact-visa:hover { background: #34495e; transform: scale(1.02); }

.btn-contact-whatsapp {
    background: #25D366; /* Verde oficial WhatsApp */
    color: white;
    text-decoration: none;
    padding: 15px;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    display: block;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
    transition: 0.3s;
}
.btn-contact-whatsapp:hover { background: #1ebe57; transform: scale(1.02); }

.btn-contact-visa i, .btn-contact-whatsapp i {
    margin-right: 10px;
    font-size: 1.2rem;
}
/* --- NUEVA ESTRUCTURA DE CONTACTO EN PERFIL --- */
.stats-and-contact-wrapper {
    display: flex;
    gap: 20px;
    margin: 25px 0;
    align-items: flex-start;
}

/* MEDALLAS IZQUIERDAS */
.expert-stats-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 160px;
}

.stat-badge-item {
    background: #fdfbff;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-badge-item i { color: #ffab00; font-size: 1.2rem; }
.badge-content strong { display: block; font-size: 1rem; color: #4a148c; line-height: 1.1; }
.badge-content span { font-size: 0.65rem; text-transform: uppercase; color: #999; font-weight: bold; }

/* CAJA DE ACCESO DIRECTO DERECHA */

/* ============================================================
   SECCIÓN DE CONTACTO DIRECTO Y ESTADÍSTICAS (PERFIL)
   ============================================================ */

/* Contenedor principal que envuelve medallas y caja de contacto */
.stats-and-contact-wrapper {
    display: flex;
    gap: 20px;
    margin: 25px 0;
    align-items: stretch; /* Hace que ambas columnas tengan la misma altura */
}

/* --- BLOQUE IZQUIERDO: MEDALLAS --- */
.expert-stats-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 165px; /* Ancho fijo para las medallas en escritorio */
}

.stat-badge-item {
    background: #fdfbff;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; /* Distribuye el espacio equitativamente */
}

.stat-badge-item i { 
    color: #ffab00; 
    font-size: 1.2rem; 
}

.badge-content strong { 
    display: block; 
    font-size: 1rem; 
    color: #4a148c; 
    line-height: 1.1; 
}

.badge-content span { 
    font-size: 0.65rem; 
    text-transform: uppercase; 
    color: #999; 
    font-weight: 800; 
    letter-spacing: 0.3px;
}

/* --- BLOQUE DERECHO: CAJA DE ACCESO DIRECTO --- */
.direct-access-box {
    flex: 1;
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 18px;
    border: 1px solid #eee;
    max-width: 500px; /* Evita que se estire demasiado en pantallas muy anchas */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.direct-cta-text {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    font-weight: 800;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.direct-cta-text i { 
    color: #ffab00; 
}

/* Contenedor de los botones en paralelo */
.direct-buttons-group {
    display: flex;
    flex-direction: row; /* Botones uno al lado del otro */
    gap: 12px;
}

.btn-direct {
    flex: 1; /* Ambos botones ocupan el mismo ancho */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    min-height: 55px;
    box-sizing: border-box;
}

.btn-direct:hover { 
    transform: translateY(-2px); 
    filter: brightness(1.1);
}

.btn-direct i { 
    font-size: 1.3rem; 
    margin-right: 10px; 
}

.btn-direct .btn-text {
    text-align: left;
}

.btn-direct .btn-text strong { 
    display: block; 
    font-size: 0.85rem; 
    line-height: 1.1; 
    margin-bottom: 1px;
}

.btn-direct .btn-text span { 
    font-size: 0.7rem; 
    opacity: 0.9; 
    display: block; 
}

/* Colores de marca */
.btn-direct.visa { 
    background: #2c3e50; 
    border-bottom: 3px solid #1a252f; 
}

.btn-direct.whatsapp { 
    background: #25D366; 
    border-bottom: 3px solid #128C7E; 
}

/* --- ADAPTACIÓN PARA MÓVILES (RESPONSIVE) --- */



/* Móviles pequeños */
@media (max-width: 480px) {
    .direct-buttons-group {
        flex-direction: column; /* Botones uno sobre otro solo en móviles muy pequeños */
    }
    
    
    
    .badge-content strong { font-size: 0.9rem; }
}
/* Posicionamiento del estado en el Top 3 */
.top-photo-side {
    position: relative;
    display: inline-block;
}

.top-photo-side .status {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid white; /* Crea un efecto de separación con la foto */
    z-index: 2;
}

/* Colores dinámicos */
.status.disponible { background-color: #4caf50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
.status.ocupado { background-color: #f44336; }
/* --- SECCIÓN PROFESIONALIDAD E INDEX --- */
.professionalism-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.pro-flex-container {
    display: flex;
    gap: 50px;
    align-items: center;
}

.pro-text-content {
    flex: 1;
}

.pro-badge {
    background: #f3e5f5;
    color: #4a148c;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
}

.pro-text-content h2 {
    font-size: 2.5rem;
    color: #333;
    line-height: 1.2;
    margin-bottom: 20px;
}

.pro-text-content p {
    color: #666;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* CARDS DE MÉTODOS */
.consultation-methods {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.method-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fdfbff;
    border: 1px solid #eee;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.method-card:hover {
    transform: translateX(10px);
    border-color: #ffab00;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.method-icon {
    width: 60px;
    height: 60px;
    background: #4a148c;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 20px;
    flex-shrink: 0;
}

.method-icon.wa { background: #25D366; }
.method-icon.visa { background: #2c3e50; }

.method-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #333;
}

.method-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
    line-height: 1.4;
}

.method-link {
    display: inline-block;
    margin-top: 8px;
    color: #4a148c;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.85rem;
}

.method-note {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    color: #aaa;
    font-style: italic;
}

/* RESPONSIVO */
@media (max-width: 992px) {
    .pro-flex-container {
        flex-direction: column;
        text-align: center;
    }
    .method-card {
        text-align: left;
    }
    .pro-text-content h2 {
        font-size: 2rem;
    }
}
/* ============================================================
   FIX PARA CENTRADO EN MÓVILES (TODAS LAS TARJETAS)
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Asegurar que el contenedor general no tenga márgenes extra */
    .container {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. CENTRAR SECCIÓN "MÁS SOLICITADAS" (Top 3) */
    .top-grid {
        grid-template-columns: 1fr; /* Una columna obligatoria */
        justify-items: center; /* Centra las cards en el grid */
    }

    .top-expert-card {
        width: 100%;
        max-width: 350px; /* Evita que la card sea demasiado ancha */
        margin: 0 auto;
    }

    .top-card-flex {
        flex-direction: column !important; /* Fuerza vertical */
        align-items: center !important; /* Centra todo el contenido */
        text-align: center;
        padding: 25px 15px;
    }

    .top-info-side {
        margin-left: 0 !important;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra textos y botones internos */
    }

    .top-stats-row {
        justify-content: center;
        width: 100%;
    }

    /* 3. CENTRAR SECCIÓN "GUÍAS ESPIRITUALES" (Grid General) */
    .wengo-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        justify-content: center; /* Centra el grid si hay huecos */
        justify-items: center; /* Centra las tarjetas individualmente */
    }

    .expert-card-wengo {
        width: 100%;
        max-width: 330px; /* Tamaño ideal para móvil */
        margin: 0 auto; /* Centrado manual */
    }

    /* Ajuste del círculo de la foto en la card general para que no se mueva */
    .profile-image-container {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .card-top {
        padding: 15px 10px;
    }

    /* 4. AJUSTE DE TÍTULOS */
    .section-title h2 {
        font-size: 1.8rem;
        padding: 0 10px;
    }
}

/* Fix adicional para pantallas muy pequeñas (iPhone SE, etc) */
@media (max-width: 350px) {
    .expert-card-wengo, .top-expert-card {
        max-width: 100%;
    }
    
    .stat-box strong {
        font-size: 1.1rem;
    }
    
    .stat-box span {
        font-size: 0.7rem;
    }
}
/* ============================================================
   FIX DE CENTRADO PARA PERFILES EN MÓVIL
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Centrar el contenedor de Medallas y Contacto */
    .stats-and-contact-wrapper {
        flex-direction: column;
        align-items: center; /* Centra los hijos horizontalmente */
        text-align: center;
        width: 100%;
    }

    /* 2. Centrar las medallas (Consultas / Verificada) */
    .expert-stats-badges {
        flex-direction: row;
        justify-content: center; /* Centra las medallas en la fila */
        width: 100%;
        gap: 10px;
    }

    .stat-badge-item {
        flex: 0 1 auto; /* Que no se estiren al 100% */
        min-width: 140px;
        justify-content: center;
    }

    /* 3. Centrar la caja gris de contacto directo */
    .direct-access-box {
        width: 100%;
        max-width: 100%; /* Que ocupe el ancho disponible */
        margin: 0 auto;
        box-sizing: border-box;
    }

    .direct-cta-text {
        justify-content: center; /* Centra el texto "Consultas directas" */
    }

    /* 4. Corregir botones VISA y WhatsApp */
    .direct-buttons-group {
        flex-direction: column; /* Uno sobre otro para que no se amontonen */
        align-items: center;
        width: 100%;
    }

    .btn-direct {
        width: 100%; /* Que ocupen todo el ancho de la caja gris */
        max-width: 350px; /* Pero con un límite para que no sean gigantes */
        justify-content: center; /* Centra icono y texto internamente */
        margin: 0 auto;
    }

    /* 5. CENTRAR EL CUADRO DE CHAT (Dotted Box) */
    .chat-cta-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el contenido */
    }

    .alert-striking {
        width: 100%;
        max-width: 350px; /* Alineado con el ancho de los botones de arriba */
        margin: 20px auto !important; /* Forza el centrado horizontal */
        box-sizing: border-box;
    }

    .guest-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .btn-mini-action {
        width: 100%;
        max-width: 250px;
        margin-left: 0 !important; /* Quita el margen que pusimos para PC */
        text-align: center;
    }

    /* Ajuste de textos para que no se vean raros */
    .profile-desc {
        text-align: center;
        padding: 0 10px;
    }
    
    .profile-header-main {
        text-align: center;
    }
}

/* Ajuste fino para móviles muy estrechos */
@media (max-width: 400px) {
    .expert-stats-badges {
        flex-direction: column;
        align-items: center;
    }
    .stat-badge-item {
        width: 100%;
        max-width: 250px;
    }
}
/* ============================================================
   FIX DEFINITIVO PARA CAJAS Y BOTONES EN MÓVIL
   ============================================================ */

@media (max-width: 768px) {
    
    /* Asegurar que nada se salga de la pantalla */
    *, *:before, *:after {
        box-sizing: border-box;
    }

    /* 1. Ajuste del contenedor de puntos (Dotted Box) */
    .alert-striking {
        width: 95% !important; /* Deja un pequeño margen a los lados */
        max-width: 400px; /* Evita que en tablets se vea gigante */
        margin: 20px auto !important; /* Centrado horizontal absoluto */
        padding: 25px 15px !important; /* Espacio interno para que los botones no toquen el borde */
        display: block !important;
        float: none !important;
        border-radius: 15px;
    }

    /* 2. Ajuste de los botones dentro de esas cajas */
    .guest-buttons {
        display: flex !important;
        flex-direction: column !important; /* Uno sobre otro */
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    /* Botones individuales (Iniciar Sesión, Crear Cuenta, Entrar para valorar) */
    .btn-mini-action {
        width: 100% !important;
        max-width: 280px !important; /* Ancho cómodo para el dedo */
        margin: 0 auto !important; /* Centrado */
        display: block !important;
        padding: 14px 10px !important;
        font-size: 1rem !important;
        text-align: center !important;
        border-radius: 30px !important;
    }

    /* Quitar márgenes laterales que puedan estar molestando */
    .btn-mini-action.secondary, 
    .btn-mini-action.purple {
        margin-left: 0 !important;
    }

    /* 3. Ajuste de la sección de valoraciones completa */
    .reviews-container-fixed {
        width: 100% !important;
        padding: 0 15px !important;
        margin: 30px auto !important;
    }

    .lista-evaluaciones-moderna {
        width: 100% !important;
    }

    /* Texto dentro de las alertas */
    .alert-striking p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        padding: 0 5px !important;
    }
}
.legal-page {
    max-width: 800px;
    margin: 50px auto;
    padding: 40px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    line-height: 1.6;
    color: #444;
}
.legal-page h1 { color: #4a148c; margin-bottom: 30px; }
.legal-page h3 { color: #333; margin-top: 25px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
/* --- SECCIÓN EXPERTAS RECIENTES EN SIDEBAR --- */
.recent-experts-section {
    margin-top: 30px;
    text-align: left;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.recent-experts-section h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-left: 5px;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recent-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.3s ease;
    border: 1px solid transparent;
}

.recent-item:hover {
    background: #fdfbff;
    border-color: #eee;
}

.recent-item img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #eee;
}

.recent-item span {
    font-size: 0.9rem;
    color: #444;
    font-weight: 600;
    flex: 1;
}

.recent-item i {
    font-size: 0.7rem;
    color: #ccc;
}

.recent-item:hover i {
    color: var(--primary-color);
}
/* --- ESTILOS HISTORIAL DE CHATS --- */
.tabla-historial {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.tabla-historial th {
    text-align: left;
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.tabla-historial td {
    padding: 15px 10px;
    border-bottom: 1px solid #f9f9f9;
    font-size: 0.9rem;
    color: #444;
}

.btn-ver-chat {
    background: #f3e5f5;
    color: #4a148c;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.8rem;
    transition: 0.3s;
}

.btn-ver-chat:hover {
    background: #4a148c;
    color: white;
}

@media (max-width: 600px) {
    .tabla-historial th:nth-child(3), 
    .tabla-historial td:nth-child(3) {
        display: none; /* Escondemos duración en móviles pequeños para ganar espacio */
    }
}
/* --- BOTÓN DE VIDEO --- */
.btn-play-video {
    position: absolute;
    bottom: -20px; /* Que sobresalga un poco de la foto */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #ff0055, #ff00aa);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    transition: transform 0.3s;
    white-space: nowrap;
}

.btn-play-video:hover {
    transform: translateX(-50%) scale(1.1);
    background: linear-gradient(45deg, #ff00aa, #ff0055);
}

.btn-play-video i { font-size: 1rem; }

/* Ajuste necesario para el wrapper de la foto */
.profile-photo-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 25px; /* Espacio extra para el botón */
}

/* --- MODAL DE VIDEO (Lightbox) --- */
.video-modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.9); /* Fondo oscuro */
    backdrop-filter: blur(5px);
}

.video-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    background: #000;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(255, 171, 0, 0.2);
}

.video-content video {
    width: 100%;
    border-radius: 15px;
    display: block;
}

.close-video {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.close-video:hover { color: #ffab00; }
/* --- FIN BOTÓN DE VIDEO --- */
/* --- NUEVA ESTRUCTURA: 4 MEDALLAS HORIZONTALES --- */
.expert-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas iguales */
    gap: 15px;
    margin: 20px 0 30px 0;
}

.stat-badge-item {
    background: #fdfbff;
    border: 1px solid #eee;
    padding: 15px 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column; /* Pone el icono arriba y el texto abajo */
    align-items: center;
    text-align: center;
    justify-content: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-badge-item:hover {
    border-color: #ffab00;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 171, 0, 0.1);
}

.stat-badge-item i { 
    color: #ffab00; 
    font-size: 1.5rem; 
    margin-bottom: 8px;
}

.badge-content strong { 
    display: block; 
    font-size: 1.15rem; 
    color: #4a148c; 
    line-height: 1.1; 
    margin-bottom: 4px;
}

.badge-content span { 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    color: #888; 
    font-weight: 800; 
    letter-spacing: 0.5px;
}

/* CAJA DE ACCESO DIRECTO (Modificada para estar debajo de las medallas) */
.direct-access-box {
    width: 90%;
    max-width: 100%; /* Reseteamos anchos para que ocupe todo */
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}

/* --- ADAPTACIÓN A MÓVIL --- */
@media (max-width: 768px) {
    .expert-stats-row {
        /* En el móvil, para que no se vean enanas, las ponemos en 2 filas de 2 */
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    
    .stat-badge-item {
        padding: 10px;
    }
}
/* --- FIN NUEVA ESTRUCTURA: 4 MEDALLAS HORIZONTALES --- */