:root {
    --publico-verde: #14533b;
    --publico-verde-profundo: #0d3d2b;
    --publico-oliva: #7a9120;
    --publico-fondo: #f9fbf5;
    --publico-blanco: #ffffff;
    --publico-texto: #383836;
    --publico-texto-oscuro: #1f2937;
    --publico-borde: #dfe8dd;
    --publico-sombra: 0 12px 32px rgba(20, 83, 59, 0.11);
    --publico-ancho: 1180px;
    --publico-radio: 18px;
    --fuente-principal: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fuente-redondeada: "Fredoka", var(--fuente-principal);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.pagina-publica {
    min-width: 0;
    margin: 0;
    color: var(--publico-texto);
    background: var(--publico-fondo);
    font-family: var(--fuente-principal);
    line-height: 1.6;
}

.pagina-publica :where(img) {
    max-width: 100%;
    height: auto;
}

.pagina-publica :where(a) {
    color: inherit;
}

.contenedor {
    width: min(calc(100% - 40px), var(--publico-ancho));
    margin-inline: auto;
}

.texto-solo-lectura {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.salto-contenido {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    color: var(--publico-blanco);
    background: var(--publico-verde-profundo);
    border-radius: 8px;
    transform: translateY(-180%);
    transition: transform 160ms ease;
}

.salto-contenido:focus {
    transform: translateY(0);
}

.encabezado-publico {
    position: sticky;
    z-index: 100;
    top: 0;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--publico-borde);
    box-shadow: 0 4px 18px rgba(20, 83, 59, 0.06);
    backdrop-filter: blur(10px);
}

.encabezado-interior {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.marca-publica {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
}

.marca-publica img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: contain;
}

.navegacion-publica ul,
.pie-navegacion ul,
.redes-publicas {
    padding: 0;
    margin: 0;
    list-style: none;
}

.navegacion-publica ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.navegacion-publica a {
    display: block;
    padding: 11px 13px;
    border-radius: 999px;
    color: var(--publico-texto-oscuro);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.navegacion-publica a:hover,
.navegacion-publica a:focus-visible,
.navegacion-publica a.activo:not(.enlace-donar) {
    color: var(--publico-verde);
    background: #edf5ea;
}

.navegacion-publica .enlace-donar {
    padding-inline: 21px;
    color: var(--publico-blanco);
    background: #657a17;
}

.navegacion-publica .enlace-donar:hover,
.navegacion-publica .enlace-donar:focus-visible,
.navegacion-publica .enlace-donar.activo {
    color: var(--publico-blanco);
    background: #657a17;
    transform: translateY(-1px);
}

.boton-menu {
    display: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 1px solid var(--publico-borde);
    border-radius: 12px;
    color: var(--publico-verde);
    background: var(--publico-blanco);
    cursor: pointer;
}

.boton-menu > span:not(.texto-solo-lectura) {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: currentColor;
    border-radius: 2px;
    transition: transform 160ms ease, opacity 160ms ease;
}

.boton-menu[aria-expanded="true"] > span:nth-of-type(2) {
    transform: translateY(7px) rotate(45deg);
}

.boton-menu[aria-expanded="true"] > span:nth-of-type(3) {
    opacity: 0;
}

.boton-menu[aria-expanded="true"] > span:nth-of-type(4) {
    transform: translateY(-7px) rotate(-45deg);
}

.portada-inicio {
    position: relative;
    display: grid;
    min-height: clamp(450px, 58vw, 560px);
    overflow: hidden;
    isolation: isolate;
    place-items: center start;
    background: var(--publico-verde-profundo);
}

.portada-inicio-imagen,
.portada-inicio-capa {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portada-inicio-imagen {
    object-fit: cover;
}

.portada-inicio-capa {
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 54, 38, 0.95) 0%, rgba(13, 61, 43, 0.82) 50%, rgba(13, 61, 43, 0.3) 100%);
}

.portada-sin-imagen {
    background:
        radial-gradient(circle at 82% 22%, rgba(122, 145, 32, 0.45), transparent 25%),
        radial-gradient(circle at 70% 88%, rgba(255, 255, 255, 0.09), transparent 30%),
        linear-gradient(135deg, var(--publico-verde-profundo), var(--publico-verde));
}

.portada-inicio-contenido {
    padding-block: 72px;
    color: var(--publico-blanco);
}

.portada-inicio-etiqueta,
.sobrelinea-publica {
    margin: 0 0 12px;
    color: #d8e78f;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.portada-inicio h1 {
    max-width: 14ch;
    margin: 0;
    font-family: var(--fuente-redondeada);
    font-size: clamp(2.65rem, 7vw, 4.9rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-wrap: balance;
}

.portada-inicio-descripcion {
    max-width: 60ch;
    margin: 24px 0 0;
    color: #f2f7f3;
    font-size: clamp(1.02rem, 2.2vw, 1.24rem);
    line-height: 1.7;
}

.acciones-inicio {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.boton-publico {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.boton-publico:hover,
.boton-publico:focus-visible {
    transform: translateY(-2px);
}

.boton-publico-claro {
    color: var(--publico-verde-profundo);
    background: var(--publico-blanco);
}

.boton-publico-claro:hover,
.boton-publico-claro:focus-visible {
    background: #edf5ea;
}

.boton-publico-oliva {
    color: var(--publico-blanco);
    background: #657a17;
}

.boton-publico-oliva:hover,
.boton-publico-oliva:focus-visible {
    background: #536511;
}

.seccion-publicaciones-inicio {
    padding: 82px 0 92px;
}

.encabezado-seccion-publica {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--publico-borde);
}

.encabezado-seccion-publica .sobrelinea-publica,
.llamada-inicio .sobrelinea-publica {
    color: #657a17;
}

.encabezado-seccion-publica h2,
.llamada-inicio h2 {
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.15;
    text-wrap: balance;
}

.aviso-publicaciones-inicio {
    max-width: 60ch;
    margin: 14px 0 0;
    color: var(--publico-texto-oscuro);
    line-height: 1.6;
}

.enlace-ver-todas {
    flex: 0 0 auto;
    padding: 9px 0;
    color: var(--publico-verde);
    font-weight: 750;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.rejilla-publicaciones-inicio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.tarjeta-publicacion-inicio {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    background: var(--publico-blanco);
    border: 1px solid var(--publico-borde);
    border-radius: var(--publico-radio);
    box-shadow: 0 10px 28px rgba(20, 83, 59, 0.07);
}

.tarjeta-publicacion-imagen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 8 / 5;
    background: #dfe8dd;
}

.tarjeta-publicacion-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 180ms ease, transform 280ms ease;
}

.imagen-publica-cargando,
.imagen-publica-error {
    position: relative;
    isolation: isolate;
}

.imagen-publica-cargando img,
.imagen-publica-error img {
    opacity: 0;
    color: transparent;
}

.imagen-publica-lista img {
    opacity: 1;
}

.imagen-publica-cargando::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(105deg, #dfe8dd 28%, #edf3eb 42%, #dfe8dd 56%);
    background-size: 220% 100%;
    content: "";
    animation: carga-imagen-publica 1.35s ease-in-out infinite;
    pointer-events: none;
}

.imagen-publica-error::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    padding: 20px;
    color: #456153;
    content: "Imagen no disponible";
    font-weight: 650;
    place-items: center;
    text-align: center;
}

@keyframes carga-imagen-publica {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

.tarjeta-publicacion-inicio:hover .tarjeta-publicacion-imagen img {
    transform: scale(1.025);
}

.tarjeta-publicacion-sin-imagen {
    display: grid;
    padding: 20px;
    color: #eaf3e9;
    background:
        radial-gradient(circle at 75% 20%, rgba(216, 231, 143, 0.35), transparent 24%),
        linear-gradient(135deg, var(--publico-verde), var(--publico-verde-profundo));
    font-family: var(--fuente-redondeada);
    font-size: 1.3rem;
    font-weight: 650;
    place-items: center;
    text-align: center;
}

.tarjeta-publicacion-contenido {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 25px;
}

.categorias-publicacion {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    margin: 0 0 14px;
    list-style: none;
}

.categorias-publicacion li {
    padding: 5px 10px;
    color: var(--publico-verde-profundo);
    background: #edf3df;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    line-height: 1.25;
    text-transform: uppercase;
}

.tarjeta-publicacion-contenido h3 {
    display: -webkit-box;
    min-block-size: calc(1.28em * 3);
    overflow: hidden;
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: 1.42rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tarjeta-publicacion-contenido > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 14px 0 22px;
    color: #525b55;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tarjeta-publicacion-pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-top: 17px;
    margin-top: auto;
    border-top: 1px solid var(--publico-borde);
}

.tarjeta-publicacion-pie time {
    color: #66716a;
    font-size: 0.78rem;
}

.tarjeta-publicacion-pie a {
    color: var(--publico-verde);
    font-size: 0.86rem;
    font-weight: 800;
    text-align: right;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.estado-vacio-publico {
    padding: 48px 28px;
    background: var(--publico-blanco);
    border: 1px dashed #afc0b1;
    border-radius: var(--publico-radio);
    text-align: center;
}

.estado-vacio-publico h3 {
    margin: 0 0 8px;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: 1.45rem;
}

.estado-vacio-publico p {
    margin: 0;
}

.llamada-inicio {
    padding: 70px 0;
    color: var(--publico-texto);
    background: #eef4e9;
    border-top: 1px solid var(--publico-borde);
}

.llamada-inicio-interior {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
    align-items: center;
    gap: 54px;
}

.llamada-inicio h2 {
    max-width: 22ch;
}

.llamada-inicio h2 + p {
    max-width: 66ch;
    margin: 18px 0 0;
    color: #525b55;
}

.acciones-inicio-finales {
    justify-content: flex-end;
    margin-top: 0;
}

.boton-publico-verde {
    color: var(--publico-blanco);
    background: var(--publico-verde);
}

.boton-publico-verde:hover,
.boton-publico-verde:focus-visible {
    background: var(--publico-verde-profundo);
}

.boton-publico-borde {
    color: var(--publico-verde-profundo);
    background: transparent;
    border-color: var(--publico-verde);
}

.boton-publico-borde:hover,
.boton-publico-borde:focus-visible {
    color: var(--publico-blanco);
    background: var(--publico-verde);
}

.cabecera-pagina-publica {
    padding: 74px 0 78px;
    color: var(--publico-blanco);
    background:
        radial-gradient(circle at 82% 20%, rgba(122, 145, 32, 0.48), transparent 26%),
        linear-gradient(135deg, var(--publico-verde-profundo), var(--publico-verde));
}

.cabecera-pagina-contenido {
    text-align: center;
}

.cabecera-pagina-publica .sobrelinea-publica {
    color: #d8e78f;
}

.cabecera-pagina-publica h1 {
    margin: 0;
    font-family: var(--fuente-redondeada);
    font-size: clamp(2.55rem, 6vw, 4.3rem);
    line-height: 1.05;
}

.cabecera-pagina-publica h1 + p {
    max-width: 58ch;
    margin: 18px auto 0;
    color: #e8f2ea;
    font-size: 1.08rem;
}

.listado-publicaciones-publicas {
    padding: 72px 0 92px;
}

.encabezado-listado-publico {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--publico-borde);
}

.encabezado-listado-publico h2 {
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.encabezado-listado-publico p {
    margin: 0;
    color: #66716a;
    font-size: 0.9rem;
}

.seccion-areas-trabajo {
    padding: 76px 0 92px;
    background: var(--publico-fondo);
}

.encabezado-areas-trabajo {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.encabezado-areas-trabajo h2,
.llamada-areas-trabajo h2 {
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    line-height: 1.12;
}

.encabezado-areas-trabajo > p:last-child {
    max-width: 62ch;
    margin: 16px auto 0;
    color: #5f6d65;
    line-height: 1.75;
}

.rejilla-areas-trabajo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.tarjeta-area-trabajo {
    position: relative;
    min-width: 0;
    padding: 34px;
    overflow: hidden;
    background: var(--publico-blanco);
    border: 1px solid var(--publico-borde);
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(15, 74, 51, 0.07);
}

.tarjeta-area-trabajo::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    content: '';
    background: linear-gradient(var(--publico-oliva), var(--publico-verde));
}

.numero-area {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--publico-verde-profundo);
    background: #eef3d5;
    border-radius: 50%;
    font-family: var(--fuente-redondeada);
    font-weight: 700;
}

.tarjeta-area-trabajo h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.18;
}

.tarjeta-area-trabajo p {
    margin: 15px 0 0;
    overflow-wrap: anywhere;
    color: #5f6d65;
    line-height: 1.75;
}

.tarjeta-area-trabajo .descripcion-area-vacia {
    color: #77827c;
    font-style: italic;
}

.llamada-areas-trabajo {
    padding: 66px 0;
    background: var(--publico-blanco);
    border-top: 1px solid var(--publico-borde);
}

.llamada-areas-trabajo p:not(.sobrelinea-publica) {
    max-width: 62ch;
    margin: 16px 0 0;
    color: #5f6d65;
    line-height: 1.75;
}

.llamada-areas-trabajo .boton-publico {
    justify-self: end;
    text-align: center;
}

.seccion-identidad-institucional {
    padding: 76px 0 92px;
    background: var(--publico-fondo);
}

.contenedor-identidad-institucional {
    display: grid;
    gap: 30px;
}

.bloque-sobre-nosotros {
    max-width: 900px;
    padding: 42px;
    margin: 0 auto;
    background: var(--publico-blanco);
    border: 1px solid var(--publico-borde);
    border-radius: 24px;
    box-shadow: var(--publico-sombra);
}

.bloque-sobre-nosotros h2,
.tarjeta-proposito-institucional h2,
.encabezado-valores-publicos h2,
.llamada-identidad-publica h2 {
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    line-height: 1.12;
}

.bloque-sobre-nosotros > p:last-child,
.tarjeta-proposito-institucional > p:last-child {
    margin: 18px 0 0;
    color: #536159;
    line-height: 1.85;
    white-space: pre-line;
}

.rejilla-proposito-institucional {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.tarjeta-proposito-institucional {
    min-width: 0;
    padding: 36px;
    background: var(--publico-blanco);
    border: 1px solid var(--publico-borde);
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(15, 74, 51, 0.07);
}

.distintivo-proposito {
    display: inline-flex;
    min-width: 48px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    margin-bottom: 22px;
    color: var(--publico-verde-profundo);
    background: #eef3d5;
    border-radius: 999px;
    font-family: var(--fuente-redondeada);
    font-weight: 700;
}

.seccion-valores-publicos {
    padding: 72px 0 88px;
    background: var(--publico-blanco);
}

.encabezado-valores-publicos {
    margin-bottom: 36px;
    text-align: center;
}

.rejilla-valores-publicos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tarjeta-valor-publico {
    min-width: 0;
    padding: 30px;
    background: var(--publico-fondo);
    border: 1px solid var(--publico-borde);
    border-top: 5px solid var(--publico-oliva);
    border-radius: 18px;
}

.tarjeta-valor-publico h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: 1.45rem;
    line-height: 1.2;
}

.tarjeta-valor-publico p {
    margin: 13px 0 0;
    overflow-wrap: anywhere;
    color: #5f6d65;
    line-height: 1.7;
    white-space: pre-line;
}

.estado-vacio-institucional {
    max-width: 760px;
    margin: 0 auto;
}

.estado-vacio-institucional h2 {
    margin: 0 0 12px;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
}

.estado-vacio-valores {
    max-width: 760px;
    margin: 0 auto;
}

.llamada-identidad-publica {
    padding: 66px 0;
    background: var(--publico-fondo);
    border-top: 1px solid var(--publico-borde);
}

.llamada-identidad-publica p:not(.sobrelinea-publica) {
    max-width: 62ch;
    margin: 16px 0 0;
    color: #5f6d65;
    line-height: 1.75;
}

.llamada-identidad-publica .boton-publico {
    justify-self: end;
    text-align: center;
}

.cabecera-donacion-publica {
    background:
        radial-gradient(circle at 18% 25%, rgba(216, 231, 143, 0.24), transparent 25%),
        radial-gradient(circle at 82% 20%, rgba(122, 145, 32, 0.48), transparent 26%),
        linear-gradient(135deg, var(--publico-verde-profundo), var(--publico-verde));
}

.seccion-donacion-publica {
    padding: 76px 0 92px;
    background: var(--publico-fondo);
}

.contenido-donacion-publica {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: center;
    gap: clamp(38px, 7vw, 86px);
}

.introduccion-donacion-publica h2,
.cierre-donacion-publica h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    line-height: 1.12;
}

