/* ============================================================
   Bloque "Mapa de riesgo" (hero con mini-diagnóstico)

   Medidas, tipografía y colores copiados de texto-imagen
   (blocks/texto-imagen/styles.css): sección, columnas, etiqueta,
   titular, descripción, lista con check y tarjeta de formulario
   (.si-form-card + reglas .wpcf7 de assets/css/base.css). Si cambian
   allí, hay que cambiarlos aquí también.
   Prioridades: azul sólido (alta), azul al 9% (media), gris (vigilar).
   ============================================================ */

/* ── Sección (= .block-texto-image) ─────────────────────────── */
.block-mapa-riesgo {
    padding: 70px var(--wp--custom--section--x);
    color: var(--wp--preset--color--black);
}

.block-mapa-riesgo.fondo-white-04 {
    background-color: var(--wp--preset--color--white-04);
}

.block-mapa-riesgo.fondo-white-02 {
    background-color: var(--wp--preset--color--white-02);
}

/* Hero: mismo espacio superior que .p-140 de texto-imagen. */
.block-mapa-riesgo.p-140 {
    padding-top: 118px;
}

/* Las vistas usan display:flex/grid: sin esto, [hidden] no las ocultaría. */
.block-mapa-riesgo [hidden] {
    display: none !important;
}

/* simple.css añade margen a cada <li> y botón. */
.block-mapa-riesgo li,
.block-mapa-riesgo button {
    margin: 0;
}

.block-mapa-riesgo button,
.block-mapa-riesgo select {
    font-family: 'Space Grotesk', sans-serif;
}

/* = .inner-texto-image */
.inner-mapa-riesgo {
    max-width: 1320px;
    margin: 0 auto;
}

/* ── Vista inicial: = .inner-texto-image + .col-text / .col-image ── */
.mapa-riesgo-inicial {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
}

.mapa-riesgo-texto {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
}

/* = .texto-image-eyebrow */
.mapa-riesgo-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    column-gap: 8px;
    margin: 18px 0;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* = .texto-image-heading (también cuando es <h1>, como en texto-imagen) */
.block-mapa-riesgo .mapa-riesgo-heading,
.block-mapa-riesgo .mapa-riesgo-res-titulo {
    margin: 0;
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
    font-weight: var(--wp--custom--weight-500);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

/* = .texto-image-description */
.mapa-riesgo-description {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--weight-400);
    line-height: var(--wp--preset--line-height--medium);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

/* = .texto-image-list / -item / -icon.is-check / -titulo */
.mapa-riesgo-garantias {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapa-riesgo-garantias li {
    display: flex;
    align-items: baseline;
    column-gap: 10px;
}

.mapa-riesgo-check {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--black);
}

.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-check {
    background-color: var(--wp--preset--color--white);
}

.mapa-riesgo-garantia-texto {
    padding-top: 4px;
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
}

/* ── Tarjeta del formulario (= .si-form-card, en la columna .col-image) ── */
.mapa-riesgo-card {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 24px;
    border-radius: var(--wp--custom--radius--lg);
    background: var(--wp--preset--color--white);
    box-shadow: var(--shadow-card-soft);
}

.mapa-riesgo-card-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Títulos de tarjeta: tamaño h5 como .texto-image-subtitulo. */
.block-mapa-riesgo .mapa-riesgo-card-titulo,
.block-mapa-riesgo .mapa-riesgo-res-card-titulo {
    margin: 0;
    font-size: var(--wp--preset--font-size-h5);
    line-height: var(--wp--preset--line-height-h5);
    font-weight: var(--wp--custom--weight-500);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

.mapa-riesgo-pastilla {
    flex: none;
    padding: 4px 12px;
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--form-tag);
    line-height: var(--wp--preset--line-height--form-tag);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* = .texto-image-list-descripcion */
.mapa-riesgo-card-texto {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
}

/* Campos: = .form-grid / .field / .form-label / select de los formularios
   CF7 dentro de .si-form-card (valores medidos en texto-imagen). */
.mapa-riesgo-campos {
    display: grid;
    gap: 6px 12px;
}

.mapa-riesgo-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mapa-riesgo-campo label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--wp--preset--font-size--form-tag);
    line-height: var(--wp--preset--font-size--form-tag);
    font-weight: 400;
    letter-spacing: 0.04em;
    /* Mismo gris que .si-form-card .form-label (AA sobre blanco y white-03). */
    color: #5B5B63;
}

