:root {
    --navy-deep: #001A33; /* Azul más profundo */
    --navy-light: #002D5A;
    --gold: #C5A059;
    --white: #FFFFFF;
    --text-gray: #CBD5E1;
    --whatsapp: #25D366;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background-color: var(--navy-deep); color: var(--white); line-height: 1.7; }
h1, h2, h3 { font-family: 'Playfair Display', serif; color: var(--gold); }

/* --- NAVEGACIÓN --- */
header {
    position: fixed;
    width: 100%;
    background: rgba(0, 26, 51, 0.98);
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
}
.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: 2px; }
nav a { margin-left: 25px; color: var(--white); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; transition: 0.3s; }
nav a:hover { color: var(--gold); }

/* --- HERO (INICIO) --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    background: linear-gradient(rgba(0,26,51,0.8), rgba(0,26,51,0.8)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Marca de agua integrada en el Hero */
.watermark {
    position: absolute;
    right: 10%;
    width: 40%;
    opacity: 0.08;
    pointer-events: none;
}

.hero-content { z-index: 1; max-width: 800px; }
.hero h1 { font-size: 5rem; line-height: 1; margin-bottom: 25px; color: var(--white); }
.hero h1 span { color: var(--gold); }
.btn-wa {
    background: var(--whatsapp);
    color: white;
    padding: 18px 35px;
    border-radius: 2px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    transition: 0.3s;
}
.btn-wa:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(37,211,102,0.4); }

/* --- SECCIONES --- */
section { padding: 120px 10%; }
.title-group { text-align: center; margin-bottom: 80px; }
.title-group h2 { font-size: 3rem; margin-bottom: 15px; }
.underline { width: 100px; height: 3px; background: var(--gold); margin: 0 auto; }

/* --- ESPECIALIDADES (MÁS GRANDES) --- */
.spec-item {
    background: var(--navy-light);
    padding: 60px;
    margin-bottom: 40px;
    border-left: 8px solid var(--gold);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}
.spec-info h3 { font-size: 2.2rem; margin-bottom: 20px; }
.spec-info p { color: var(--text-gray); font-size: 1.1rem; }
.btn-req { 
    background: transparent; 
    border: 1px solid var(--gold); 
    color: var(--gold); 
    padding: 10px 25px; 
    margin-top: 20px; 
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
}
.req-box { display: none; margin-top: 20px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 4px; }

/* --- DIVISIÓN INMOBILIARIA (EXTENSA) --- */
.inmo-section { background: var(--white); color: var(--navy-deep); }
.inmo-section h2, .inmo-section h3 { color: var(--navy-deep); }
.inmo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.inmo-images { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.inmo-images img { width: 100%; height: 250px; object-fit: cover; border-radius: 4px; }
.inmo-list { margin: 30px 0; }
.inmo-list li { list-style: none; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.inmo-list i { color: var(--gold); }

/* --- EXPERIENCIA LABORAL --- */
.exp-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.stat-card { background: var(--navy-light); padding: 30px; text-align: center; border: 1px solid rgba(197,160,89,0.2); }
.stat-number { font-size: 3rem; font-weight: 700; color: var(--gold); display: block; }

/* Gráfica simple con CSS */
.bar-chart { margin-top: 30px; }
.bar-item { margin-bottom: 15px; }
.bar-label { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.9rem; }
.bar-outer { background: #003366; height: 10px; width: 100%; border-radius: 5px; }
.bar-inner { background: var(--gold); height: 100%; border-radius: 5px; }

/* --- FAQ --- */
.faq-item { background: var(--navy-light); margin-bottom: 10px; border-radius: 4px; }
.faq-q { padding: 25px; cursor: pointer; display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; }
.faq-a { padding: 0 25px 25px; color: var(--text-gray); display: none; }

/* --- FOOTER --- */
footer { padding: 80px 10% 40px; border-top: 1px solid rgba(197,160,89,0.2); text-align: center; }
.social-footer { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
.social-footer a { font-size: 1.5rem; color: var(--gold); transition: 0.3s; }
.social-footer a:hover { color: var(--white); }