.introduccion-donacion-publica > p:not(.sobrelinea-publica) {
    max-width: 62ch;
    margin: 18px 0 0;
    color: #536159;
    line-height: 1.8;
}

.introduccion-donacion-publica .contacto-donacion {
    padding-top: 20px;
    margin-top: 26px;
    border-top: 1px solid var(--publico-borde);
}

.contacto-donacion a {
    color: var(--publico-verde-profundo);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.tarjeta-qr-donacion {
    min-width: 0;
    padding: 34px;
    text-align: center;
    background: var(--publico-blanco);
    border: 1px solid var(--publico-borde);
    border-radius: 24px;
    box-shadow: var(--publico-sombra);
}

.marco-qr-donacion {
    width: min(100%, 330px);
    padding: 14px;
    margin: 0 auto 26px;
    background: var(--publico-blanco);
    border: 1px solid var(--publico-borde);
    border-radius: 18px;
}

.marco-qr-donacion img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.marcador-qr-pendiente {
    position: relative;
    display: grid;
    width: min(100%, 250px);
    aspect-ratio: 1;
    place-items: center;
    margin: 0 auto 26px;
    background:
        linear-gradient(45deg, transparent 48%, rgba(15, 74, 51, 0.08) 49%, rgba(15, 74, 51, 0.08) 51%, transparent 52%),
        #f3f6ec;
    border: 2px dashed #a7b1a9;
    border-radius: 20px;
}

.marcador-qr-pendiente span {
    position: absolute;
    width: 54px;
    height: 54px;
    border: 8px solid var(--publico-verde-profundo);
    border-radius: 8px;
    opacity: 0.32;
}

.marcador-qr-pendiente span:nth-child(1) {
    top: 28px;
    left: 28px;
}

.marcador-qr-pendiente span:nth-child(2) {
    top: 28px;
    right: 28px;
}

.marcador-qr-pendiente span:nth-child(3) {
    bottom: 28px;
    left: 28px;
}

.tarjeta-qr-donacion h2 {
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    line-height: 1.18;
}

.tarjeta-qr-donacion p {
    margin: 14px 0 0;
    color: #5f6d65;
    line-height: 1.65;
}

.tarjeta-qr-donacion .aviso-verificacion-donacion {
    padding: 12px 14px;
    color: #5c4b14;
    background: #f8f3d9;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
}

.cierre-donacion-publica {
    padding: 68px 0;
    text-align: center;
    background: var(--publico-blanco);
    border-top: 1px solid var(--publico-borde);
}

.cierre-donacion-publica h2 {
    max-width: 22ch;
    margin-inline: auto;
}

.cierre-donacion-publica .boton-publico {
    margin-top: 28px;
}

.detalle-publicacion-publica {
    background: var(--publico-fondo);
}

.contenedor-articulo-publico {
    max-width: 920px;
}

.cabecera-detalle-publicacion {
    padding: 44px 0 38px;
    background: var(--publico-blanco);
    border-bottom: 1px solid var(--publico-borde);
}

.volver-publicaciones {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 7px;
    margin-bottom: 30px;
    color: var(--publico-verde);
    font-weight: 750;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.categorias-detalle {
    margin-bottom: 17px;
}

.cabecera-detalle-publicacion h1 {
    max-width: 21ch;
    margin: 0;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(2.35rem, 6vw, 4.2rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-wrap: balance;
}

.cabecera-detalle-publicacion .titulo-publicacion-largo {
    max-width: 27ch;
    font-size: clamp(2.1rem, 4.5vw, 3.35rem);
    line-height: 1.1;
}

.cabecera-detalle-publicacion .titulo-publicacion-muy-largo {
    max-width: 34ch;
    font-size: clamp(1.85rem, 3.6vw, 2.75rem);
    line-height: 1.12;
}

.resumen-detalle-publicacion {
    max-width: 70ch;
    margin: 22px 0 18px;
    color: #4d5851;
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    line-height: 1.7;
}

.cabecera-detalle-publicacion time {
    color: #66716a;
    font-size: 0.9rem;
    font-weight: 600;
}

.cuerpo-detalle-publicacion {
    padding-top: 42px;
    padding-bottom: 92px;
}

.portada-detalle-publicacion {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0 0 44px;
    background: #dfe8dd;
    border-radius: 22px;
    box-shadow: var(--publico-sombra);
}

.portada-detalle-publicacion img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    transition: opacity 180ms ease;
}

.portada-detalle-vacia {
    display: grid;
    min-height: 340px;
    color: #eaf3e9;
    background:
        radial-gradient(circle at 75% 20%, rgba(216, 231, 143, 0.35), transparent 24%),
        linear-gradient(135deg, var(--publico-verde), var(--publico-verde-profundo));
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 650;
    place-items: center;
}

.texto-detalle-publicacion {
    max-width: 74ch;
    margin-inline: auto;
    color: #38433d;
    font-size: 1.05rem;
    line-height: 1.9;
    white-space: pre-line;
}

.galeria-publicacion {
    padding-top: 56px;
    margin-top: 56px;
    border-top: 1px solid var(--publico-borde);
}

.galeria-publicacion h2 {
    margin: 0 0 26px;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.rejilla-galeria-publicacion {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.rejilla-galeria-publicacion figure {
    grid-column: span 2;
    overflow: hidden;
    padding: 0;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: #dfe8dd;
    border-radius: 16px;
}

.rejilla-galeria-publicacion figure:last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
}

.rejilla-galeria-publicacion figure:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
}

.rejilla-galeria-publicacion img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .imagen-publica-cargando::after {
        animation: none;
    }
}

.pagina-no-encontrada {
    display: grid;
    min-height: 58vh;
    padding: 70px 0;
    place-items: center;
}

.estado-no-encontrado {
    text-align: center;
}

.codigo-no-encontrado {
    margin: 0;
    color: #cbd8c9;
    font-family: var(--fuente-redondeada);
    font-size: clamp(4.5rem, 15vw, 8rem);
    font-weight: 700;
    line-height: 0.9;
}

.estado-no-encontrado h1 {
    margin: 18px 0 10px;
    color: var(--publico-verde-profundo);
    font-family: var(--fuente-redondeada);
    font-size: clamp(2rem, 5vw, 3.2rem);
}

.estado-no-encontrado h1 + p {
    margin: 0 auto 28px;
    color: #59635d;
}

.reconocimiento-auspicio {
    padding: 42px 0;
    background: var(--publico-blanco);
    border-top: 1px solid var(--publico-borde);
}

.reconocimiento-interior {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.reconocimiento-interior p {
    margin: 0;
    color: var(--publico-texto-oscuro);
    font-weight: 600;
}

.reconocimiento-interior img {
    width: min(100%, 360px);
    aspect-ratio: 854 / 446;
    object-fit: contain;
}

.pie-publico {
    padding: 58px 0 24px;
    color: #eff7ef;
    background: var(--publico-verde-profundo);
}

.pie-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.75fr) minmax(200px, 1fr);
    gap: 44px;
}

