/* ATICMA, sitio institucional: segunda versión de diseño, con el estilo de los ATICMA Awards.
   Se apoya en base.css (la hoja de los Awards: fondo negro con red de puntos y bandas, títulos en Orbitron,
   botones y tarjetas con volumen) y en comun.css (lo que le sumó Emprende). Acá va sólo lo propio del sitio
   institucional: el mosaico, las novedades, los socios, las autoridades y las páginas interiores.
   El contenido y las páginas son los mismos que en la primera versión (web-aticma/). */

.aticma { --violeta: #7a3cff; }
.aticma .seccion > .ancho > .titulo { text-align: left; }
.aticma .encabezado { text-align: left; justify-items: start; max-width: 50rem; margin-inline: 0; }
.aticma .encabezado p { margin-inline: 0; }
.sobre { font-family: var(--titulos); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cian); }
.mas { display: grid; justify-items: center; margin-top: clamp(1.8rem, 4vw, 3rem); }
.fuente { margin-top: 1.4rem; font-size: .92rem; color: var(--tenue); }
.fuente a, .prosa a, .autoridades__mas a { color: var(--celeste); text-underline-offset: .2em; }
.seccion--corta { padding-block: clamp(1.6rem, 3.5vw, 3rem) clamp(3rem, 6vw, 5rem); }
.seccion--mosaico { padding-top: clamp(1rem, 3vw, 2.5rem); }
.barra__nav a.boton { font-family: var(--cuerpo); font-size: 1.05rem; padding: .5em 1.1em; color: #fff; }
[data-modo="claro"] .boton--linea { background: linear-gradient(180deg, #1c2f7a, #0a1540); }      /* sobre fondo claro, el translúcido dejaba la letra blanca sin contraste */
.boton--linea { --canto: #0a1c52; background: linear-gradient(180deg, rgba(16, 34, 104, .5), rgba(3, 8, 30, .8)); border: 2px solid #3b7bff; }
.aticma .marca__texto i { letter-spacing: .2em; }

/* ---------- Portada ---------- */

.aticma .portada__lema { max-width: 46rem; }
/* El título es corto ("ATICMA / 20 AÑOS"): el marco se ensancha para que las palabras de fondo queden a los costados
   y no detrás de las letras. */
.aticma .portada__marco { width: min(11.5em, 92vw); font-size: clamp(2.2rem, .9rem + 6.1vw, 5.6rem); }
@media (min-width: 48.01rem) { .aticma .portada__marco { font-size: clamp(2.2rem, min(.9rem + 6.1vw, 10.4vh), 5.6rem); } }
.aticma .palabra--1 { left: -4%; top: -34%; }
.aticma .palabra--2 { left: -10%; top: 6%; }
.aticma .palabra--3 { left: -2%; top: 46%; }
.aticma .palabra--4 { right: -4%; top: -30%; }
.aticma .palabra--5 { right: -9%; top: 12%; }
.aticma .palabra--6 { right: -3%; top: 52%; }
.pieza b strong { color: inherit; }
.numeros--portada { width: min(100%, 52rem); margin: clamp(.9rem, 2.6vh, 2rem) auto 0; }
.numeros--portada li { flex: 1 1 9rem; padding-block: .6rem; }
.numeros--portada b { background: linear-gradient(90deg, var(--lima), var(--cian)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.15rem, min(.9rem + 1.2vw, 3.6vh), 1.9rem); }
.numeros--portada span { font-size: clamp(.7rem, min(.66rem + .2vw, 1.9vh), .84rem); }
.aticma .numeros:not(.numeros--portada) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.aticma .numeros:not(.numeros--portada) li { container-type: inline-size; padding: 1.3rem clamp(.6rem, 2.4vw, 1.1rem); border-radius: 18px; border: 2px solid var(--panel-borde); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(0, 20, 90, .6), 0 26px 40px -22px #000; }
.aticma .numeros:not(.numeros--portada) b { font-size: clamp(1rem, .8rem + 1.1vw, 1.7rem); font-size: clamp(1rem, 14cqi, 2.7rem); background: linear-gradient(90deg, var(--lima), var(--cian) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Los logos de los socios van a una sola tinta (los prepara el generador): blancos en oscuro y negros en claro.
   En la cinta, el paso a negro lo hace base.css, igual que con los logos de los Awards. */
.cinta a { flex: none; display: grid; place-items: center; width: 9.5rem; height: 4.2rem; }
.cinta a img { height: auto; max-height: 3rem; width: auto; max-width: 8.8rem; object-fit: contain; }
[data-modo="claro"] :is(.socio__logo, .ficha__logo) img { filter: invert(1); }
.cinta--portada .cinta__pista > * { margin-inline: clamp(.5rem, 1vw, .9rem); }
.seccion--socios .cinta { margin-block: 1rem; }

/* La franja de palabras huecas que corre entre secciones. */
.cinta--lema { padding-block: clamp(.6rem, 2vw, 1.6rem); -webkit-mask-image: none; mask-image: none; }
.cinta--lema .cinta__pista { animation-duration: 40s; }
.cinta--lema .cinta__pista > span { flex: none; margin: 0; padding-inline: .4em; opacity: 1; font-family: var(--titulos); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 6.2rem); line-height: 1.1; color: transparent; -webkit-text-stroke: 1.5px var(--cian); white-space: nowrap; }
.cinta--lema .cinta__pista > span:nth-child(3n + 2) { -webkit-text-stroke-color: var(--lima); }
.cinta--lema .cinta__pista > span:nth-child(3n) { -webkit-text-stroke-color: var(--azul-claro); }
.cinta--lema .cinta__pista > span:nth-child(4n) { color: var(--fuerte); -webkit-text-stroke: 0; }

/* ---------- Mosaico ---------- */

.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(11rem, 16vw, 15.5rem); grid-auto-flow: dense; gap: clamp(.8rem, 1.5vw, 1.3rem); }
.pieza { position: relative; container-type: size; border-radius: 18px; overflow: hidden; border: 2px solid var(--panel-borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 30px -12px rgba(29, 79, 240, .85), 0 30px 46px -24px #000; }
.pieza.inclina:hover { border-color: #5f8aff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 54px -8px rgba(29, 79, 240, 1), 0 44px 60px -24px rgba(0, 56, 220, .9); }
.pieza--ancha { grid-column: span 2; }
.pieza--alta { grid-row: span 2; }
.pieza a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: clamp(.9rem, 1.6vw, 1.5rem); text-decoration: none; color: #fff; }
.pieza > a, .pieza.inclina:hover > a { transform: none; }
.pieza--foto { background: #05070f; }
.pieza--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.pieza--foto:hover img { transform: scale(1.07); }
.pieza--foto a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 4, 20, .1) 8%, rgba(0, 6, 30, .74) 52%, rgba(0, 4, 20, .96)); }
.pieza__rotulo { position: relative; z-index: 2; font-family: var(--titulos); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: #5fe0ff; }
.pieza--foto b { position: relative; z-index: 2; font-family: var(--titulos); font-weight: 600; font-size: clamp(.86rem, .76rem + .4vw, 1.05rem); line-height: 1.3; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pieza--foto.pieza--ancha b { font-size: clamp(1rem, .82rem + .8vw, 1.4rem); }
.pieza--foto.pieza--alta b { font-size: clamp(1.1rem, .9rem + 1.2vw, 1.8rem); -webkit-line-clamp: 5; }
.pieza:not(.pieza--foto) a { justify-content: space-between; }
/* el tamaño sale del ancho y del alto de la pieza: la palabra más larga ("TECNOLÓGICAS") entra en una columna y cinco renglones entran en una fila */
.pieza:not(.pieza--foto) b { font-family: var(--titulos); font-weight: 400; text-transform: uppercase; font-size: clamp(.82rem, .7rem + .75vw, 1.3rem); font-size: clamp(.78rem, min(8.4cqi, 12cqb), 1.75rem); line-height: 1.12; display: grid; overflow-wrap: anywhere; }
.pieza b strong { font-weight: 800; }
.pieza i { align-self: flex-start; max-width: calc(100% - 2.1rem); font-style: normal; font-weight: 500; font-size: .78rem; font-size: clamp(.66rem, 5.4cqi, .86rem); padding: .25em .75em; border-radius: 99px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .22); }
.pieza a > .i { position: absolute; right: 1rem; bottom: 1rem; width: 1.5rem; height: 1.5rem; transition: transform .35s var(--suave); }
.pieza:hover a > .i { transform: translateX(6px); }
.pieza--cian { background: linear-gradient(160deg, #0880a2, #04456e 70%); }
.pieza--magenta { background: linear-gradient(160deg, #8a45ff, #3a0f8a 72%); }
.pieza--negro { background: linear-gradient(165deg, rgba(16, 34, 104, .9), rgba(3, 8, 30, .96) 62%); }
.pieza--amarillo { background: linear-gradient(160deg, #d3f73a, #8ab800 75%); border-color: #e2ff6b; }
.pieza--amarillo a { color: #101a00; }
.pieza--amarillo i { background: rgba(255, 255, 255, .5); border-color: rgba(0, 0, 0, .15); }
.pieza--globo { background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .75) 60%), #05070f; border-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 26px -6px rgba(255, 255, 255, .6), 0 30px 46px -24px #000; }
.pieza--globo::before { content: ""; position: absolute; right: -8%; bottom: -6%; width: 78%; aspect-ratio: 163.66 / 151.49; background: url("../img/isotipo.svg") center / contain no-repeat; opacity: .5; animation: flotar 9s ease-in-out infinite alternate; }
.pausado .pieza--globo::before { animation-play-state: paused; }

/* ---------- Tarjetas, programas y demás piezas ---------- */

.aticma .tarjeta { text-align: left; justify-items: start; border: 2px solid #1d4ff0; background: linear-gradient(165deg, rgba(16, 34, 104, .82), rgba(3, 8, 30, .92) 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -36px 60px -40px rgba(0, 84, 255, .75), 0 0 34px -10px rgba(29, 79, 240, .85), 0 36px 64px -26px rgba(0, 56, 220, .75), 0 28px 40px -18px #000; }
.aticma .tarjeta .titulo { text-align: left; }
.aticma .tarjeta--cierre { text-align: center; justify-items: center; margin-top: clamp(2.5rem, 6vw, 5rem); border-color: #fff; background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .7) 58%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 26px -6px rgba(255, 255, 255, .6), 0 36px 64px -28px rgba(0, 84, 255, .7), 0 28px 40px -18px #000; }
.aticma .tarjeta--cierre .titulo { text-align: center; }
[data-modo="claro"] .aticma .tarjeta { background: linear-gradient(165deg, #fff, #e8eeff 72%); box-shadow: inset 0 1px 0 #fff, 0 0 30px -12px rgba(29, 79, 240, .55), 0 30px 54px -26px rgba(0, 56, 220, .45), 0 22px 36px -22px rgba(10, 30, 90, .45); }
.ancho--angosto > .tarjeta + .tarjeta { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.programas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.7rem); }
.programa h3 { font-family: var(--titulos); font-weight: 600; font-size: 1.1rem; color: var(--fuerte); line-height: 1.25; }
.programa__dato { font-size: .84rem; padding: .25em .8em; border-radius: 99px; border: 1px solid var(--linea); background: rgba(0, 0, 0, .3); color: var(--fuerte); }
[data-modo="claro"] .programa__dato { background: rgba(255, 255, 255, .7); }
.programa .enlace-flecha { margin-top: auto; }
.alianzas, .pie__enlaces { display: flex; flex-wrap: wrap; gap: .6rem; }
.alianzas a, .pie__enlaces a { display: inline-block; padding: .5rem 1.15rem; border-radius: 99px; border: 1px solid var(--linea); color: var(--fuerte); text-decoration: none; font-family: var(--titulos); font-size: .76rem; letter-spacing: .08em; transition: border-color .3s, color .3s, transform .35s var(--suave); }
.alianzas a:hover, .pie__enlaces a:hover { border-color: var(--cian); color: var(--cian); transform: translateY(-3px); }
.seccion--alianzas { padding-block: clamp(2rem, 4vw, 3.4rem); }

/* ---------- Páginas interiores ---------- */

.cabecera { position: relative; overflow: hidden; padding: calc(var(--alto-barra) + clamp(2.5rem, 7vw, 5.5rem)) 0 clamp(1.6rem, 4vw, 3.2rem); }
.cabecera .ancho { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.cabecera .titulo { text-align: center; }
/* En las páginas interiores el encabezado entra enseguida: es lo primero que se lee (en la portada, las letras del título van antes). */
.cargado .aticma:not(.pagina-inicio) [data-intro] { transition-delay: calc(.05s + var(--orden, 0) * .08s); transition-duration: .5s, .6s; }
.cabecera__bajada { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 44rem; }
/* las bandas del encabezado se desvanecen hacia abajo, en vez de cortarse en el borde */
.cabecera .ondas--portada { height: 100%; opacity: .8; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

.novedades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.7rem); }
.novedad a, .socio a { display: grid; height: 100%; text-decoration: none; border-radius: 18px; overflow: hidden; border: 2px solid var(--panel-borde); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(0, 20, 90, .6), 0 26px 40px -22px #000, 0 30px 54px -32px rgba(0, 56, 220, .8); transition: transform .45s var(--suave), border-color .3s, box-shadow .45s; }
.novedad a { grid-template-rows: auto 1fr; }
.novedad a:hover, .socio a:hover { transform: translateY(-8px); border-color: var(--cian); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 0 rgba(0, 20, 90, .6), 0 0 44px -10px rgba(29, 79, 240, 1), 0 40px 60px -26px rgba(0, 56, 220, .9); }
[data-modo="claro"] :is(.novedad a, .socio a) { box-shadow: inset 0 1px 0 #fff, 0 4px 0 #c3cde6, 0 22px 36px -22px rgba(10, 30, 90, .45); }
.novedad__foto { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: #05070f; }
.novedad__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave); }
.novedad a:hover .novedad__foto img { transform: scale(1.07); }
.novedad__sin { width: 46%; height: auto; aspect-ratio: 122.8 / 32.3; color: #fff; opacity: .3; }
.novedad__texto { display: grid; gap: .45rem; align-content: start; padding: 1rem 1.15rem 1.3rem; }
.novedad__texto time { font-family: var(--titulos); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cian); }
.novedad__texto b { font-family: var(--titulos); font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--fuerte); text-wrap: balance; }
.novedad__texto > span { font-size: .92rem; color: var(--tenue); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.buscador { display: grid; gap: 1rem; margin-bottom: 1rem; }
.buscador__campo { display: block; }
.buscador__campo input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--fuerte); padding: .9rem 1.1rem .9rem 3rem; border-radius: 14px; border: 2px solid var(--panel-borde);
  background: rgba(3, 8, 30, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%2314c8dc' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L21 21' fill='none' stroke='%2314c8dc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 1rem 50% / 1.3rem no-repeat;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5), 0 4px 0 rgba(0, 20, 90, .6); transition: border-color .2s, box-shadow .2s;
}
[data-modo="claro"] .buscador__campo input { background-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #c3cde6; }
.buscador__campo input::placeholder { color: var(--tenue); }
.buscador__campo input:focus { outline: none; border-color: var(--cian); box-shadow: 0 4px 0 rgba(0, 20, 90, .6), 0 0 0 4px color-mix(in srgb, var(--cian) 28%, transparent); }
.buscador__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador__filtros { display: flex; flex-wrap: wrap; gap: .45rem; }
.pastilla { padding: .35rem .95rem; border-radius: 99px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .04); font-family: var(--titulos); font-size: .72rem; letter-spacing: .06em; color: var(--fuerte); transition: transform .25s var(--suave), background .2s, color .2s, border-color .2s; }
.pastilla:hover { transform: translateY(-2px); border-color: var(--cian); }
.pastilla.activa { background: linear-gradient(180deg, #2f6bff, #0044de); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #002a98; }
.buscador__cuenta { min-height: 1.4rem; margin-bottom: 1rem; font-size: .9rem; color: var(--tenue); }
[data-ver-mas][hidden] { display: none; }

.nota .ancho { display: grid; gap: 1.2rem; }
.pagina-nota main, .pagina-ficha main { padding-top: calc(var(--alto-barra) + clamp(1rem, 3vw, 2rem)); }
.nota .titulo { text-align: left; }
.nota__foto { border-radius: 16px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 0 24px -6px rgba(255, 255, 255, .6), 0 30px 46px -22px #000; }
.nota__foto img { width: 100%; }
.nota__volver { margin-bottom: -.3rem; }
.enlace-flecha--atras::before { content: "←"; }
.prosa { display: grid; gap: 1.05rem; font-size: 1.1rem; line-height: 1.7; overflow-wrap: anywhere; text-align: left; }
.prosa :is(h2, h3, h4) { font-family: var(--titulos); font-weight: 600; color: var(--fuerte); line-height: 1.25; margin-top: .8rem; }
.prosa h2 { font-size: 1.3rem; }
.prosa h3 { font-size: 1.08rem; }
.prosa ul, .prosa ol { display: grid; gap: .45rem; padding-left: 1.3rem; }
.prosa ul li { position: relative; }
.prosa ul li::before { content: ""; position: absolute; left: -1.15rem; top: .65em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cian); box-shadow: 0 0 10px var(--cian); }
.prosa ol { list-style: decimal; }
.prosa img { border-radius: 12px; margin-inline: auto; }
.prosa blockquote { padding: .2rem 0 .2rem 1.2rem; border-left: 4px solid var(--lima); color: var(--fuerte); }
.prosa hr { width: 100%; border: 0; border-top: 1px solid var(--linea); }
.prosa strong, .prosa b { color: var(--fuerte); font-weight: 600; }
.prosa :is(td, th) { padding: .5rem .7rem; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.prosa--centrada { max-width: 44rem; }
.prosa--comisiones :is(h2, h3) { font-size: 1.02rem; color: var(--cian); margin-top: 1.2rem; }
.prosa--carreras h2 { padding-bottom: .4rem; border-bottom: 2px solid var(--panel-borde); }

.socios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: clamp(.8rem, 1.5vw, 1.2rem); }
.socio[hidden] { display: none; }
.socio a { gap: .5rem; align-content: start; padding: .9rem; }
.socio__logo { display: grid; place-items: center; height: 6rem; padding: .9rem 1rem; border-radius: 11px; background: rgba(255, 255, 255, .06); color: var(--fuerte); text-align: center; overflow: hidden; }
[data-modo="claro"] .socio__logo { background: rgba(12, 30, 92, .06); }
.socio__logo img { max-width: min(100%, 11rem); max-height: 3.9rem; width: auto; height: auto; object-fit: contain; opacity: .9; transition: opacity .3s, transform .45s var(--suave); }
.socio a:hover .socio__logo img { opacity: 1; transform: scale(1.07); }
.socio a > b { font-weight: 600; color: var(--fuerte); line-height: 1.2; }
.socio a > span:last-child { font-size: .86rem; color: var(--tenue); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ficha .ancho { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); }
.ficha .titulo { text-align: left; }
.ficha__grilla { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: start; }
.aticma .ficha__logo { place-items: center; justify-items: center; min-height: 13rem; text-align: center; overflow: hidden; }
.ficha__logo img { max-height: 9rem; max-width: min(100%, 15rem); width: auto; height: auto; object-fit: contain; }
.ficha__texto { display: grid; gap: 1.1rem; }
.ficha__contacto { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; }
.ficha__contacto li, .ficha__contacto li > a:not(.boton) { display: inline-flex; align-items: center; gap: .5em; }
.ficha__contacto a:not(.boton) { text-decoration: none; color: var(--celeste); }
.ficha__oferta, .areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.ficha__oferta li, .area, .autoridades li { display: grid; gap: .25rem; align-content: start; padding: 1.05rem 1.15rem; border-radius: 16px; border: 2px solid var(--panel-borde); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(0, 20, 90, .6), 0 22px 34px -22px #000; transition: transform .4s var(--suave), border-color .3s; }
:is(.ficha__oferta li, .area, .autoridades li):hover { transform: translateY(-6px); border-color: var(--cian); }
[data-modo="claro"] :is(.ficha__oferta li, .area, .autoridades li) { box-shadow: inset 0 1px 0 #fff, 0 4px 0 #c3cde6, 0 20px 32px -22px rgba(10, 30, 90, .45); }
.ficha__oferta b, .area h3 { font-family: var(--titulos); font-weight: 600; font-size: .98rem; color: var(--fuerte); line-height: 1.3; }
.ficha__oferta span, .area p { font-size: .93rem; }
.ficha__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ficha__fotos img { width: 100%; border-radius: 14px; border: 2px solid var(--panel-borde); }

.objetivos { counter-reset: objetivo; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2.4rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.objetivos li { counter-increment: objetivo; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.objetivos li::before { content: counter(objetivo, decimal-leading-zero); font-family: var(--titulos); font-weight: 800; font-size: 2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--cian); }
.autoridades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.autoridades span { font-family: var(--titulos); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cian); }
.autoridades b { font-weight: 600; font-size: 1.08rem; color: var(--fuerte); }
.autoridades i { font-style: normal; font-size: .92rem; color: var(--tenue); }
.autoridades li { position: relative; }
.autoridades b a { display: inline-flex; align-items: center; gap: .5em; color: inherit; text-decoration: none; }
.autoridades b a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.autoridades b a .i { flex: none; width: 1.05em; height: 1.05em; color: var(--celeste); transition: transform .35s var(--suave), color .25s; }
.autoridades li:hover b a, .autoridades b a:focus-visible { color: var(--cian); }
.autoridades li:hover b a .i { transform: scale(1.2); color: var(--cian); }
.autoridades li:first-child { border-color: var(--lima); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 0 rgba(70, 90, 0, .7), 0 0 34px -8px var(--lima), 0 22px 34px -22px #000; }
.autoridades li:first-child span { color: var(--lima); }
[data-modo="claro"] .autoridades li:first-child span { color: #456f00; }
.autoridades__mas { display: grid; gap: .4rem; margin-top: 1.6rem; }
.autoridades__mas b { color: var(--fuerte); font-weight: 600; }
.documentos, .medios { display: grid; gap: .65rem; }
.medios { margin: 1rem 0 2.4rem; }
.documentos a, .medios a { display: grid; gap: .3rem 1.2rem; align-items: baseline; padding: .9rem 1.15rem; border-radius: 14px; text-decoration: none; border: 1px solid var(--panel-borde); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 20, 90, .55); transition: transform .3s var(--suave), border-color .25s; }
.documentos a { grid-template-columns: 1fr auto; }
.medios a { grid-template-columns: 11rem 1fr auto; }
:is(.documentos a, .medios a):hover { transform: translateX(6px); border-color: var(--cian); }
[data-modo="claro"] :is(.documentos a, .medios a) { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #c3cde6; }
.documentos b, .medios b { font-weight: 500; color: var(--fuerte); line-height: 1.3; }
.documentos span { font-family: var(--titulos); font-size: .62rem; letter-spacing: .12em; padding: .25em .7em; border-radius: 6px; background: var(--azul); color: #fff; }
.medios time { font-family: var(--titulos); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); }
.medios span { font-size: .84rem; color: var(--tenue); white-space: nowrap; }

/* ---------- Pie ---------- */

/* Lo que significa la sigla: las letras que la forman, resaltadas dentro del nombre completo. */
.sigla b { font-weight: 700; color: var(--cian); }
.sigla-linea { font-size: 1.08em; color: var(--fuerte); }

/* El pie de todas las páginas: quiénes somos, contacto, secciones y programas, en columnas. */
.pie--completo { text-align: left; border-top: 1px solid var(--linea); background: linear-gradient(180deg, transparent, rgba(0, 20, 90, .22)); }
[data-modo="claro"] .pie--completo { background: linear-gradient(180deg, transparent, rgba(29, 79, 240, .07)); }
.pie__cuerpo { width: min(100% - 2 * var(--margen), 76rem); margin-inline: auto; padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3.5vw, 3.2rem); align-items: start; }
.pie__marca { display: grid; gap: .9rem; justify-items: start; }
.pie__sigla { font-size: 1rem; line-height: 1.45; color: var(--texto); max-width: 22rem; }
.pie__columna { display: grid; gap: .8rem; align-content: start; }
.pie__titulo { font-family: var(--titulos); font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cian); }
.pie__datos, .pie__lista { display: grid; gap: .15rem; }
:is(.pie__datos, .pie__lista) a { display: inline-flex; align-items: center; gap: .6em; min-height: 2rem; color: var(--fuerte); text-decoration: none; transition: color .25s, transform .35s var(--suave); }
:is(.pie__datos, .pie__lista) a:hover { color: var(--cian); transform: translateX(4px); }
.pie__datos .i { flex: none; width: 1.25em; height: 1.25em; color: var(--azul-claro); }
.pie--completo .pie__redes { justify-content: flex-start; gap: .1rem 1.2rem; }
.pie--completo .pie__redes a { display: inline-block; min-width: 1.5rem; padding: .35rem 0; color: var(--texto); }
[data-modo="claro"] .pie__titulo { color: #06626f; }      /* sobre el fondo del pie, el celeste del modo claro quedaba justo por debajo del mínimo */
@media (max-width: 62rem) { .pie__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .pie__cuerpo { grid-template-columns: 1fr; } }
.pie__logo { width: min(14.5rem, 62vw); height: auto; opacity: .92; }
[data-modo="claro"] .pie__logo { filter: invert(1) hue-rotate(180deg); }
.pie__iniciativa .contacto__datos { font-size: 1rem; margin-top: .4rem; }
.pie__enlaces { justify-content: center; }
.pie__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.pie__redes a { font-size: .9rem; color: var(--tenue); text-underline-offset: .2em; }
.pie__redes a:hover { color: var(--cian); }

/* ---------- Pantallas chicas ---------- */

@media (max-width: 64rem) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(10rem, 30vw, 14rem); }
  .programas, .novedades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .programas, .novedades, .objetivos { grid-template-columns: 1fr; }
  .ficha__grilla { grid-template-columns: 1fr; }
  .medios a { grid-template-columns: 1fr; }
  .pieza--alta { grid-row: span 1; }
  .pieza--foto.pieza--alta b { font-size: 1rem; }
}