@import './global.css';

.tope_plans {
    width: 100%;
    height: auto;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

.header_tope_plans {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    background-color: var(--quaternary-color);
    position: relative;
}

.header_plans_left {
    width: 40%;
    height: 120px;
    padding: 30px 20px;
    background-color: var(--tertiary-color);
    clip-path: polygon(84% 0, 100% 54%, 63% 100%, 0 77%, 0 0);
}
.header_plans_left p {
    font-size: 1.2rem;
    color: black;
    font-weight: 600;
}

.header_plans_center {
    width: 44%;
    height: 120px;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 22%);
    z-index: 5;
    padding: 30px 20px 0 36px;
    background-color: black;
    clip-path: polygon(33% 6%, 86% 17%, 100% 50%, 75% 100%, 20% 100%, 0 68%);
}
.header_plans_center h3 {
    font-size: 1.8rem;
    color: var(--white-page);
}

.header_plans_center p{
    font-size: 1.2rem;
    color: var(--white-page);
    font-weight: 400;
    opacity: 0.8;
}
.header_plans_right {
    width: 40%;
    height: 120px;
    padding: 20px 8px 0 46px;
    background-color: var(--secundary-color);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 30% 100%, 0 61%);
}

.header_plans_right p {
    font-size: 1.2rem;
    color: black;
    font-weight: 600;
    text-align: right;
}

.plans_content {
    width: 100%;
    height: auto;
    margin: 48px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    overflow: hidden;
}
.card_plan {
    width: 90%;
    max-width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: solid 1px var(--section-clear);
    border-radius: 8px;
}
.seo_card .content_flex_card, .ads_card .content_flex_card,
.media_card .content_flex_card, .web_card .content_flex_card {
    flex-direction: column-reverse;
}

.seo_card .description_contaimer, .ads_card .description_contaimer,
.media_card .description_contaimer, .web_card .description_contaimer {
    width: 100%;
    height: 110px;
    padding: 20px 16px 0;
    align-items: center;
}
.seo_card .description_contaimer h3, .ads_card .description_contaimer h3,
.media_card .description_contaimer h3, .web_card .description_contaimer h3 {
   font-size: 1.8rem;
   text-align: center;
   margin-bottom: 0px;
}

.seo_card .description_contaimer p, .ads_card .description_contaimer p,
.media_card .description_contaimer p, .web_card .description_contaimer p {
   font-size: 1.2rem;
}
.seo_card .description_card, .ads_card .description_card,
.media_card .description_card, .web_card .description_card {
    height: 120px;
    padding: 0px 16px 0px;
}

.seo_card .more_info, .ads_card .more_info,
.media_card .more_info, .web_card .more_info {
    background-color: rgba(0, 0, 0, 0.645);
    border-top: solid 1px black;
}
/* .seo_card {
    background-image: url(../images/card_seo.jpeg);  
} */
/* .ads_card {
    background-image: url(../images/card_ads.jpeg);  
}
.media_card {
    background-image: url(../images/card_rs.jpeg);  
}
.web_card {
    background-image: url(../images/card__web.jpeg);  
} */
.content_flex_card {
    width: 100%;
    height: auto;
    display: flex;    
}
.description_contaimer {
    width: 70%;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px 16px 0;
    gap: 8px;
}
.description_contaimer h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 8px;
}
.description_contaimer p {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--white-page);
}
.description_contaimer  span {
    display: block;
    width: 100%;
    height: 20px;
}

