/* ==========================================================
   CIUDAD HOME - PLANES
   Shortcode independiente [planes]
   ========================================================== */

.chplan,
.chplan * {
    box-sizing: border-box !important;
}

.chplan {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 24px 20px 76px !important;
    color: #292929 !important;
    font-family: inherit !important;
}

.chplan h1,
.chplan h2,
.chplan h3,
.chplan p,
.chplan ul {
    max-width: none !important;
    margin-top: 0 !important;
}

.chplan a {
    text-decoration: none !important;
}

.chplan svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.chplan-eyebrow {
    display: block !important;
    margin: 0 0 12px !important;
    color: #ff3e0c !important;
    font-size: 0.73rem !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Portada */

.chplan-hero {
    position: relative !important;
    width: 100% !important;
    padding: 68px 48px 54px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% -42%, rgba(255, 62, 12, 0.2), rgba(255, 62, 12, 0) 51%),
        #f8f7f5 !important;
    border: 1px solid #e7e4e0 !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 38px rgba(20, 20, 20, 0.055) !important;
    text-align: center !important;
}

.chplan-hero::after {
    content: "" !important;
    position: absolute !important;
    right: 12% !important;
    bottom: 0 !important;
    left: 12% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 62, 12, 0.52), transparent) !important;
}

.chplan-hero .chplan-eyebrow {
    text-align: center !important;
}

.chplan-hero h1 {
    max-width: 850px !important;
    margin: 0 auto 20px !important;
    color: #171717 !important;
    font-size: clamp(2.15rem, 4.1vw, 3.55rem) !important;
    font-weight: 850 !important;
    line-height: 1.07 !important;
    letter-spacing: -0.05em !important;
    text-align: center !important;
    text-wrap: balance !important;
}

.chplan-hero > p {
    max-width: 760px !important;
    margin: 0 auto !important;
    color: #5e5b57 !important;
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    text-align: center !important;
}

.chplan-promises {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 24px !important;
    margin: 28px auto 0 !important;
}

.chplan-promises > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #3c3a37 !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

.chplan-promises svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: #ff3e0c !important;
    stroke-width: 1.8 !important;
}

/* Encabezado de precios */

.chplan-pricing {
    width: 100% !important;
    padding: 72px 0 0 !important;
}

.chplan-heading {
    max-width: 700px !important;
    margin: 0 auto 35px !important;
    text-align: center !important;
}

.chplan-heading .chplan-eyebrow {
    text-align: center !important;
}

.chplan-heading h2 {
    margin: 0 0 11px !important;
    color: #1a1a1a !important;
    font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
    font-weight: 850 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
    text-align: center !important;
}

.chplan-heading p {
    margin: 0 !important;
    color: #68645f !important;
    font-size: 0.96rem !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

/* Tarjetas */

.chplan-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.chplan-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 500px !important;
    margin: 0 !important;
    padding: 23px 21px 21px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 1px solid #e6e3df !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(28, 26, 24, 0.055) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.chplan-card:hover {
    transform: translateY(-3px) !important;
    border-color: #d8d3cd !important;
    box-shadow: 0 16px 35px rgba(28, 26, 24, 0.085) !important;
}

.chplan-card-featured {
    border: 2px solid #ff3e0c !important;
    padding: 22px 20px 20px !important;
    box-shadow: 0 15px 36px rgba(255, 62, 12, 0.13) !important;
}

.chplan-recommended {
    position: absolute !important;
    top: -13px !important;
    left: 50% !important;
    z-index: 2 !important;
    min-width: 118px !important;
    padding: 6px 14px !important;
    transform: translateX(-50%) !important;
    background: #ff3e0c !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 14px rgba(255, 62, 12, 0.24) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.chplan-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 48px !important;
    margin: 0 0 20px !important;
}

.chplan-house {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    padding: 9px !important;
    background: #fff2ed !important;
    border: 1px solid #ffe0d5 !important;
    border-radius: 13px !important;
    color: #ef4b1b !important;
}

.chplan-house svg {
    stroke-width: 1.65 !important;
}

.chplan-for,
.chplan-saving {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.chplan-for {
    background: #f4f2ef !important;
    color: #77716b !important;
}

.chplan-saving {
    background: #eef7f1 !important;
    color: #317a4d !important;
}

.chplan-card h3 {
    margin: 0 0 13px !important;
    color: #24211f !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
}

.chplan-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    min-height: 42px !important;
    margin: 0 !important;
}

