/* Las reglas de texto de esta hoja valen solo para el contenido (.section-legal) y el banner (.top-section):
   antes iban sobre h3/h4/h5/p/ol de toda la página y alteraban la cabecera (carrito, megamenú) y el pie. */
.section-legal h3,
.top-section h3 {
    color: var(--colors-text-text-default, #040A17);
    /* Heading/heading-L */
    font-family: Archivo;
    font-size: 44px;
    font-style: normal;
    font-weight: lighter;
    line-height: 52px;
   
    /* 118.182% */
    
}

.section-legal h4,
.top-section h4 {
    color: var(--colors-text-text-default, #040A17);
    /* Heading/heading-M */
    font-family: Archivo;
    font-size: 32px;
    font-style: normal;
    font-weight: lighter;
    line-height: 40px;
    /* 125% */
    letter-spacing: 0.4px;
    margin-top: 64px;
 
}

.section-legal p,
.top-section p {
    color: var(--colors-text-text-secondary, #49566D);
    /* Body/body-S */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: lighter;
    line-height: 22px;
    margin-bottom: 0;
    /* 157.143% */
}

.section-legal h5,
.top-section h5 {
    color: var(--colors-text-text-default, #040A17);
    /* Heading/heading-S */
    font-family: Archivo;
    font-size: 24px;
    font-style: normal;
    font-weight: lighter;
    line-height: 32px;
    /* 133.333% */
    letter-spacing: 0.4px;
    margin-top: 32px;
 
}

.check {
    accent-color: #10646C;
}

.section-legal ol {
    padding-inline-start: 20px;
    margin-bottom: 0;
}

.table-scroll {
    overflow-x: scroll;
}

.section-legal .container {
    display: flex;

    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Página de subvenciones (/subvenciones, /subsidies; SiteController::subsidies).
   Estética oscura de la sección WORK PRO de /innovacion (about.css: .wp-section, .flex-box.dark),
   porque los logos están pensados para fondo oscuro. */
.subsidies-page {
    background: var(--colors-background-bkg-color, #040A17);
    background-image: url('/images/confianza.jpg');
    background-size: cover;
    background-position: center;
}
.subsidies-page .container {
    align-items: stretch;
    gap: 0;
}
.subsidies-page .subsidies-row {
    width: 100%;
}
.subsidies-page .subsidies-row {
    display: flex;
    flex-wrap: nowrap; /* cada fila, en una sola línea: las tarjetas se encogen para caber */
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-spacing-m, 24px);
    padding: 32px 0;
    border-bottom: 1px solid var(--colors-stroke-stroke-secondary, #49566D);
}
.subsidies-page .subsidies-row:last-child {
    border-bottom: 0;
}
/* Cada tarjeta pesa --w (la vista lo calcula: nº de imágenes, o 2 si solo lleva texto) y pide w*300px.
   Si la fila no cabe, todas se encogen en proporción a ese peso (flex-shrink) hasta entrar en una sola
   línea; min-width: 0 les permite encogerse sin límite. */
.subsidy-card {
    display: flex;
    flex: 0 1 calc(var(--w, 1) * 300px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-spacing-m, 24px);
    min-width: 0;
    padding: var(--spacing-spacing-m, 24px);
    border-radius: var(--radius-radius-m, 16px);
    border: 1px solid var(--colors-stroke-stroke-secondary, #49566D);
    background: var(--colors-background-bkg-color, #040A17);
    color: var(--colors-text-text-oncolor, #FFF);
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.subsidy-card--text {
    align-items: flex-start;
}
/* Varios elementos en la misma subvención (varias imágenes, o imagen y texto): en la misma fila,
   todos con el mismo ancho. Su peso (--w) ya es el de la suma de elementos. */
.subsidy-card__logos {
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-m, 24px);
}
.subsidy-card--multi {
    flex-direction: row;
    align-items: center;
}
.subsidy-card--multi .subsidy-card__logos {
    display: contents;
}
.subsidy-card--multi .subsidy-card__logo,
.subsidy-card--multi .subsidy-card__text {
    flex: 1 1 0;
    min-width: 0;
}
.subsidy-card--multi .subsidy-card__logo {
    width: 0;
}
a.subsidy-card:hover,
a.subsidy-card:focus {
    border-color: #18CDDF;
    color: var(--colors-text-text-oncolor, #FFF);
    text-decoration: none;
}
.subsidy-card__logo {
    height: 96px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    object-fit: contain;
}
.subsidy-card__text {
    color: var(--colors-text-text-oncolor, #FFF);
    font-feature-settings: 'salt' on;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere; /* una palabra larga en una tarjeta estrecha se parte (con guion si el idioma de la página lo permite) en lugar de salirse */
}
.subsidy-card__text p {
    margin: 0 0 0.5em;
    /* Quill envuelve el texto en <p>: no debe tomar el gris y la letra de la regla global p */
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-feature-settings: inherit;
}
.subsidy-card__text p:last-child {
    margin-bottom: 0;
}
.subsidy-card__text b,
.subsidy-card__text strong {
    color: #18CDDF;
    font-weight: 600;
}
/* Tablets en vertical y móviles (en vertical o en horizontal): aquí NO rige la regla de una sola línea por fila.
   Las filas pueden saltar de línea y las tarjetas se apilan: una por línea en móvil, y varias si caben en la tablet.
   - max-width 940px: móviles, también en horizontal (hasta ~932px).
   - max-width 1024px + vertical: tablets en vertical (de 744 a 1024px). Las tablets en horizontal siguen con la regla. */
@media (max-width: 940px), (max-width: 1024px) and (orientation: portrait) {
    .subsidies-page .subsidies-row {
        flex-wrap: wrap;
    }
    .subsidy-card {
        flex: 1 1 260px;
    }
    .subsidy-card--text {
        flex: 1 1 320px;
    }
    .subsidy-card--multi {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .subsidy-card--multi .subsidy-card__logos {
        display: flex;
        flex-wrap: wrap;
    }
    .subsidy-card--multi .subsidy-card__logo {
        flex: none;
        width: auto;
    }
}
@media (max-width: 576px) {
    .subsidies-page .subsidies-row {
        gap: 16px;
    }
    .subsidy-card,
    .subsidy-card--text {
        flex: 1 1 100%;
    }
    .subsidy-card__logo {
        height: 72px;
    }
}