/*==================================================
        KHUYAY PLANS
        WATERCOLOR PREMIUM UI
===================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

.plans-section{

    position:relative;

    overflow:hidden;

    padding:140px 0;

    background:var(--background);

}



/*======================================
        FONDO ACUARELAS
======================================*/

.plans-watercolor{

    position:absolute;

    pointer-events:none;

    opacity:.25;

    z-index:0;

}

.watercolor-top-left{

    width:550px;

    top:-180px;

    left:-180px;

}

.watercolor-bottom-right{

    width:600px;

    right:-220px;

    bottom:-180px;

}



/*======================================
            HOJAS
======================================*/

.leaf-big{

    position:absolute;

    width:220px;

    opacity:.20;

    z-index:0;

}

.leaf-left{

    left:-80px;

    top:220px;

}

.leaf-right{

    right:-80px;

    bottom:220px;

}



/*======================================
            CONTAINER
======================================*/

.plans-section .container{

    position:relative;

    z-index:10;

}



/*======================================
            HEADER
======================================*/

.plans-header{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}



.plans-subtitle{

    display:inline-block;

    padding:10px 24px;

    background:#EAFBF8;

    color:var(--primary-dark);

    border-radius:40px;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:2px;

}



.plans-title-box{

    position:relative;

    display:inline-block;

    margin-top:30px;

}



.title-watercolor{

    position:absolute;

    width:250px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    opacity:.35;

}



.plans-header h2{

    position:relative;

    z-index:2;

    font-size:3.6rem;

    color:var(--title);

    font-weight:700;

    margin:0;

}



.plans-header p{

    margin-top:20px;

    font-size:1.08rem;

    color:var(--text);

}



/*======================================
            GRID
======================================*/

.plans-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(340px,1fr)
        );

    gap:55px;

    align-items:start;

}



/*======================================
            CARD
======================================*/

.plan-card{

    position:relative;

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

    backdrop-filter:blur(18px);

    border-radius:38px;

    padding:40px;

    box-shadow:var(--shadow);

    transition:.45s;

    overflow:hidden;

}



.plan-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-hover);

}



/*======================================
        CARD DESTACADA
======================================*/

.featured{

    transform:translateY(-25px);

    border:2px solid rgba(78,184,176,.18);

}
/*==================================================
        PLAN CIRCLE
===================================================*/

.plan-circle{

    position:relative;

    width:220px;

    height:220px;

    margin:-20px auto 30px;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*======================================
        ACUARELA
======================================*/

.circle-watercolor{

    position:absolute;

    width:220px;

    height:220px;

    animation:blobFloat 9s ease-in-out infinite;

    filter:drop-shadow(
        0 12px 25px rgba(78,184,176,.15)
    );

}



/* acuarela diferente por tarjeta */

.plan-card:nth-child(1) .circle-watercolor{

    transform:rotate(-10deg);

}

.plan-card:nth-child(2) .circle-watercolor{

    transform:rotate(8deg) scale(1.08);

}

.plan-card:nth-child(3) .circle-watercolor{

    transform:rotate(15deg);

}



/*======================================
            ICONO
======================================*/

.plan-icon{

    position:relative;

    z-index:5;

    width:92px;

    transition:.45s;

    filter:

    drop-shadow(
        0 12px 20px rgba(0,0,0,.12)
    );

}



.plan-card:hover .plan-icon{

    transform:

        scale(1.12)

        rotate(-5deg);

}



/*======================================
        MINI HOJAS
======================================*/

.mini-leaf{

    position:absolute;

    width:55px;

    opacity:.45;

    transition:.45s;

}



.mini-left{

    left:5px;

    bottom:30px;

}



.mini-right{

    right:5px;

    top:25px;

}



.plan-card:hover .mini-left{

    transform:

        rotate(-12deg)

        translateX(-6px);

}



.plan-card:hover .mini-right{

    transform:

        rotate(12deg)

        translateX(6px);

}



/*======================================
        BADGE
======================================*/

.featured-badge{

    position:absolute;

    top:28px;

    right:28px;

    padding:8px 18px;

    border-radius:40px;

    background:

    linear-gradient(

        135deg,

        #4EB8B0,

        #7DDED6

    );

    color:white;

    font-size:.72rem;

    letter-spacing:2px;

    font-weight:700;

    z-index:20;

}



/*======================================
            TITULO
======================================*/

.plan-card h3{

    text-align:center;

    color:var(--title);

    font-size:2rem;

    font-weight:700;

    margin-bottom:18px;

}



/*======================================
        DIVIDER PEQUEÑO
======================================*/

.mini-divider{

    width:55px;

    height:5px;

    border-radius:20px;

    margin:auto;

    margin-bottom:25px;

    background:

    linear-gradient(

        90deg,

        #4EB8B0,

        #B6F0EA

    );

}



/*======================================
            PRECIO
======================================*/

.price{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:6px;

    margin-bottom:30px;

    color:var(--primary);

}



.price span{

    font-size:1.3rem;

    margin-top:10px;

    font-weight:600;

}



.price{

    font-size:4rem;

    font-weight:700;

}



/*======================================
        DIVISOR
======================================*/

.section-divider{

    width:100%;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(78,184,176,.35),

        transparent

    );

    margin:30px 0;

}



