:root {
    /* Colores extraídos exactamente de tu logo */
    --azul-acuecar: #183f71;    /* Azul profundo de la gota */
    --verde-acuecar: #7cb342;   /* Verde vibrante de la hoja */
    
    /* Tonos muy suaves para fondos */
    --azul-suave: #eef3f9;
    --verde-suave: #f1f8e9;
    --blanco: #ffffff;
}

/* 1. Fondo general de la página */
body {
    margin: 0;
    padding: 0;
    color: #334155;
    background-color: var(--blanco);
    position: relative;
    overflow-x: hidden; /* Evita scroll horizontal por las formas */
    min-height: 100vh;
    z-index: 0;
}

/* Capa 1: Onda Verde (Inspirada en la hoja) */
body::before {
    content: "";
    position: fixed;
    bottom: -15vh;
    right: -10vw;
    width: 75vw;
    height: 75vh;
    /* Gradiente suave usando el verde de tu logo */
    background: linear-gradient(135deg, var(--verde-suave) 0%, rgba(124, 179, 66, 0.12) 100%);
    border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; 
    z-index: -2;
    box-shadow: inset 10px 10px 30px rgba(255,255,255,0.8); 
    animation: moverOndaVerde 22s infinite alternate ease-in-out;
}

/* Capa 2: Onda Azul (Inspirada en la gota) */
body::after {
    content: "";
    position: fixed;
    bottom: -10vh;
    right: -5vw;
    width: 55vw;
    height: 60vh;
    /* Gradiente suave usando el azul de tu logo */
    background: linear-gradient(135deg, var(--azul-suave) 0%, rgba(24, 63, 113, 0.12) 100%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    z-index: -1;
    box-shadow: 0 10px 40px rgba(24, 63, 113, 0.08);
    animation: moverOndaAzul 18s infinite alternate-reverse ease-in-out;
}

/* Las animaciones que le dan vida (movimiento de agua/viento) */
@keyframes moverOndaVerde {
    0% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; transform: rotate(0deg) scale(1); }
    100% { border-radius: 30% 70% 50% 50% / 60% 40% 60% 40%; transform: rotate(5deg) scale(1.05); }
}

@keyframes moverOndaAzul {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); }
    100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; transform: rotate(-4deg) scale(1.02); }
}

/* 2. El patrón de puntos decorativos usando el azul de la marca */
.patron-puntos {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(rgba(24, 63, 113, 0.15) 15%, transparent 15%);
    background-size: 20px 20px;
    z-index: -1;
}

/* 3. Ajuste a tus contenedores para que no tapen el fondo */
.sectcontact {
    background: transparent; 
    padding: 4rem 0;
    position: relative;
    z-index: 1; 
}

/* Franja de acento (Si la llegas a usar) */
.franja-azul {
    background: linear-gradient(135deg, var(--azul-acuecar) 0%, #2a61a3 100%);
    color: var(--blanco);
    padding: 3rem 0;
    border-radius: 12px; 
    box-shadow: 0 15px 30px rgba(24, 63, 113, 0.2);
}