/* SEO visual 1 · Tipografía y colores comunes de la Home (fase 3).
 * CSS completo. Los valores de respaldo conservan la paleta anterior
 * cuando no existen las variables de inp-home/home.css.
 */
.inp-seo-visual {
    padding: 78px 0;
    font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif);
    background: #fff;
}

.inp-seo-visual__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #f5f7f2;
    box-shadow: 0 22px 60px rgba(27, 36, 54, .10);
}

.inp-seo-visual__media {
    min-height: 520px;
    overflow: hidden;
}

.inp-seo-visual__media img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    object-fit: cover;
}

.inp-seo-visual__content {
    padding: 58px 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inp-seo-visual__eyebrow {
    margin-bottom: 10px;
    color: var(--inp-home-accent-color, #8fa33c);
    font-size: var(--inp-home-eyebrow-size, 12px);
    font-weight: var(--inp-home-heading-weight, 800);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.inp-seo-visual__content h2 {
    font-family: var(--inp-home-font-family, inherit);
    margin: 0 0 22px;
    color: var(--inp-home-heading-color, #34405a);
    font-size: var(--inp-home-heading-size, clamp(31px, 3.4vw, 46px));
    line-height: var(--inp-home-heading-line-height, 1.08);
    letter-spacing: var(--inp-home-heading-letter-spacing, -.035em);
    font-weight: var(--inp-home-heading-weight, 800);
}

.inp-seo-visual__content p {
    font-family: var(--inp-home-font-family, inherit);
    font-weight: var(--inp-home-body-weight, 400);
    margin: 0 0 14px;
    color: var(--inp-home-body-color, #566078);
    font-size: var(--inp-home-body-size, 15px);
    line-height: var(--inp-home-body-line-height, 1.72);
    text-align: justify;
    text-justify: inter-word;
}

.inp-seo-visual__content strong {
    color: var(--inp-home-heading-color, #34405a);
    font-weight: var(--inp-home-label-weight, 700);
}

.inp-seo-visual__text-link {
    color: var(--inp-home-heading-color, #34405a) !important;
    font-weight: var(--inp-home-label-weight, 700);
    text-decoration: none !important;
    transition: color .2s ease;
}

.inp-seo-visual__text-link:hover,
.inp-seo-visual__text-link:focus {
    color: var(--inp-home-accent-color, #8fa33c) !important;
}

.inp-seo-visual__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 22px;
}

.inp-seo-visual__points span {
    padding: 8px 12px;
    border: 1px solid #dbe3c4;
    border-radius: 999px;
    background: #fff;
    color: var(--inp-home-heading-color, #34405a);
    font-size: var(--inp-home-eyebrow-size, 12px);
    font-weight: var(--inp-home-label-weight, 700);
}

.inp-seo-visual__points span::before {
    content: "✓";
    margin-right: 7px;
    color: var(--inp-home-accent-color, #8fa33c);
}

.inp-seo-visual__cta {
    align-self: flex-start;
    padding: 13px 18px;
    border-radius: 10px;
    background: var(--inp-home-accent-color, #acbd51);
    color: var(--inp-home-heading-color, #fff) !important;
    text-decoration: none !important;
    font-size: var(--inp-home-label-size, 13px);
    font-weight: var(--inp-home-heading-weight, 800);
}

.inp-seo-visual__cta span {
    margin-left: 8px;
}

@media (max-width: 980px) {
    .inp-seo-visual__grid {
        grid-template-columns: 1fr;
    }

    .inp-seo-visual__media,
    .inp-seo-visual__media img {
        min-height: 380px;
        max-height: 460px;
    }

    .inp-seo-visual__content {
        padding: 44px 38px;
    }
}

@media (max-width: 620px) {
    .inp-seo-visual {
        padding: 58px 0;
    }

    .inp-seo-visual__media,
    .inp-seo-visual__media img {
        min-height: 280px;
    }

    .inp-seo-visual__content {
        padding: 34px 24px;
    }

    .inp-seo-visual__content p {
        text-align: left;
    }
}