/* ==========================================================================
   VARIABLES DE LUJO LUMINOSO (Puedes usarlas en cualquier página)
   ========================================================================== */
:root {
    --oro: #c5a059;
    --oro-suave: #f7f4eb;
    --blanco-lujo: #fbfbfa;
    --blanco-puro: #ffffff;
    --negro-texto: #1a1a1a;
    --gris-sutil: #555555;
    --gris-fondo: #f5f5f3;
}

/* ==========================================================================
   CONFIGURACIÓN BASE & TIPOGRAFÍAS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--blanco-lujo);
    color: var(--negro-texto);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Letras de lectura cursivas y elegantes por petición del usuario */
p, .texto-cursivo {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gris-sutil);
}

/* Títulos principales estilo Alta Costura */
h1, h2, h3, h4 {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--negro-texto);
}

/* ==========================================================================
   MENÚ DE NAVEGACIÓN SUPERIOR REUTILIZABLE
   ========================================================================== */
header.menu-corporativo {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(251, 251, 250, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

header.menu-corporativo .brand-logo {
    height: 55px;
    width: auto;
}

header.menu-corporativo .nav-links {
    display: flex;
    list-style: none;
    gap: 35px;
}

header.menu-corporativo .nav-links a {
    color: var(--negro-texto);
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    transition: color 0.3s;
}

header.menu-corporativo .nav-links a:hover {
    color: var(--oro);
}

/* ==========================================================================
   HERO SECTOR: VIDEO O IMAGEN DE FONDO TENUE
   ========================================================================== */
.video-background-container {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    background-image: url('fondo-tenue.jpg'); /* Imagen de respaldo */
    background-size: cover;
    background-position: center;
    margin-top: 60px;
}

.video-background-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
    filter: grayscale(30%) contrast(95%);
}

/* Capa de veladura blanca para hacer el fondo muy sutil y legible */
.video-overlay-blanco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(251, 251, 250, 0.88);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

/* ==========================================================================
   BOTONES Y BLOQUES DE DISEÑO
   ========================================================================== */
.cta-btn {
    padding: 16px 45px;
    border: 1px solid var(--negro-texto);
    background: var(--negro-texto);
    color: var(--blanco-puro);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.cta-btn:hover {
    background: transparent;
    color: var(--negro-texto);
}

/* Estructura dual: Mensajes sicológicos familiares */
.filosofia-section {
    padding: 90px 10%;
    background-color: var(--blanco-puro);
    text-align: center;
}

.filosofia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    max-width: 1100px;
    margin: 50px auto 0 auto;
}

.bloque-texto {
    padding: 40px;
    background: var(--blanco-lujo);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.03);
    text-align: left;
}

.bloque-texto.vip { border-top: 4px solid var(--negro-texto); }
.bloque-texto.aspirante { border-top: 4px solid var(--oro); }

/* Grid de venta directa */
.adquisicion-section {
    padding: 80px 10%;
    background-color: var(--gris-fondo);
    text-align: center;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 40px auto 0 auto;
}

.card-promo {
    background: var(--blanco-puro);
    padding: 40px;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.precio {
    font-size: 2rem;
    font-weight: 300;
    color: var(--oro);
    margin: 20px 0;
}

/* ==========================================================================
   PORTAL DE LOGEO VIP & INSTAGRAM FEED
   ========================================================================== */
.vip-access-section {
    padding: 100px 20px;
    text-align: center;
}

.login-box {
    max-width: 480px;
    margin: 0 auto;
    background: var(--blanco-puro);
    padding: 50px 40px;
    border: 1px solid rgba(197, 160, 89, 0.25);
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}

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

.input-group label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.input-group input {
    width: 100%;
    padding: 14px;
    background: var(--blanco-lujo);
    border: 1px solid rgba(0,0,0,0.08);
}

/* Feed tipo Instagram */
.instagram-feed-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 90px 20px;
    display: none;
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.insta-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insta-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 25px;
}

.insta-item:hover .insta-overlay { opacity: 1; }

footer {
    padding: 40px;
    text-align: center;
    background: var(--blanco-puro);
    border-top: 1px solid rgba(0,0,0,0.05);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .filosofia-grid, .promo-grid, .insta-grid { grid-template-columns: 1fr; }
    header.menu-corporativo { padding: 15px 20px; }
    header.menu-corporativo .nav-links { display: none; }
}