.description_contaimer h2 {
    font-size: 1rem;
    color: var(--primary-color);
}
.description_contaimer h2 strong{
    font-size: 2.4rem;
}
.image_card_tope {
    width: 100%;
    height: 210px;
    overflow: hidden;
}
.image_card_tope img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_card {
    width: 30%;
    height: 230px;
    overflow: hidden;
}
.image_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.description_card {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 16px;
    gap: 6px;
}
.description_chequed {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}
.description_chequed span {
    min-width: 16px;
    height: 16px;
    background-image: url(../icons/check.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.description_chequed p {
    font-size: 1.2rem;
    color: var(--white-page);
}
.more_info {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 16px;
    border-top: solid 1px var(--section-clear) ;
}
.more_info a {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--white-page);
    cursor: pointer;
}
.more_info a span {
    display: block;
    width: 20px;
    height: 28px;
    background-image: url(../icons/arrow-left-green.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (min-width: 400px) {
    .header_plans_left {
        padding: 30px 28px;
    }
    .header_plans_center {
        padding: 30px 20px 0 44px;
    }
    .header_plans_right {
        padding: 20px 16px 0 46px;
    }
    .card_plan {
        width: 80%;
    }
}

@media screen and (min-width: 700px) and (min-height: 510px){
    .header_tope_plans {
        width: 100%;
        height: 180px;
    }
    .header_plans_left {
        height: 180px;
        padding: 44px 46px;  
    }
    .header_plans_left p {
        font-size: 2rem;
    }
    .header_plans_center {
        height: 180px;
        padding: 44px 36px 0 76px;
    }
   
    .header_plans_center h3 {
        font-size: 2.4rem;
    }
    .header_plans_center p {
        font-size: 2rem;
        margin-top: 12px;
    }
    .header_plans_right {
        height: 180px;
        padding: 40px 28px 0 68px;
    }

    .header_plans_right p {
        font-size: 2rem;
    }
    .plans_content {
        margin: 60px 0 28px;
        gap: 40px;
    }
    .card_plan {
        border: solid 2px var(--section-clear);
    }
    .description_contaimer {
        height: 280px;
        padding: 28px 20px 0;
        gap: 10px;
    }
    .description_contaimer h3 {
        font-size: 2rem;
    }
    .seo_card .description_contaimer h3,
    .ads_card .description_contaimer h3, 
    .media_card .description_contaimer h3, 
    .web_card .description_contaimer h3 {
        font-size: 2.2rem;
    }
    .description_contaimer p {
        font-size: 1.4rem;
    }
    .seo_card .description_contaimer p, 
    .ads_card .description_contaimer p, 
    .media_card .description_contaimer p, 
    .web_card .description_contaimer p {
        font-size: 1.6rem;
    }
    .description_contaimer h2 {
        font-size: 2rem;
    }
    .description_contaimer h2 strong {
        font-size: 3rem;
    }
    .image_card {
        width: 30%;
        height: 280px;
    }
    .description_chequed {
        gap: 8px;
    }
    .description_chequed span {
        width: 20px;
        height: 20px;
    }
    .description_chequed p {
        font-size: 1.2rem;
    }
    .more_info {
        height: 60px;
        padding-right: 20px;
        border-top: solid 2px var(--section-clear);
    }
    .more_info a {
        font-size: 1.4rem;
    }
    .more_info a span {
        width: 24px;
        height: 32px;
    }

    .seo_card .description_contaimer, 
    .ads_card .description_contaimer, 
    .media_card .description_contaimer, 
    .web_card .description_contaimer {
        height: 130px;
    }
    .image_card_tope {
        height: 250px;
    }
}

@media screen  and (min-width: 830px)  and (max-height: 500px){
    
    .tope_plans {
        align-items: center;
    }
    .header_plans_left {
        padding: 30px 80px;
    }
    .header_plans_left p {
        font-size: 1.6rem;
    }
    .header_plans_center {
        padding: 30px 44px 0 87px;
    }
    .header_plans_center h3 {
        font-size: 2.2rem;
    }
    .header_plans_center p {
        font-size: 1.4rem;
        margin-top: 12px;
    }
    .header_plans_right {
        padding: 30px 24px 0 78px;
    }
    .header_plans_right p {
        font-size: 1.6rem;
    }

    .plans_content {
        width: 80%;
        gap: 60px;
        margin: 60px 0 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual tamaño */   

    }
    .card_plan {
        width: 100%;
    }

    .description_card {
        display: none;
    }
    .seo_card .description_contaimer, 
    .ads_card .description_contaimer, 
    .media_card .description_contaimer, 
    .web_card .description_contaimer {
        height: 150px;
    }
}
@media screen and (min-width: 1000px) {
    .header_tope_plans {
        width: 100%;
        height: 220px;
    }
    .header_plans_left {
        height: 220px;
        padding: 48px 90px;
    }

    .header_plans_left p {
        font-size: 2.6rem;
    }
    .header_plans_center {
        height: 220px;
        padding: 60px 48px 0 130px;
    }

    .header_plans_center h3 {
        font-size: 3rem;
    }
    .header_plans_center p {
        font-size: 2.6rem;
        margin-top: 12px;
    }
    .header_plans_right {
        height: 220px;
        padding: 48px 60px 0 108px;
    }
    .header_plans_right p {
        font-size: 2.6rem;
    }
}
@media screen and (min-width: 1200px) {
    .header_plans_left {
        height: 220px;
        padding: 48px 134px;
    }
    .header_plans_center {
        height: 220px;
        padding: 60px 48px 0 130px;
    }

    .header_plans_center h3 {
        font-size: 3.2rem;
        letter-spacing: 1px;
    }
    .header_plans_center p {
        font-size: 2.6rem;
        margin-top: 20px;
    }
    .header_plans_right {
        height: 220px;
        padding: 48px 70px 0 130px;
    }
    .tope_plans {
        align-items: center;
    }

    .plans_content {
        width: auto;
        gap: 60px;
        margin: 80px 0 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual tamaño */   

    }
    .card_plan {
        width: 356px;
    }
    .description_contaimer {
        width: 70%;
        height: 230px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 16px 16px 0;
        gap: 8px;
    }
    .description_contaimer p {
        font-size: 1.2rem;
    }
    .description_contaimer span {
        display: block;
        width: 100%;
        height: 12px;
    }

    .image_card {
        width: 30%;
        height: 230px;
        overflow: hidden;
    }
    .description_card {
        height: 100px;
        padding: 12px 16px;
        gap: 4px;
    }
    .more_info {
        height: 50px;
        padding-right: 20px;
        border-top: solid 2px var(--section-clear);
    }

    .description_chequed p {
        font-size: 1.2rem;
    }
    .seo_card .description_contaimer, 
    .ads_card .description_contaimer, 
    .media_card .description_contaimer, 
    .web_card .description_contaimer {
        height: 150px;
    }
}
@media screen and (min-width: 1600px) {
    .header_tope_plans {
        width: 100%;
        height: 240px;
    }
    .header_plans_left {
        width: 36%;
        height: 240px;
        padding: 50px 164px;
    }
    .header_plans_center {
        width: 38%;
        height: 240px;
        padding: 80px 87px 0 150px;
    }
    .header_plans_right {
        width: 36%;
        height: 240px;
        padding: 50px 100px 0 158px;
    }
}
@media screen and (min-width: 1900px) {
    .header_tope_plans {
        width: 100%;
        height: 270px;
    }
    .header_plans_left {
        width: 36%;
        max-width: 700px;
        height: 270px;
        padding: 60px 204px;
    }
    .header_plans_left p {
        font-size: 3rem;
    }
    .header_plans_center {
        width: 38%;
        max-width: 730px;
        height: 270px;
        padding: 90px 87px 0 186px;
        left: calc(50% - 20%);
    }
    .header_plans_center h3 {
        font-size: 3.8rem;
        letter-spacing: 1.2px;
    }
    .header_plans_center p {
        font-size: 3rem;
        margin-top: 36px;
    }
    .header_plans_right {
        width: 36%;
        max-width: 700px;
        height: 270px;     
        padding: 60px 190px 0 150px;
    }
    .header_plans_right p {
        font-size: 3rem;
    }

    .plans_content {
        width: auto;
        gap: 60px;
        margin: 100px 0 40px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .card_plan {
        width: 400px;
    }
    .description_contaimer {
        height: 300px;
        padding: 24px 12px 0 24px;
        gap: 12px;
    }
    .description_contaimer h3 {
        font-size: 2.4rem;
    }
    .description_contaimer p {
        font-size: 1.6rem;
    }
    .description_contaimer span {
        height: 20px;
    }
    .description_contaimer h2 strong {
        font-size: 3.4rem;
    }
    .image_card {
        width: 30%;
        height: 300px;
        overflow: hidden;
    }
    .description_card {
        width: 100%;
        height: 176px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 24px 20px 16px;
        gap: 8px;
    }
    .description_chequed {
        gap: 10px;
    }
    .description_chequed span {
        width: 24px;
        height: 24px;
    }
    .description_chequed p {
        font-size: 1.4rem;
    }
    .more_info {
        height: 60px;
        padding-right: 24px;
    }
    .more_info a {
        font-size: 1.6rem;
    }
    .more_info a span {
        width: 28px;
        height: 37px;
    }

    .seo_card .description_contaimer, .ads_card .description_contaimer,
    .media_card .description_contaimer, .web_card .description_contaimer {
        height: 220px;
        padding-bottom: 16px;
    }
    .seo_card .description_contaimer h3, .ads_card .description_contaimer h3,
    .media_card .description_contaimer h3, .web_card .description_contaimer h3 {
        font-size: 2.6rem;
    }

    .seo_card .description_contaimer p, .ads_card .description_contaimer p,
    .media_card .description_contaimer p, .web_card .description_contaimer p {
    font-size: 2rem;
    }
    .seo_card .description_card, .ads_card .description_card, .media_card .description_card, .web_card .description_card {
        height: 150px;
    }
}