.chplan-price strong {
    color: #171717 !important;
    font-size: clamp(1.9rem, 2.7vw, 2.35rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
}

.chplan-price span {
    color: #8b857f !important;
    font-size: 0.71rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
}

.chplan-capacity {
    min-height: 40px !important;
    margin: 7px 0 0 !important;
    color: #77716b !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

.chplan-divider {
    width: 100% !important;
    height: 1px !important;
    margin: 15px 0 18px !important;
    background: #ece9e5 !important;
}

.chplan-card ul {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    list-style: none !important;
}

.chplan-card li {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    min-height: 23px !important;
    margin: 0 0 9px !important;
    padding: 0 0 0 24px !important;
    color: #46413d !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    list-style: none !important;
    text-align: left !important;
}

.chplan-card li::before {
    content: "✓" !important;
    position: absolute !important;
    top: 1px !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    background: #fff1ec !important;
    border-radius: 50% !important;
    color: #ef4b1b !important;
    font-size: 0.64rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.chplan-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: auto 0 0 !important;
    padding: 12px 15px !important;
    background: #f5f2ef !important;
    border: 1px solid #e8e3de !important;
    border-radius: 12px !important;
    color: #322e2a !important;
    font-size: 0.8rem !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.chplan-button > span {
    font-size: 1.08rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.chplan-button:hover {
    background: #ece8e3 !important;
    border-color: #ded7d0 !important;
    color: #171717 !important;
}

.chplan-button-primary {
    background: #ff3e0c !important;
    border-color: #ff3e0c !important;
    box-shadow: 0 8px 19px rgba(255, 62, 12, 0.21) !important;
    color: #ffffff !important;
}

.chplan-button-primary:hover {
    background: #e93608 !important;
    border-color: #e93608 !important;
    color: #ffffff !important;
}

/* Guía */

.chplan-guide {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 26px !important;
    width: 100% !important;
    margin: 50px 0 0 !important;
    padding: 31px 34px !important;
    background: #f8f7f5 !important;
    border: 1px solid #e6e2dd !important;
    border-radius: 18px !important;
}

.chplan-guide-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    padding: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e7e2dc !important;
    border-radius: 18px !important;
    color: #ff3e0c !important;
    box-shadow: 0 8px 20px rgba(25, 23, 21, 0.05) !important;
}

.chplan-guide-icon svg {
    stroke-width: 1.7 !important;
}

.chplan-guide-copy {
    min-width: 0 !important;
}

.chplan-guide-copy .chplan-eyebrow {
    margin-bottom: 6px !important;
    text-align: left !important;
}

.chplan-guide h2 {
    margin: 0 0 8px !important;
    color: #1b1a18 !important;
    font-size: 1.34rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
}

.chplan-guide p {
    max-width: 750px !important;
    margin: 0 !important;
    color: #635f5a !important;
    font-size: 0.87rem !important;
    line-height: 1.68 !important;
    text-align: left !important;
}

.chplan-guide p strong {
    color: #34312e !important;
    font-weight: 800 !important;
}

.chplan-guide-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 11px 17px !important;
    background: #ffffff !important;
    border: 1px solid #ddd7d1 !important;
    border-radius: 11px !important;
    color: #2c2926 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.chplan-guide-link:hover {
    background: #fff1ec !important;
    border-color: #ffd5c7 !important;
    color: #df3a0b !important;
}

/* Tablet */

@media (max-width: 1040px) {
    .chplan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    .chplan-card {
        min-height: 475px !important;
    }
}

@media (max-width: 760px) {
    .chplan {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .chplan-hero {
        padding: 54px 26px 45px !important;
    }

    .chplan-guide {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 18px !important;
        padding: 27px 25px !important;
    }

    .chplan-guide-icon {
        width: 62px !important;
        height: 62px !important;
        padding: 15px !important;
    }

    .chplan-guide-link {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* Celular */

@media (max-width: 590px) {
    .chplan {
        max-width: 100% !important;
        padding: 14px 12px 54px !important;
    }

    .chplan-hero {
        padding: 44px 20px 38px !important;
        border-radius: 17px !important;
    }

    .chplan-hero h1 {
        font-size: clamp(1.8rem, 9.5vw, 2.35rem) !important;
        line-height: 1.1 !important;
    }

    .chplan-hero > p {
        font-size: 0.94rem !important;
        line-height: 1.67 !important;
    }

    .chplan-promises {
        align-items: center !important;
        flex-direction: column !important;
        gap: 9px !important;
        margin-top: 23px !important;
    }

    .chplan-pricing {
        padding-top: 54px !important;
    }

    .chplan-heading {
        margin-bottom: 29px !important;
        padding: 0 8px !important;
    }

    .chplan-heading h2 {
        font-size: 1.72rem !important;
    }

    .chplan-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        max-width: 440px !important;
        margin: 0 auto !important;
    }

    .chplan-card,
    .chplan-card-featured {
        min-height: 0 !important;
        padding: 22px 20px 20px !important;
        border-radius: 16px !important;
    }

    .chplan-card-featured {
        padding: 21px 19px 19px !important;
    }

    .chplan-capacity {
        min-height: 0 !important;
    }

    .chplan-card ul {
        margin-bottom: 21px !important;
    }

    .chplan-guide {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 17px !important;
        margin-top: 38px !important;
        padding: 25px 21px !important;
        border-radius: 16px !important;
    }

    .chplan-guide-copy .chplan-eyebrow,
    .chplan-guide h2,
    .chplan-guide p {
        text-align: left !important;
    }

    .chplan-guide-link {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chplan-card,
    .chplan-button,
    .chplan-guide-link {
        transition: none !important;
    }
}