/*==================================================
        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:10px 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-inicio-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-inicio-header h2{

    position:relative;

    z-index:2;

    font-size:3.6rem;

    color:var(--title);

    font-weight:700;

    margin:0;

}



.plans-inicio-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;
    height:220px;
    margin:-20px auto 30px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.plan-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*======================================
        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)
    );

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

.mini-leaf{
    position:absolute;
    width:55px;
    opacity:.45;
    transition:.45s;
}
.mini-left{
    left:5px;
    bottom:30px;
}
.mini-right{
    right:5px;
    top:25px;
}
/*======================================
        BADGE
======================================*/
.featured-badge{
    position:absolute;
    top:10px;
    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;
    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;

}
/*======================================
        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;
    margin: 10px 0px;
}

.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

    );
   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);

}

}
/*======================================
        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-inicio-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-inicio-header h2{

font-size:2rem;

}

.price{

font-size:3rem;

}

.plan-card h3{

font-size:1.6rem;

}

}
/* =====================================================
   COLORES DE LAS TARJETAS
===================================================== */

.plan-card {
    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =====================================================
   PLAN INDIVIDUAL
===================================================== */

.plan-card.plan-individual {
    background: linear-gradient(
        180deg,
        #F4FBF9 0%,
        #FFFFFF 45%,
        #F8FCFB 100%
    );

    border-top: 5px solid #58BDB7;
}


/* =====================================================
   PLAN PAREJA
===================================================== */

.plan-card.plan-pareja {
    background: linear-gradient(
        180deg,
        #FFF6F5 0%,
        #FFFFFF 45%,
        #FFF9F8 100%
    );

    border-top: 5px solid #D99A9A;
}


/* =====================================================
   PLAN FAMILIAR
===================================================== */

.plan-card.plan-familiar {
    background: linear-gradient(
        180deg,
        #F8F7EF 0%,
        #FFFFFF 45%,
        #FBFAF4 100%
    );

    border-top: 5px solid #9EAF82;
}


/* =====================================================
   BADGES
===================================================== */

.plan-individual .featured-badge {
    background: #58BDB7;
}

.plan-pareja .featured-badge {
    background: #D99A9A;
}

.plan-familiar .featured-badge {
    background: #9EAF82;
}


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

.plan-individual .mini-divider,
.plan-individual .section-divider {
    background: rgba(88, 189, 183, .25);
}

.plan-pareja .mini-divider,
.plan-pareja .section-divider {
    background: rgba(217, 154, 154, .25);
}

.plan-familiar .mini-divider,
.plan-familiar .section-divider {
    background: rgba(158, 175, 130, .30);
}


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

.plan-individual .plan-list i {
    color: #58BDB7;
}

.plan-pareja .plan-list i {
    color: #D99A9A;
}

.plan-familiar .plan-list i {
    color: #9EAF82;
}


/* =====================================================
   BOTÓN VER MÁS
===================================================== */

.plan-footer {
    margin-top: auto;

    padding-top: 25px;

    display: flex;
    justify-content: center;
}


.btn-plan {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 160px;

    padding: 13px 25px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


/* INDIVIDUAL */

.plan-individual .btn-plan {

    background: #58BDB7;

    color: #fff;

    box-shadow:
        0 10px 25px rgba(88, 189, 183, .25);
}

.plan-individual .btn-plan:hover {

    background: #3FA9A3;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(88, 189, 183, .35);
}


/* PAREJA */

.plan-pareja .btn-plan {

    background: #D99A9A;

    color: #fff;

    box-shadow:
        0 10px 25px rgba(217, 154, 154, .25);
}

.plan-pareja .btn-plan:hover {

    background: #C98383;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(217, 154, 154, .35);
}


/* FAMILIAR */

.plan-familiar .btn-plan {

    background: #9EAF82;

    color: #fff;

    box-shadow:
        0 10px 25px rgba(158, 175, 130, .25);
}

.plan-familiar .btn-plan:hover {

    background: #879A6B;

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(158, 175, 130, .35);
}

/* =====================================================
   BOTÓN SECUNDARIO — VER TODOS LOS PLANES
===================================================== */

.btn-plan-more {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #687873;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    padding: 4px 8px;

    transition:
        color .25s ease,
        gap .25s ease;
}


.btn-plan-more i {
    font-size: 11px;

    transition: transform .25s ease;
}


.btn-plan-more:hover {
    color: #2E8068;

    text-decoration: none;

    gap: 9px;
}


.btn-plan-more:hover i {
    transform: translateX(3px);
}