.pie-publico h2 {
    margin: 0 0 15px;
    color: var(--publico-blanco);
    font-family: var(--fuente-redondeada);
    font-size: 1.2rem;
}

.pie-identidad p {
    max-width: 48ch;
    margin: 0;
    color: #cfe0d4;
}

.pie-publico a {
    color: #dcebdd;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.pie-publico a:hover,
.pie-publico a:focus-visible {
    color: var(--publico-blanco);
}

.pie-navegacion li + li,
.redes-publicas li + li {
    margin-top: 8px;
}

.pie-contacto {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.redes-publicas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
}

.redes-publicas li + li {
    margin-top: 0;
}

.pie-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    margin-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #bad0c1;
    font-size: 0.9rem;
}

.pie-inferior p {
    margin: 0;
}

@media (max-width: 900px) {
    .encabezado-interior {
        position: relative;
        min-height: 76px;
        flex-wrap: wrap;
    }

    .marca-publica img {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .publico-menu-listo .boton-menu {
        display: block;
        flex: 0 0 auto;
    }

    .navegacion-publica {
        width: 100%;
        padding-bottom: 14px;
    }

    .publico-menu-listo .navegacion-publica {
        position: absolute;
        top: calc(100% - 1px);
        right: 0;
        left: 0;
        display: none;
        width: auto;
        padding: 12px 20px 20px;
        background: var(--publico-blanco);
        border-bottom: 1px solid var(--publico-borde);
        box-shadow: var(--publico-sombra);
    }

    .publico-menu-listo .navegacion-publica.abierta {
        display: block;
    }

    .navegacion-publica ul {
        align-items: stretch;
        flex-direction: column;
    }

    .navegacion-publica a {
        padding: 12px 15px;
    }

    .navegacion-publica .enlace-donar {
        margin-top: 6px;
        text-align: center;
    }

    .pie-columnas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pie-identidad {
        grid-column: 1 / -1;
    }

    .rejilla-publicaciones-inicio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rejilla-galeria-publicacion {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rejilla-galeria-publicacion figure,
    .rejilla-galeria-publicacion figure:last-child:nth-child(3n + 1),
    .rejilla-galeria-publicacion figure:nth-last-child(2):nth-child(3n + 1) {
        grid-column: span 2;
    }

    .rejilla-galeria-publicacion figure:last-child:nth-child(odd) {
        grid-column: 2 / span 2;
    }

    .llamada-inicio-interior {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .acciones-inicio-finales {
        justify-content: flex-start;
    }

    .llamada-areas-trabajo .boton-publico {
        justify-self: start;
    }

    .rejilla-valores-publicos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .llamada-identidad-publica .boton-publico {
        justify-self: start;
    }

    .contenido-donacion-publica {
        grid-template-columns: 1fr;
    }

    .introduccion-donacion-publica h2 {
        max-width: 22ch;
    }

    .tarjeta-qr-donacion {
        width: min(100%, 560px);
        justify-self: center;
    }
}

@media (max-width: 600px) {
    .contenedor {
        width: min(calc(100% - 28px), var(--publico-ancho));
    }

    .marca-publica {
        max-width: calc(100% - 60px);
        gap: 9px;
        font-size: 1.08rem;
    }

    .marca-publica img {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .portada-inicio {
        min-height: 430px;
    }

    .portada-inicio-capa {
        background: linear-gradient(90deg, rgba(9, 54, 38, 0.95), rgba(13, 61, 43, 0.68));
    }

    .portada-inicio-contenido {
        padding-block: 54px;
    }

    .portada-inicio h1 {
        font-size: clamp(2.35rem, 14vw, 3.25rem);
    }

    .acciones-inicio .boton-publico {
        width: 100%;
    }

    .seccion-publicaciones-inicio {
        padding: 58px 0 64px;
    }

    .encabezado-seccion-publica {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 26px;
    }

    .rejilla-publicaciones-inicio {
        grid-template-columns: 1fr;
    }

    .tarjeta-publicacion-contenido h3 {
        min-block-size: 0;
    }

    .tarjeta-publicacion-pie {
        align-items: flex-start;
        flex-direction: column;
    }

    .tarjeta-publicacion-pie a {
        text-align: left;
    }

    .llamada-inicio {
        padding: 52px 0;
    }

    .cabecera-pagina-publica {
        padding: 56px 0 60px;
    }

    .listado-publicaciones-publicas {
        padding: 52px 0 64px;
    }

    .seccion-areas-trabajo {
        padding: 54px 0 64px;
    }

    .encabezado-areas-trabajo {
        margin-bottom: 30px;
        text-align: left;
    }

    .encabezado-areas-trabajo > p:last-child {
        margin-left: 0;
    }

    .rejilla-areas-trabajo {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .tarjeta-area-trabajo {
        padding: 28px 25px;
        border-radius: 18px;
    }

    .numero-area {
        margin-bottom: 18px;
    }

    .llamada-areas-trabajo {
        padding: 52px 0;
    }

    .llamada-areas-trabajo .boton-publico {
        width: 100%;
    }

    .seccion-identidad-institucional {
        padding: 54px 0 64px;
    }

    .bloque-sobre-nosotros,
    .tarjeta-proposito-institucional {
        padding: 28px 25px;
        border-radius: 18px;
    }

    .rejilla-proposito-institucional,
    .rejilla-valores-publicos {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .seccion-valores-publicos {
        padding: 54px 0 64px;
    }

    .encabezado-valores-publicos {
        margin-bottom: 28px;
        text-align: left;
    }

    .llamada-identidad-publica {
        padding: 52px 0;
    }

    .llamada-identidad-publica .boton-publico {
        width: 100%;
    }

    .seccion-donacion-publica {
        padding: 54px 0 64px;
    }

    .contenido-donacion-publica {
        gap: 34px;
    }

    .tarjeta-qr-donacion {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .marcador-qr-pendiente {
        width: min(100%, 220px);
    }

    .cierre-donacion-publica {
        padding: 52px 0;
    }

    .cierre-donacion-publica .boton-publico {
        width: 100%;
    }

    .encabezado-listado-publico {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .cabecera-detalle-publicacion {
        padding: 28px 0 30px;
    }

    .volver-publicaciones {
        margin-bottom: 22px;
    }

    .cuerpo-detalle-publicacion {
        padding-top: 28px;
        padding-bottom: 64px;
    }

    .portada-detalle-publicacion {
        margin-bottom: 32px;
        border-radius: 16px;
    }

    .portada-detalle-vacia {
        min-height: 230px;
    }

    .texto-detalle-publicacion {
        font-size: 1rem;
        line-height: 1.8;
    }

    .galeria-publicacion {
        padding-top: 40px;
        margin-top: 40px;
    }

    .rejilla-galeria-publicacion {
        grid-template-columns: 1fr;
    }

    .rejilla-galeria-publicacion figure,
    .rejilla-galeria-publicacion figure:last-child:nth-child(3n + 1),
    .rejilla-galeria-publicacion figure:nth-last-child(2):nth-child(3n + 1),
    .rejilla-galeria-publicacion figure:last-child:nth-child(odd) {
        grid-column: 1;
    }

    .reconocimiento-auspicio {
        padding: 32px 0;
    }

    .reconocimiento-interior img {
        width: min(100%, 300px);
    }

    .pie-publico {
        padding: 26px 0 16px;
    }

    .pie-columnas {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 18px;
    }

    .pie-identidad {
        grid-column: 1 / -1;
    }

    .pie-publico h2 {
        margin-bottom: 9px;
        font-size: 1.08rem;
    }

    .pie-identidad p {
        line-height: 1.6;
    }

    .pie-navegacion ul {
        display: grid;
        gap: 2px 12px;
    }

    .pie-navegacion li + li,
    .redes-publicas li + li {
        margin-top: 0;
    }

    .pie-navegacion a,
    .pie-contacto a,
    .pie-inferior a {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
    }

    .pie-contacto {
        min-width: 0;
        gap: 2px;
    }

    .pie-contacto > a,
    .pie-contacto > span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .redes-publicas {
        gap: 2px 12px;
        margin-top: 2px;
    }

    .pie-inferior {
        flex-wrap: wrap;
        gap: 10px 18px;
        padding-top: 16px;
        margin-top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}