* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Baloo 2', cursive;
}

body {
    background: #F7F3EF;
    color: #3A2A1F;
    overflow-x: hidden;
}

/* ===== NAVBAR ===== */
.navbar {
    background: #9B5227;
    color: #fff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 26px;
    font-weight: 700;
    margin-left: 700px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
}

nav a:hover {
    color: #E3735E;
}

/* CTA */
.cta {
    background: #E3735E;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
}

.cta:hover {
    background: #fff;
    color: #9B5227;
}

/* ===== MENU MÓVIL ===== */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

/* ===== SECCIONES ===== */
section {
    padding: 70px 40px;
    display: flex;
    gap: 40px;
}
/* ===== GOTAS DE AGUA - PRODUCCIÓN ===== */
.info-section {
    position: relative;
    overflow: hidden;
}

/* Gota 1 */
.info-section::before {
    content: "";
    position: absolute;

    width: 120px;
    height: 320px;

    background: #875F42;
    opacity: 0.14;

    border-radius: 60% 40% 50% 50%;
    filter: blur(28px);
    transform: rotate(15deg);

    top: 30px;
    left: 5%;

    z-index: 0;
}

/* Gota 2 */
.info-section::after {
    content: "";
    position: absolute;

    width: 90px;
    height: 260px;

    background: #E3735E;
    opacity: 0.16;

    border-radius: 50% 60% 45% 55%;
    filter: blur(25px);
    transform: rotate(-12deg);

    bottom: 40px;
    right: 8%;

    z-index: 0;
}

/* Mantener contenido encima */
.info-section>* {
    position: relative;
    z-index: 1;
}
/* ===== GOTAS DE AGUA - HISTORIA ===== */
.history {
    position: relative;
    overflow: hidden;
}

/* Gota principal */
.history::before {
    content: "";
    position: absolute;

    width: 140px;
    height: 360px;

    background: #9B5227;
    opacity: 0.20;

    border-radius: 55% 45% 60% 40%;
    filter: blur(32px);
    transform: rotate(20deg);

    top: 20px;
    left: 10%;

    z-index: 0;
}

/* Gota secundaria */
.history::after {
    content: "";
    position: absolute;

    width: 100px;
    height: 280px;

    background: #E3735E;
    opacity: 0.20;

    border-radius: 45% 55% 50% 50%;
    filter: blur(26px);
    transform: rotate(-15deg);

    bottom: 30px;
    right: 12%;

    z-index: 0;
}

/* Mantener contenido encima */
.history>* {
    position: relative;
    z-index: 1;
}


.welcome-image {
    width: 50%;
    min-height: 300px;
    overflow: hidden;
    /* evita que la imagen se salga */
}

.welcome-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 CLAVE */
}


.info-image{
width: 50%;
    min-height: 300px;
    overflow: hidden;
    /* evita que la imagen se salga */
}

.info-image img{
width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 CLAVE */
}

.history-image{
width: 50%;
    min-height: 300px;
    overflow: hidden;
    /* evita que la imagen se salga */
}
.history-image img{
    width: 100%;
        height: 100%;
        object-fit: cover;
        /* 🔥 CLAVE */
}

.welcome-text,
.info-text,
.history-text {
    width: 50%;
    justify-content: baseline;
}

h1 span {
    color: #E3735E;
}

.products {
    margin-top: 20px;
    background: #875F42;
    color: #fff;
    padding: 15px;
    border-radius: 10px;
}

/* ===== FOOTER ===== */
footer {
    background: #9B5227;
    color: #fff;
    text-align: center;
    padding: 50px;
}

/* ===== ANIMACIONES SCROLL ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    section {
        flex-direction: column;
    }

    .welcome-text,
    .info-text,
    .history-text,
    .welcome-image,
    .info-image,
    .history-image {
        width: 100%;
    }

    nav {
        display: none;
        width: 100%;
    }

    nav.active {
        display: block;
    }

    nav ul {
        flex-direction: column;
        margin-top: 15px;
    }

    .menu-toggle {
        display: block;
    }
}