.section-divider.small{

    margin:25px 0;

}



/*======================================
        LISTAS
======================================*/

.plan-list h4{

    color:var(--primary-dark);

    margin-bottom:18px;

    font-weight:700;

}



.plan-list ul{

    list-style:none;

    padding:0;

    margin:0;

}



.plan-list li{

    display:flex;

    gap:12px;

    margin-bottom:16px;

    color:var(--text);

    line-height:1.7;

}



.plan-list li i{

    color:var(--primary);

    margin-top:4px;

}



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

.plan-footer{

    margin-top:35px;

}
/*==================================================
        PARTE 3
        PREMIUM EFFECTS
===================================================*/


/*======================================
        BOTÓN
======================================*/

.btn-plan{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    padding:18px 28px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    color:white;

    background:linear-gradient(
        135deg,
        #4EB8B0,
        #73DDD4
    );

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.btn-plan::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.btn-plan:hover::before{

    left:120%;

}

.btn-plan:hover{

    color:white;

    transform:translateY(-4px);

    box-shadow:

        0 18px 40px rgba(78,184,176,.30);

}

.btn-plan i{

    transition:.35s;

}

.btn-plan:hover i{

    transform:translateX(6px);

}


/*======================================
        BRILLO TARJETA
======================================*/

.plan-card::before{

    content:"";

    position:absolute;

    left:-180px;

    top:0;

    width:120px;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-20deg);

    transition:1s;

}

.plan-card:hover::before{

    left:520px;

}


/*======================================
        GLASS
======================================*/

.plan-card{

    border:1px solid rgba(255,255,255,.65);

}


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

.plans-footer{

    margin-top:100px;

}

.footer-card{

    position:relative;

    max-width:900px;

    margin:auto;

    padding:50px;

    border-radius:35px;

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

    backdrop-filter:blur(12px);

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

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.footer-text{

    text-align:center;

    max-width:650px;

}

.footer-heart{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#EAFBF8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#4EB8B0;

    font-size:1.4rem;

}

.footer-text h4{

    color:var(--title);

    font-size:2rem;

    margin-bottom:15px;

}

.footer-text p{

    color:var(--text);

    line-height:1.8;

}

.footer-decoration{

    position:absolute;

    width:90px;

    opacity:.35;

}

.footer-decoration.left{

    left:25px;

    bottom:25px;

}

.footer-decoration.right{

    right:25px;

    top:25px;

}


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

.footer-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}

.btn-footer-primary{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        #4EB8B0,
        #74D8CF
    );

    color:white;

    transition:.35s;

}

.btn-footer-primary:hover{

    color:white;

    transform:translateY(-5px);

}

.btn-footer-primary .arrow{

    transition:.35s;

}

.btn-footer-primary:hover .arrow{

    transform:translateX(6px);

}

.btn-footer-secondary{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    border:2px solid #4EB8B0;

    color:#2D7A71;

    transition:.35s;

}

.btn-footer-secondary:hover{

    background:#4EB8B0;

    color:white;

}


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

@keyframes blobFloat{

0%{

transform:translateY(0) rotate(0deg);

}

50%{

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

}

100%{

transform:translateY(0) rotate(0deg);

}

}

.plan-card{

    animation:blobFloat 7s ease-in-out infinite;

}

.plan-card:nth-child(2){

animation-delay:.5s;

}

.plan-card:nth-child(3){

animation-delay:1s;

}


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

@media(max-width:1200px){

.plans-grid{

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

}

.featured{

transform:none;

}

}

@media(max-width:992px){

.plans-grid{

grid-template-columns:1fr;

}

.plan-card{

max-width:520px;

margin:auto;

}

.footer-card{

padding:40px 30px;

}

}

@media(max-width:768px){

.plans-section{

padding:90px 0;

}

.plans-header h2{

font-size:2.4rem;

}

.plan-card{

padding:30px;

}

.plan-circle{

width:180px;

height:180px;

}

.circle-watercolor{

width:180px;

height:180px;

}

.plan-icon{

width:75px;

}

.footer-buttons{

flex-direction:column;

}

.btn-footer-primary,

.btn-footer-secondary{

width:100%;

justify-content:center;

}

.footer-decoration{

display:none;

}

}

@media(max-width:576px){

.plans-header h2{

font-size:2rem;

}

.price{

font-size:3rem;

}

.plan-card h3{

font-size:1.6rem;

}

}