.mapa-riesgo-campo select {
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 12px 44px 12px 12px;
    border: 1px solid var(--wp--preset--color--grey-05);
    border-radius: var(--wp--custom--radius--sm);
    background-color: var(--wp--preset--color--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    color: var(--wp--preset--color--black);
    appearance: none;
    cursor: pointer;
}

.mapa-riesgo-campo select:focus {
    outline: none;
    border-color: var(--wp--preset--color--main-blue);
}

/* Botón de envío: = .si-form-card .wpcf7-submit */
.mapa-riesgo-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: var(--wp--custom--radius--xl);
    background: var(--wp--preset--color--main-blue);
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-wrap: balance;
    cursor: pointer;
    transition: var(--btn-transition);
}

.mapa-riesgo-enviar:hover {
    background-color: var(--wp--preset--color--hover-blue);
    transform: translateY(-2px);
}

.mapa-riesgo-enviar:focus-visible {
    outline: 2px solid var(--wp--preset--color--hover-blue);
    outline-offset: 2px;
}

/* Sobre gris claro, tarjeta, campos y texto del botón pasan a white-03
   (mismo criterio que .block-texto-image.fondo-white-02 .si-form-card). */
.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-card,
.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-campo select {
    background-color: var(--wp--preset--color--white-03);
}

.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-enviar {
    color: var(--wp--preset--color--white-03);
}

/* = .si-form-card .privacy-text */
.mapa-riesgo-nota {
    margin: 0;
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: 1.5;
    color: var(--wp--preset--color--black);
}

/* ── Vista de resultados ───────────────────────────────────── */
.mapa-riesgo-resultados {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.mapa-riesgo-res-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: 60px;
}

.mapa-riesgo-res-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
}

.mapa-riesgo-res-cabecera > .mapa-riesgo-eyebrow {
    margin: 0;
}

.mapa-riesgo-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: -10px 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1;
    font-weight: var(--wp--custom--weight-700);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Flecha del tema (la de 16px), girada; centrada con el texto por flex. */
.mapa-riesgo-volver-flecha {
    flex: none;
    display: block;
}

.block-mapa-riesgo .mapa-riesgo-volver {
    margin: -10px 0;
}

.mapa-riesgo-volver:hover {
    color: var(--wp--preset--color--hover-blue);
}

/* Recibe el foco por código al mostrar resultados (no es interactivo). */
.mapa-riesgo-res-titulo:focus {
    outline: none;
}

.mapa-riesgo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapa-riesgo-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--wp--preset--color--grey-05);
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    font-weight: var(--wp--custom--weight-400);
    cursor: pointer;
    transition: border-color 200ms ease-out;
}

.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-chip {
    background-color: var(--wp--preset--color--white-03);
}

.mapa-riesgo-chip:hover {
    border-color: var(--wp--preset--color--main-blue);
}

.mapa-riesgo-volver:focus-visible,
.mapa-riesgo-chip:focus-visible,
.mapa-riesgo-enlace:focus-visible {
    outline: 2px solid var(--wp--preset--color--hover-blue);
    outline-offset: 2px;
}

.mapa-riesgo-res-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    row-gap: 24px;
    align-items: stretch;
}

/* Tarjetas de resultados: misma tarjeta que el formulario (.si-form-card). */
.mapa-riesgo-res-card,
.mapa-riesgo-cta,
.mapa-riesgo-acciones {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--wp--custom--radius--lg);
}

.mapa-riesgo-res-card,
.mapa-riesgo-cta {
    background: var(--wp--preset--color--white);
    box-shadow: var(--shadow-card-soft);
}

.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-res-card,
.block-mapa-riesgo.fondo-white-02 .mapa-riesgo-cta {
    background: var(--wp--preset--color--white-03);
}

