/* =====================================================
   CASA GREEN — REFERENCIA PREMIUM
   Diseño moderno / elegante / corporativo
===================================================== */

.referencia-section{
    position: relative;
    width: 100%;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* ===============================
   TOP SECTION
================================== */

.referencia-section .ref-top{
    text-align:center;
    padding:90px 20px 40px;
}

.referencia-section .ref-top h1{
    font-size:42px;
    font-weight:800;
    background: linear-gradient(90deg,#0f5132,#198754);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0;
}

.referencia-section .ref-top p{
    margin-top:15px;
    font-size:17px;
    color:#6c757d;
}

/* ===============================
   HERO BACKGROUND
================================== */

.referencia-section .ref-hero{
    position:relative;
    padding:130px 8%;
    background: radial-gradient(circle at 20% 20%, #145c43, #062616);
    color:#fff;
}

/* efecto blur glass */
.referencia-section .ref-hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:#19875440;
    filter:blur(150px);
    top:-150px;
    right:-150px;
    z-index:0;
}

.referencia-section .ref-content{
    position:relative;
    z-index:2;
    max-width:1300px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    flex-wrap:wrap;
}

/* ===============================
   LEFT SIDE
================================== */

.referencia-section .ref-left{
    flex:1 1 520px;
}

.referencia-section .ref-ubicacion{
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#9fe870;
    margin-bottom:18px;
}

.referencia-section .ref-left h2{
    font-size:34px;
    font-weight:800;
    margin-bottom:20px;
    line-height:1.2;
}

.referencia-section .ref-left p{
    font-size:18px;
    opacity:.85;
}

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

.referencia-section .ref-stats{
    display:flex;
    gap:40px;
    margin-top:45px;
    flex-wrap:wrap;
}

.referencia-section .ref-stat{
    background:rgba(255,255,255,0.06);
    padding:25px 30px;
    border-radius:18px;
    backdrop-filter:blur(10px);
    transition:.3s ease;
    min-width:170px;
}

.referencia-section .ref-stat:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,0.12);
}

.referencia-section .ref-stat strong{
    display:block;
    font-size:36px;
    font-weight:800;
    color:#9fe870;
}

.referencia-section .ref-stat span{
    font-size:14px;
    opacity:.8;
}

/* ===============================
   RIGHT SIDE FLOR
================================== */

.referencia-section .ref-right{
    flex:1 1 420px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.referencia-section .ref-flor{
    position:relative;
    width:400px;
    height:400px;
}

.referencia-section .ref-flor::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 0%, #198754 32%, transparent 33%),
        radial-gradient(circle at 100% 50%, #198754 32%, transparent 33%),
        radial-gradient(circle at 50% 100%, #198754 32%, transparent 33%),
        radial-gradient(circle at 0% 50%, #198754 32%, transparent 33%),
        radial-gradient(circle at 85% 15%, #0f5132 32%, transparent 33%),
        radial-gradient(circle at 15% 85%, #0f5132 32%, transparent 33%),
        radial-gradient(circle at 85% 85%, #0f5132 32%, transparent 33%),
        radial-gradient(circle at 15% 15%, #0f5132 32%, transparent 33%);
    animation:rotarFlor 18s linear infinite;
    opacity:.8;
}

@keyframes rotarFlor{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.referencia-section .flor-centro{
    position:absolute;
    inset:70px;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
}

.referencia-section .flor-centro img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

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

@media(max-width:1024px){

    .referencia-section .ref-content{
        flex-direction:column;
        text-align:center;
        gap:70px;
    }

    .referencia-section .ref-stats{
        justify-content:center;
    }

}

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

@media(max-width:768px){

    .referencia-section .ref-top{
        padding:50px 20px 20px;
    }

    .referencia-section .ref-top h1{
        font-size:28px;
    }

    .referencia-section .ref-hero{
        padding:70px 20px;
    }

    .referencia-section .ref-left h2{
        font-size:22px;
    }

    .referencia-section .ref-left p{
        font-size:15px;
    }

    .referencia-section .ref-stats{
        flex-direction:column;
        gap:20px;
    }

    .referencia-section .ref-stat{
        width:100%;
        text-align:center;
    }

    .referencia-section .ref-flor{
        width:240px;
        height:240px;
    }

    .referencia-section .flor-centro{
        inset:40px;
    }

}