/* Redesigned style.css - Watercolor Theme */
:root{
 --color-primary:#2F6E52;
 --color-secondary:#F4EFE3;
 --color-accent:#5C8F6B;
 --color-dark:#1F4D3A;
 --color-text:#52646B;
 --color-light:#F8FCFC;
 --color-white:#fff;
 --radius:20px;
 --shadow:0 15px 35px rgba(0,0,0,.08);
 --title: #24463d;
}
*{margin:0;padding:0;box-sizing:border-box}
body
{
    font-family:Poppins,Segoe UI,sans-serif;
    background:
    radial-gradient(circle at 20% 15%,rgba(92,143,107,.18),transparent 25%),
    radial-gradient(circle at 80% 30%,rgba(47,110,82,.15),transparent 30%),
    linear-gradient(#fff,#f8fcfc);
    color:var(--color-text);line-height:1.7
}
.navbar{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid #e8f3f2}
.navbar-brand,.section-title {color:var(--color-dark);font-weight:700}
.nav-link{color:var(--color-text);transition:.3s}
.nav-link:hover,.nav-link.active{color:var(--color-primary)}

.btn-primary-custom{
background:linear-gradient(135deg,#2F6E52,#5C8F6B);
color:#fff;border:none;border-radius:40px;padding:14px 32px;
box-shadow:0 10px 25px rgba(47,110,82,.25);transition:.3s}
.btn-primary-custom:hover{transform:translateY(-3px)}
.section-padding{padding:90px 0}
.section-title:after{
content:"";display:block;width:90px;height:4px;background:var(--color-primary);
margin:18px auto;border-radius:10px}
.card,.card-custom,.service-card,.blog-card{
background:rgba(255,255,255,.82);
backdrop-filter:blur(12px);
border:1px solid rgba(47,110,82,.15);
border-radius:24px;
box-shadow:var(--shadow);
transition:.35s}
.card:hover,.card-custom:hover,.service-card:hover,.blog-card:hover{
transform:translateY(-8px)}
.card-content button{background:var(--color-primary);color:#fff;border:none;border-radius:30px;padding:10px 22px}

.footer{
background:linear-gradient(135deg,#1F4D3A,#2F6E52);
color:#fff;padding:60px 0 20px}
.footer h5{color:#fff}
.social-links a{
display:inline-flex;width:42px;height:42px;border-radius:50%;
align-items:center;justify-content:center;
background:#fff;color:#1F4D3A}
@media(max-width:768px){
.hero-title{font-size:2.2rem}
.section-title{font-size:2rem}
}


/* Add watercolor PNG backgrounds to hero and sections for full effect. */
/*==========================================
=            EFECTOS ACUARELA
==========================================*/

.watercolor-bg{
    position:relative;
    overflow:hidden;
}

.watercolor-bg::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    left:-180px;
    top:-100px;

    background:
        radial-gradient(circle,#8FB68A 0%,rgba(143,182,138,.45) 35%,transparent 70%);

    filter:blur(18px);
    opacity:.35;
    z-index:0;
}

.watercolor-bg::after{

    content:'';
    position:absolute;

    width:450px;
    height:450px;

    right:-140px;
    bottom:-150px;

    background:
        radial-gradient(circle,#2F6E52 0%,rgba(47,110,82,.35) 30%,transparent 70%);

    filter:blur(22px);

    opacity:.25;

}


/*==========================================
=            BOTONES
==========================================*/

.btn-primary-custom{

    background:linear-gradient(135deg,#2F6E52,#5C8F6B);

    border:none;

    color:white;

    border-radius:50px;

    padding:15px 40px;

    font-weight:600;

    transition:.35s;

}

.btn-primary-custom:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 35px rgba(47,110,82,.35);

}


.btn-outline-custom{

    border:2px solid #2F6E52;

    color:#2F6E52;

    border-radius:50px;

    padding:15px 40px;

    background:white;

}

.btn-outline-custom:hover{

    background:#2F6E52;

    color:white;

}


/*==========================================
=            CARDS
==========================================*/

.card{

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(12px);

    transition:.4s;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.card-header{

    background:linear-gradient(
        135deg,
        #F4EFE3,
        #EFE9DA
    );

    height:140px;

    border:none;

}

.card-img{

    width:190px;

}

.card-content{

    padding:30px;

}

.card-content h3{

    color:#1F4D3A;

    font-size:1.5rem;

    margin-bottom:18px;

}

.card-content p{

    color:#708086;

    line-height:1.7;

}


/*==========================================
=            ICONOS
==========================================*/

.card-icon,
.service-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:40px;

    color:#1F4D3A;

    background:linear-gradient(
    135deg,
    #F4EFE3,
    #D9E4C7
    );

}


/*==========================================
=            SERVICES
==========================================*/

.service-card{

    border:none;

    border-radius:25px;

    padding:40px;

    background:white;

    transition:.35s;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.service-card:hover{

    transform:translateY(-8px);

}


/*==========================================
=            TITULOS
==========================================*/

.section-title{

    font-size:3rem;

    color:#1F4D3A;

    margin-bottom:70px;

}

.section-title::after{

    width:90px;

    height:5px;

    border-radius:20px;

    background:#2F6E52;

}


/*==========================================
=            CONTADOR
==========================================*/

.stat-item{

    padding:25px;

}

.stat-item h2{

    color:#1F4D3A;

    font-size:3rem;

}

.stat-item p{

    color:#5f767b;

}


/*==========================================
=            FORMULARIOS
==========================================*/

.form-control{

    border-radius:18px;

    border:1px solid #d7ece9;

    padding:15px;

}

.form-control:focus{

    border-color:#2F6E52;

    box-shadow:0 0 15px rgba(47,110,82,.2);

}

.contact-info{

    background:white;

    border-radius:30px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}


/*==========================================
=            BLOG
==========================================*/

.blog-card img{

    height:250px;

    object-fit:cover;

}

.badge-custom{

    background:#2F6E52;

    color:white;

    border-radius:20px;

    padding:8px 15px;

}
/*==================================================
=            NAVBAR PREMIUM
==================================================*/

.navbar{

    position:sticky;
    top:0;
    z-index:999;

    background:#fff;
    box-shadow:0 4px 20px rgba(31,61,52,.06);
    padding:14px 0;

    transition:.35s;

}

.navbar.scrolled{

    background:rgba(255,255,255,.96);

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    backdrop-filter:blur(14px);

}

.navbar-brand{

    font-size:1.6rem;
    letter-spacing:.5px;
    gap:10px;

}

.brand-icon{

    font-size:1.8rem;
    line-height:1;

}

.brand-text{

    display:flex;
    flex-direction:column;
    line-height:1.15;

}

.brand-name{

    font-size:1.15rem;
    font-weight:700;
    color:#1F3D34;
    letter-spacing:.5px;

}

.brand-sub{

    font-size:.6rem;
    font-weight:600;
    letter-spacing:1.5px;
    color:#5B6763;

}

.navbar-nav .nav-link{

    position:relative;

    padding:.8rem 1rem;
    color:#1F3D34;
    font-weight:500;

}

.btn-nav-cta{

    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#2F6E52;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:11px 24px;
    font-weight:600;
    font-size:.92rem;
    text-decoration:none;
    transition:.3s;
    white-space:nowrap;

}

.btn-nav-cta:hover{

    background:#1F4D3A;
    color:#fff;
    transform:translateY(-2px);

}

@media(max-width:991px){

    .btn-nav-cta{

        margin-top:14px;
        justify-content:center;
        width:100%;

    }

}

.navbar-nav .nav-link::after{

    content:'';

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    border-radius:10px;

    background:#2F6E52;

    transition:.35s;

    transform:translateX(-50%);

}

.navbar-nav .nav-link:hover::after{

    width:80%;

}


/*==================================================
=            FOOTER
==================================================*/

.footer{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
    140deg,
    #1F4D3A,
    #2F6E52
    );

    color:white;

    padding:90px 0 35px;

}

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    top:-200px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(255,255,255,.22),
    transparent 70%
    );

}

.footer::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-200px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(255,255,255,.12),
    transparent 70%
    );

}

.footer h5{

    color:white;

    margin-bottom:25px;

    font-size:1.4rem;

}

.footer a{

    color:white;

    opacity:.9;

    transition:.3s;

}

.footer a:hover{

    opacity:1;

    padding-left:8px;

}

.footer-links li{

    margin-bottom:14px;

}


/*==================================================
=            REDES
==================================================*/

.social-links{

    margin-top:20px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-right:10px;

    background:white;

    color:#1F4D3A;

    transition:.35s;

}

.social-links a:hover{

    transform:translateY(-6px) rotate(8deg);

}


/*==================================================
=            ANIMACIONES
==================================================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.float{

animation:float 4s ease infinite;

}



@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease forwards;

}



@keyframes zoom{

0%{

transform:scale(.9);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

.zoom{

animation:zoom .6s ease;

}


/*==================================================
=            DECORACIONES
==================================================*/

.brush-top{

position:relative;

}

.brush-top::before{

content:"";

position:absolute;

width:600px;

height:250px;

top:-100px;

left:-120px;

background:

radial-gradient(circle,#D9E4C7 0%,rgba(217,228,199,.25) 45%,transparent 80%);

filter:blur(18px);

opacity:.45;

}



.brush-right{

position:relative;

}

.brush-right::after{

content:"";

position:absolute;

width:450px;

height:450px;

right:-180px;

top:30%;

background:

radial-gradient(circle,#8FB68A 0%,rgba(143,182,138,.18) 45%,transparent 75%);

filter:blur(24px);

}


/*==================================================
=            IMAGENES
==================================================*/

img{

transition:.4s;

}

img:hover{

transform:scale(1.03);

}


/*==================================================
=            SECCIONES
==================================================*/

.section-padding{

position:relative;

overflow:hidden;

}

.section-padding:nth-child(even){

background:#FCFEFE;

}


/*==================================================
=            SCROLL
==================================================*/

html{

scroll-behavior:smooth;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#F9F6EF;

}

::-webkit-scrollbar-thumb{

background:#6CCFC6;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#45B9AF;

}


/*==================================================
=            RESPONSIVE
==================================================*/

@media(max-width:992px){

.hero-title{

font-size:2.8rem;

}

.cards{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:768px){

.hero-section{

padding:90px 0;

text-align:center;

}

.hero-title{

font-size:2.2rem;

}

.hero-subtitle{

font-size:1rem;

}

.hero-image{

margin-top:40px;

}

.cards{

grid-template-columns:1fr;

padding:15px;

}

.card{

margin-bottom:25px;

}

.section-title{

font-size:2rem;

}

.stats-container{

flex-direction:column;

gap:30px;

}

.contact-info{

margin-top:35px;

}

.footer{

text-align:center;

}

}



@media(max-width:576px){

.btn-primary-custom{

width:100%;

}

.btn-outline-custom{

width:100%;

margin-top:15px;

}

.hero-title{

font-size:1.9rem;

}

.section-padding{

padding:70px 0;

}

}