.mapa-riesgo-riesgos {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapa-riesgo-riesgo-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* = .texto-image-list-titulo */
.mapa-riesgo-riesgo-nombre {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
}

.mapa-riesgo-tag {
    flex: none;
    padding: 4px 12px;
    border-radius: var(--wp--custom--radius--full);
    font-size: var(--wp--preset--font-size--form-tag);
    line-height: var(--wp--preset--line-height--form-tag);
    font-weight: var(--wp--custom--weight-700);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mapa-riesgo-barra {
    height: 10px;
    margin-top: 8px;
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    overflow: hidden;
}

.mapa-riesgo-barra span {
    display: block;
    height: 100%;
    border-radius: var(--wp--custom--radius--full);
    animation: mapa-riesgo-barra 700ms ease-out both;
    transform-origin: left center;
}

@keyframes mapa-riesgo-barra {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.mapa-riesgo-riesgo.is-alta .mapa-riesgo-tag {
    background-color: var(--wp--preset--color--main-blue);
    color: var(--wp--preset--color--white);
}

.mapa-riesgo-riesgo.is-alta .mapa-riesgo-barra span {
    background-color: var(--wp--preset--color--main-blue);
}

.mapa-riesgo-riesgo.is-media .mapa-riesgo-tag {
    background-color: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
}

.mapa-riesgo-riesgo.is-media .mapa-riesgo-barra span {
    background-color: var(--wp--preset--color--hover-blue);
    opacity: 0.55;
}

.mapa-riesgo-riesgo.is-vigilar .mapa-riesgo-tag {
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--text-secondary);
}

.mapa-riesgo-riesgo.is-vigilar .mapa-riesgo-barra span {
    background-color: var(--wp--preset--color--grey-06);
}

/* = .texto-image-barras-leyenda */
.block-mapa-riesgo .mapa-riesgo-res-nota {
    margin-top: auto;
    padding-top: 12px;
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: 1.5;
    color: var(--wp--preset--color--text-secondary);
}

.mapa-riesgo-res-lateral {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mapa-riesgo-acciones {
    background-color: var(--wp--preset--color--main-blue);
    color: var(--wp--preset--color--white);
}

/* "Dónde actuar primero": mismo título que el resto de tarjetas, en blanco. */
.block-mapa-riesgo .mapa-riesgo-acciones-titulo {
    color: var(--wp--preset--color--white);
}

.mapa-riesgo-acciones-lista {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mapa-riesgo-accion;
}

/* = .texto-image-description, en blanco sobre azul */
.mapa-riesgo-acciones-lista li {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--white);
    counter-increment: mapa-riesgo-accion;
}

.mapa-riesgo-acciones-lista li::before {
    content: counter(mapa-riesgo-accion) ". ";
    font-weight: var(--wp--custom--weight-700);
}

/* El CTA es un botón del tema (.wp-block-button__link, "Botón unificado"). */
.block-mapa-riesgo .mapa-riesgo-cta .mapa-riesgo-boton {
    width: 100%;
}

.mapa-riesgo-flecha {
    flex: none;
}

.mapa-riesgo-enlace {
    align-self: flex-start;
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    font-weight: var(--wp--custom--weight-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mapa-riesgo-enlace:hover {
    color: var(--wp--preset--color--hover-blue);
}

.mapa-riesgo-aviso-editor {
    margin: 0;
    padding: 24px;
    border: 1px dashed var(--wp--preset--color--grey-05);
    border-radius: var(--wp--custom--radius--md);
    color: var(--wp--preset--color--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .mapa-riesgo-barra span {
        animation: none;
    }

    .mapa-riesgo-enviar:hover {
        transform: none;
    }
}

/* ── Mismos cortes que texto-imagen ────────────────────────── */
@media (min-width: 1441px) {
    .inner-mapa-riesgo {
        max-width: var(--wp--custom--layout--content-size);
    }

    .mapa-riesgo-card {
        max-width: 700px;
    }
}

@media (max-width: 1440px) {
    .mapa-riesgo-texto {
        max-width: 785px;
    }
}

@media (min-width: 1920px) {
    .mapa-riesgo-texto {
        max-width: 650px;
    }
}

/* 1230px: igual que texto-imagen, pasa a una columna a la vez que el menú. */
@media (max-width: 1230px) {
    /* Como en texto-imagen, aquí también se anula el espacio extra de hero. */
    .block-mapa-riesgo,
    .block-mapa-riesgo.p-140 {
        padding-block: 50px;
    }

    .mapa-riesgo-inicial {
        flex-direction: column;
        row-gap: 24px;
    }

    .mapa-riesgo-texto,
    .mapa-riesgo-card {
        width: 100%;
        max-width: 100%;
    }

    .block-mapa-riesgo .mapa-riesgo-heading,
    .block-mapa-riesgo .mapa-riesgo-res-titulo {
        font-size: var(--wp--preset--font-size-h4);
        line-height: var(--wp--preset--line-height-h4);
    }

    .mapa-riesgo-res-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mapa-riesgo-res-cabecera {
        flex-direction: column-reverse;
        align-items: flex-start;
        row-gap: 24px;
    }
}

@media (max-width: 920px) {
    .block-mapa-riesgo {
        padding-inline: var(--wp--custom--section--x-mobile);
    }

    /* = texto-imagen: sombra menor para que el gutter de 20px no la recorte. */
    .mapa-riesgo-card,
    .mapa-riesgo-res-card,
    .mapa-riesgo-cta {
        box-shadow: var(--shadow-card-sm);
    }

    .mapa-riesgo-riesgo-fila {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
}

@media (max-width: 768px) {
    .mapa-riesgo-card,
    .mapa-riesgo-res-card,
    .mapa-riesgo-cta,
    .mapa-riesgo-acciones {
        padding: 28px;
    }
}

@media (max-width: 380px) {
    .mapa-riesgo-card,
    .mapa-riesgo-res-card,
    .mapa-riesgo-cta,
    .mapa-riesgo-acciones {
        padding: 20px;
    }

    .mapa-riesgo-enviar {
        padding: 14px 20px;
    }
}