.elementor-279 .elementor-element.elementor-element-f4ee0fd{--display:flex;--min-height:750px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-279 .elementor-element.elementor-element-f4ee0fd:not(.elementor-motion-effects-element-type-background), .elementor-279 .elementor-element.elementor-element-f4ee0fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://suplenaturales.com/wp-content/uploads/2026/07/Nosotros.webp");background-repeat:no-repeat;background-size:cover;}.elementor-279 .elementor-element.elementor-element-206002b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-279 .elementor-element.elementor-element-f4ee0fd{--min-height:410px;}}@media(max-width:767px){.elementor-279 .elementor-element.elementor-element-f4ee0fd{--min-height:184px;}.elementor-279 .elementor-element.elementor-element-f4ee0fd:not(.elementor-motion-effects-element-type-background), .elementor-279 .elementor-element.elementor-element-f4ee0fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:contain;}}/* Start custom CSS for html, class: .elementor-element-36c5466 *//* Configuración del contenedor */
.wrap {
    max-width: 1350px;
    margin: auto;
    padding: 90px 20px;
    --green: #2F9D34;
    --green-light: #73C425;
    --green-soft: #EFFCEF;
    --text: #12451F;
    --text2: #555;
    --bg: #f7fff7;
    font-family: 'Stolzl', sans-serif;
    background: linear-gradient(180deg, #ffffff, #f7fff7);
    color: var(--text2);
}

/* SECCIONES */
.wrap .hero,
.wrap .history,
.wrap .why {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 70px;
    align-items: center;
    margin-bottom: 120px;
}

/* HERO */
.wrap .hero {
    background: #fff;
    border-radius: 45px;
    padding: 60px;
    box-shadow: 0 30px 70px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.05);
}

/* IMÁGENES - Ajuste de bordes y padding reducido */
.wrap .heroimg,
.wrap .placeholder {
    background: transparent; /* Quitamos fondo blanco innecesario */
    min-height: 460px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Asegura que la imagen respete los bordes redondeados */
    padding: 0; /* Eliminamos el borde blanco extra */
    box-shadow: 0 30px 70px rgba(0,0,0,.10), 0 10px 30px rgba(0,0,0,.06);
    transition: .35s;
    border-radius: 40px; /* Bordes redondeados */
}

.wrap .heroimg img,
.wrap .placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wrap .heroimg:hover,
.wrap .placeholder:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 90px rgba(0,0,0,.18);
}

/* BADGE */
.wrap .badge {
    display: inline-block;
    padding: 10px 24px;
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid #CFEBCF;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
}

.wrap .badge.green {
    background: linear-gradient(90deg, #5FC637, #2F9D34);
    color: #fff;
    border: none;
}

/* TÍTULOS */
.wrap h1 { font-size: 50px; line-height: 1.1; color: var(--text); font-weight: 800; margin-bottom: 25px; }
.wrap h2 { font-size: 48px; color: var(--text); font-weight: 800; margin-bottom: 25px; }
.wrap h3 { color: var(--text); font-size: 24px; margin-bottom: 15px; }
.wrap .center { text-align: center; margin-bottom: 50px; }

/* TEXTOS */
.wrap p { font-size: 18px; line-height: 1.9; color: #555; margin-bottom: 20px; }

/* BOTONES */
.wrap .btns { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 35px; }
.wrap .btns a { text-decoration: none; padding: 18px 40px; border-radius: 60px; font-weight: 700; transition: .3s; }
.wrap .btns a:first-child { background: linear-gradient(90deg, #5FC637, #2F9D34); color: #fff; box-shadow: 0 15px 35px rgba(79,181,63,.35); }
.wrap .btns a:first-child:hover { transform: translateY(-4px); }
.wrap .outline { background: #fff!important; color: var(--green)!important; border: 2px solid var(--green); }
.wrap .outline:hover { background: var(--green)!important; color: #fff!important; }

/* CARDS */
.wrap .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 100px; }
.wrap .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 100px; }
.wrap .card { background: #fff; padding: 35px; border-radius: 22px; box-shadow: 0 15px 35px rgba(0,0,0,.06); transition: .35s; }
.wrap .card:hover { transform: translateY(-10px); box-shadow: 0 25px 45px rgba(0,0,0,.10); }
.wrap .icon { font-size: 46px; margin-bottom: 20px; }

/* LISTA */
.wrap ul { list-style: none; padding: 0; }
.wrap li { position: relative; background: #fff; padding: 18px 20px 18px 60px; margin-bottom: 14px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.wrap li::before { content: "✔"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: #4CAF50; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; }

/* COMPROMISO */
.wrap .commit { background: linear-gradient(135deg, #5FC637, #2F9D34); color: #fff; padding: 70px; border-radius: 35px; text-align: center; margin: 100px 0; box-shadow: 0 25px 50px rgba(79,181,63,.25); }
.wrap .commit h2, .wrap .commit p { color: #fff; }

/* ESTADÍSTICAS */
.wrap .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 100px; }
.wrap .stats div { background: #fff; padding: 35px; text-align: center; border-radius: 22px; box-shadow: 0 15px 35px rgba(0,0,0,.06); }
.wrap .counter { font-size: 60px; color: var(--green); font-weight: 800; display: block; margin-bottom: 10px; }

/* CTA */
.wrap .cta { background: #fff; padding: 80px 60px; border-radius: 35px; text-align: center; box-shadow: 0 25px 50px rgba(0,0,0,.08); }

/* RESPONSIVE */
@media(max-width:991px) {
    .wrap .hero, .wrap .history, .wrap .why { grid-template-columns: 1fr; gap: 50px; }
    .wrap .grid2 { grid-template-columns: 1fr; }
    .wrap .grid4 { grid-template-columns: repeat(2, 1fr); }
    .wrap .stats { grid-template-columns: repeat(2, 1fr); }
    .wrap h1 { font-size: 44px; }
    .wrap h2 { font-size: 38px; }
}

@media(max-width:576px) {
    .wrap .grid4, .wrap .stats { grid-template-columns: 1fr; }
    .wrap .hero { padding: 35px; }
    .wrap .heroimg, .wrap .placeholder { min-height: 300px; }
    .wrap .btns { flex-direction: column; }
    .wrap .btns a { width: 100%; text-align: center; }
    .wrap h1 { font-size: 36px; }
    .wrap h2 { font-size: 30px; }
}/* End custom CSS */