/* =========================================
   LUNASCORT - ESTILOS PREMIUM (TEMA ROSA Y PLOMO)
   ========================================= */
:root {
    --bg-main: #0d0d10;       /* Negro suave con tono plomo */
    --bg-card: #1a1a1f;       /* Plomo oscuro para las tarjetas */
    --primary-pink: #ff2a7a;  /* Rosa vibrante principal */
    --secondary-pink: #b8004b;/* Rosa oscuro para fondos y botones */
    --plomo-accent: #a8a8b3;  /* Plomo/Plata (Reemplaza al antiguo Dorado) */
    --text-light: #e6e6e6;    /* Blanco grisáceo para leer fácil */
    --input-bg: #050505;      /* Negro puro para los campos de texto */
    --border-color: #383842;  /* Plomo medio para las líneas divisorias */
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background: var(--bg-main); 
    color: var(--text-light); 
    margin: 0; 
}

/* Tipografía Elegante */
h1, h2, h3, .cinzel-font { font-family: 'Cinzel', serif; }

/* Mantengo los nombres de clases originales para no dañar tu HTML */
.text-gold { color: var(--plomo-accent); } /* Ahora pinta color Plomo/Plata */
.text-red { color: var(--primary-pink); }  /* Ahora pinta color Rosa */

/* Contenedores */
.container { max-width: 900px; margin: 0 auto; padding: 20px; padding-bottom: 50px; }

/* Tarjetas */
.card-premium {
    background: var(--bg-card); padding: 25px; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); margin-bottom: 25px;
    border: 1px solid var(--border-color);
}
.card-premium h3 { 
    color: var(--plomo-accent); /* Títulos en Plomo claro */
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 10px; margin-top: 0; 
}

/* Formularios */
.form-control { 
    width: 100%; padding: 12px; background: var(--input-bg); border: 1px solid var(--border-color);
    color: white; border-radius: 5px; box-sizing: border-box; margin-bottom: 15px; font-family: inherit;
    transition: 0.3s;
}
.form-control:focus { 
    outline: none; 
    border-color: var(--primary-pink); 
    box-shadow: 0 0 8px rgba(255, 42, 122, 0.3); /* Resplandor rosa al escribir */
}
.form-label { font-weight: bold; font-size: 0.85em; color: #999; display: block; margin-bottom: 5px; text-transform: uppercase; }

/* Botones */
.btn-primary { 
    background: linear-gradient(45deg, var(--secondary-pink), var(--primary-pink));
    color: white; border: none; padding: 12px 20px; border-radius: 30px; 
    font-weight: bold; cursor: pointer; transition: 0.3s; text-transform: uppercase; display: inline-block; text-align: center; text-decoration: none;
}
.btn-primary:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(255, 42, 122, 0.5); /* Sombra rosa */
}

/* El antiguo botón VIP/Dorado ahora es Plomo Metálico */
.btn-gold {
    background: linear-gradient(45deg, var(--plomo-accent), #686875);
    color: white; border: none; padding: 12px 20px; border-radius: 30px; 
    font-weight: bold; cursor: pointer; transition: 0.3s; text-transform: uppercase; display: inline-block; text-align: center; text-decoration: none;
}
.btn-gold:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(168, 168, 179, 0.4); 
}

/* Mensajes / Alertas */
.alert { padding: 15px; border-radius: 5px; text-align: center; margin-bottom: 20px; border: 1px solid transparent; }
.alert-success { background: rgba(40, 167, 69, 0.1); border-color: #28a745; color: #28a745; }
.alert-error { background: rgba(220, 53, 69, 0.1); border-color: #dc3545; color: #dc3545; }

/* =========================================
   BARRA DE NAVEGACIÓN GLOBAL (NAVBAR)
   ========================================= */
.navbar { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 15px 20px; background: rgba(13, 13, 16, 0.95); 
    border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; 
}
.logo { 
    font-family: 'Cinzel', serif; font-size: 1.8em; font-weight: bold; 
    color: var(--primary-pink); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; 
}
.logo span { color: white; }
.nav-links { display: flex; gap: 15px; align-items: center; }
.nav-links a { color: var(--text-light); text-decoration: none; font-size: 0.9em; font-weight: 600; transition: 0.3s; }
.nav-links a:hover { color: var(--primary-pink); }
.btn-nav { background: var(--primary-pink); padding: 8px 15px; border-radius: 20px; color: white !important; }

@media (max-width: 600px) { 
    .nav-links a:not(.btn-nav) { display: none; } 
}
/* Estilos para el catálogo de chicas asociadas a la agencia */
.agencia-modelos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.modelo-agencia-card {
    text-align: center;
    text-decoration: none;
    color: var(--text-light);
}
.modelo-agencia-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border-color);
}
.pagos-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px;
}