/* PALETA DE COLORES CUNA DE LUNA
 *   -------------------------------
 *   #F8F4E3: Arena Suave (Base)
 *   #1A435C: Azul Profundo (Principal)
 *   #4ECDC4: Turquesa Piriápolis (Acento/CTA)
 *   #798086: Gris Piedra (Neutro)
 *   #FFFFFF: Blanco Puro
 */

body {
    font-family: 'Montserrat', sans-serif;
    color: #1A435C; /* Texto principal en Azul Profundo */
    background-color: #F8F4E3; /* Fondo base en Arena Suave */
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Títulos con fuente elegante */
}

/* Colores de la paleta como clases */
.text-azul { color: #1A435C !important; }
.bg-arena { background-color: #F8F4E3 !important; }
.text-turquesa { color: #4ECDC4 !important; }
.btn-turquesa {
    background-color: #4ECDC4;
    border-color: #4ECDC4;
    color: #1A435C;
    transition: background-color 0.3s;
}
.btn-turquesa:hover {
    background-color: #3AA9A1; /* Tono más oscuro de turquesa */
    border-color: #3AA9A1;
    color: #FFFFFF;
}
.text-gris { color: #798086 !important; }


/* --- ESTILOS DE BARRA DE NAVEGACIÓN --- */
#mainNav {
background-color: rgba(255, 255, 255, 0.95); /* Blanco ligeramente transparente */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
#mainNav .navbar-brand {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: #1A435C;
font-size: 1.5rem;
}
#mainNav .nav-link {
color: #1A435C;
font-weight: 500;
transition: color 0.3s;
}
#mainNav .nav-link:hover {
color: #4ECDC4;
}
.btn-cta {
    background-color: #1A435C;
    color: #FFFFFF !important;
    border-radius: 50px; /* Curva para el botón */
    padding: 8px 20px;
    margin-left: 10px;
}
.btn-cta:hover {
    background-color: #4ECDC4;
}

/* --- ESTILOS DE SECCIÓN HERO (Carrusel) --- */
.hero-section {
    height: 90vh; /* Altura de la sección */
    overflow: hidden;
}

.carousel-item {
    height: 90vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Efecto de superposición oscura para que el texto resalte */
    background-color: rgba(26, 67, 92, 0.4);
    background-blend-mode: multiply;
}

.carousel-caption {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 0; /* Eliminar padding por defecto */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.carousel-caption h1, .carousel-caption p {
    color: #FFFFFF;
}

.carousel-caption .btn {
    /* Estilo del botón CTA dentro del Hero */
    background-color: #4ECDC4;
    border: 2px solid #4ECDC4;
    color: #1A435C;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
}
.carousel-caption .btn:hover {
    background-color: transparent;
    border-color: #FFFFFF;
    color: #FFFFFF;
}


/* --- ESTILOS DE CURVAS SUAVES --- */

/* Curva Inferior del Hero */
.curva-inferior {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Altura de la curva */
    background-color: #F8F4E3; /* Color de fondo de la siguiente sección */
    border-top-left-radius: 50% 100px; /* Curva suave izquierda */
    border-top-right-radius: 50% 100px; /* Curva suave derecha */
    z-index: 10;
}

/* Curva en imágenes y tarjetas */
.rounded-curva {
    border-radius: 15px; /* Radio general */
    border-top-left-radius: 50px; /* Curva más pronunciada */
    border-bottom-right-radius: 50px; /* Curva más pronunciada */
}

.card-curva {
    border-radius: 15px;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}
.card-curva:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el mouse */
}

/* Curvas para transiciones de sección (Ejemplo: entre Quien Soy y Invertir) */
.curva-superior-gris {
    margin-top: -100px;
    padding-top: 100px;
    background: #FFFFFF;
    border-top-left-radius: 50% 100px;
    border-top-right-radius: 50% 100px;
}

.curva-inferior-azul {
    padding-bottom: 100px;
    margin-bottom: -100px;
    background: #F8F4E3;
    border-bottom-left-radius: 50% 100px;
    border-bottom-right-radius: 50% 100px;
}

/* --- ESTILOS DE PIE DE PÁGINA --- */
#mainFooter {
background-color: #1A435C; /* Azul Profundo */
}
#mainFooter a {
text-decoration: none;
transition: color 0.3s;
}
#mainFooter a:hover {
color: #4ECDC4 !important; /* Turquesa de acento */
}