es un panel y el sitio dibuja encima una barra de secciones. Solo se ve el panel activo. MEJORA PROGRESIVA: el ocultamiento cuelga de .js-paneles, una clase que pone el guion en despues de construir la barra. Sin JavaScript (o para un rastreador) la pagina se queda como estaba, con todo el contenido visible y accesible. Nada se esconde a costa del contenido. ================================================================== */ /* 21.1 · la barra de secciones ------------------------------------- */ .sec-nav{ position:sticky; top:var(--alto-cab,64px); /* el guion mide la cabecera real */ z-index:400; background:color-mix(in oklab,var(--sup) 88%,transparent); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); border-bottom:1px solid var(--borde); box-shadow:0 1px 0 var(--borde); } .sec-nav-in{ max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.4rem); display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding-block:.55rem; } .sec-nav-in::-webkit-scrollbar{display:none} /* difuminado en los bordes cuando la barra se desplaza -------------- */ .sec-nav-in{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px, #000 calc(100% - 18px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 18px, #000 calc(100% - 18px),transparent 100%); } @media (min-width:900px){ .sec-nav-in{-webkit-mask-image:none;mask-image:none;flex-wrap:wrap;overflow:visible} } /* 21.2 · cada pestana ---------------------------------------------- */ .sec-tab{ flex:0 0 auto; scroll-snap-align:center; display:inline-flex; align-items:center; gap:.45rem; padding:.5rem clamp(.8rem,1.6vw,1.1rem); border:1px solid transparent; border-radius:99px; background:none; font-family:var(--fb); font-size:var(--t-sm); font-weight:700; line-height:1.2; color:var(--muted); white-space:nowrap; cursor:pointer; transition:color .3s var(--ease),background .3s var(--ease), border-color .3s var(--ease),transform .3s var(--ease); } .sec-tab:hover{color:var(--brand);background:color-mix(in oklab,var(--brand) 7%,transparent)} .sec-tab:focus-visible{outline:3px solid var(--cielo);outline-offset:2px} /* el numero de orden, discreto */ .sec-tab i{ font-style:normal; font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; opacity:.55; font-variant-numeric:tabular-nums; } /* 21.3 · la pestana activa ----------------------------------------- */ .sec-tab[aria-selected="true"]{ color:#fff; background:linear-gradient(135deg,var(--brand), color-mix(in oklab,var(--vivo) 45%,var(--brand))); border-color:color-mix(in oklab,var(--brand) 60%,transparent); box-shadow:0 2px 10px color-mix(in oklab,var(--brand) 32%,transparent); } .sec-tab[aria-selected="true"] i{opacity:.75} /* 21.4 · los paneles ------------------------------------------------ */ /* Solo se ocultan cuando el guion confirma que la barra existe. */ .js-paneles [data-panel][hidden]{display:none} .js-paneles [data-panel]{animation:panel-entra .5s var(--ease) both} @keyframes panel-entra{ from{opacity:0;transform:translateY(14px)} to {opacity:1;transform:none} } /* 21.5 · el destino exacto del enlace se senala un momento --------- Si alguien entra por "#mision", se abre el panel que lo contiene y ademas se le pone un cerco al bloque concreto, para que no tenga que buscarlo con la vista dentro del panel. */ .destino-marcado{ animation:destino 2.4s var(--ease) both; border-radius:var(--r); } @keyframes destino{ 0% {box-shadow:0 0 0 0 color-mix(in oklab,var(--vivo) 62%,transparent)} 22% {box-shadow:0 0 0 7px color-mix(in oklab,var(--vivo) 30%,transparent)} 100% {box-shadow:0 0 0 0 transparent} } /* 21.6 · el aviso de "estas aqui" bajo la barra --------------------- */ .sec-nav-pie{ max-width:var(--ancho); margin-inline:auto; padding:0 clamp(1.1rem,4vw,2.4rem) .5rem; font-size:var(--t-xs); color:var(--muted); } .sec-nav-pie b{color:var(--brand);font-weight:700} /* 21.7 · con la transicion de vistas el cambio es un fundido -------- */ .js-paneles [data-panel]:not([hidden]){view-transition-name:panel-activo} ::view-transition-old(panel-activo){ animation:vt-sale .26s var(--ease) both} ::view-transition-new(panel-activo){ animation:vt-entra .42s var(--ease) both} @keyframes vt-sale {to {opacity:0;transform:translateY(-8px)}} @keyframes vt-entra{from{opacity:0;transform:translateY(14px)}} /* 21.8 · quien pide menos movimiento, no lo tiene ------------------- */ @media (prefers-reduced-motion: reduce){ .js-paneles [data-panel]{animation:none} .destino-marcado{animation:none;outline:3px solid var(--vivo);outline-offset:4px} .sec-tab{transition:none} ::view-transition-old(panel-activo), ::view-transition-new(panel-activo){animation:none} } /* 21.9 · al imprimir se imprime todo, no solo el panel abierto ------ */ @media print{ .sec-nav{display:none} .js-paneles [data-panel][hidden]{display:block !important} } /* ================================================================== 22 · SISTEMA TIPOGRAFICO ------------------------------------------------------------------ El sitio tenia 79 tamanos de letra distintos repartidos en 227 declaraciones. Habia nueve tamanos casi identicos conviviendo (.9 .92 .93 .94 .95 .96 .97 .98 1rem) y seis mas en la banda de .8 a .89. Ninguna diferencia de esas se percibe como jerarquia: se percibe como descuadre. Cada componente habia elegido su tamano a ojo. Aqui se define UNA escala modular y todo el sitio se mapea sobre ella. Los cortes van en el punto medio entre paso y paso, asi que cada tamano viejo cae en el escalon mas cercano. DOS FAMILIAS, UNA REGLA SIN EXCEPCIONES Fraunces (--fd) titulos, subtitulos y cifras destacadas. Karla (--fb) todo lo demas: texto corrido, listas, botones, menus, fichas, etiquetas y formularios. ================================================================== */ :root{ /* --- la escala --------------------------------------------------- Razon 1.125 en la zona de texto (donde los saltos grandes estorban) y 1.25 de los subtitulos hacia arriba (donde la jerarquia tiene que verse de lejos). */ --t-xs : .75rem; /* 12px · etiquetas, antetitulos, pies */ --t-sm : .875rem; /* 14px · meta, tablas, texto de ficha */ --t-base : 1rem; /* 16px · texto corrido */ --t-lg : 1.125rem; /* 18px · entradillas */ --t-xl : 1.375rem; /* 22px · subtitulos h3 */ --t-2xl : 1.75rem; /* 28px · titulos h2 menores */ --t-3xl : 2.25rem; /* 36px · titulo de pagina */ --t-4xl : 3rem; /* 48px · portada */ /* --- interlineados: apretado arriba, holgado abajo ------------- */ --int-titulo : 1.14; --int-medio : 1.4; --int-texto : 1.7; /* --- pesos: solo tres, los que las fuentes traen cargados ------ Fraunces se carga en 400, 600 y 800; Karla en 300, 400, 500 y 700. Pedir un peso que no esta cargado deja que el navegador lo invente (font-synthesis) y ahi es donde el mismo titulo se veia mas gordo en unos sitios que en otros. */ --peso-normal : 400; --peso-medio : 600; --peso-fuerte : 700; /* Karla */ --peso-titulo : 700; /* Fraunces: se comprueba en pantalla */ } /* --- los tamanos fluidos, los que crecen con el ancho ------------- Antes habia 27 clamp() distintos, cada uno con su propia curva de crecimiento. Ahora son cinco, cada uno con un papel claro. */ :root{ --td-lead : clamp(1.02rem,.97rem + .28vw,1.2rem); /* entradilla sobre foto */ --td-sub : clamp(1.25rem,1.08rem + .82vw,1.85rem); /* frase destacada */ --td-cifra: clamp(1.8rem,1.35rem + 1.9vw,2.65rem); /* cifras grandes */ --td-h1 : clamp(2rem,1.42rem + 2.9vw,3.6rem); /* titulo de pagina */ --td-hero : clamp(2.4rem,1.7rem + 3.5vw,4rem); /* portada y ventana */ } /* 22.1 · EL CONTROL DE TAMANO DE TEXTO, QUE NO FUNCIONABA ---------- Los botones A / A / A+ de la barra de accesibilidad escriben --esc en , pero la unica regla que lo usaba era "body{font-size:calc(1rem*var(--esc))}". Como el resto del sitio mide en rem (relativo a la RAIZ, no al body), cambiar el tamano no movia practicamente nada: el control prometia algo que no hacia. Aplicando el multiplicador en la raiz, cada rem del sitio -y por tanto toda la escala de arriba- escala de verdad. */ html{font-size:calc(100% * var(--esc,1));font-family:var(--fb)} body{font-size:var(--t-base);line-height:var(--int-texto)} /* 22.2 · LA REGLA DE LAS DOS FAMILIAS ------------------------------ */ h1,h2,h3,h4,h5,h6, .tit-sec,.titulo, /* titulos de tarjeta que no son encabezados: llevan la misma serif */ .cp-tit,.acceso b,.fruto b,.med-card b,.bien-card b, .cifra b,.com-cifra b,.fh-jalon b,.mz-cifra b,.datos b,.modal-num, .hito .anio,.p404 .num,.com-portada .ini, .bien-guia,.bien-lema{ font-family:var(--fd); font-synthesis:none; } /* todo lo demas es Karla, sin excepciones: antes .cp-tit y las cifras de algunos bloques se salian de la regla */ body,button,input,select,textarea, .btn,.nav,.eyebrow,.bajada,.aviso,.meta,.migas,.tabla, .cp-ante,.fh-ante,.mv-et{ font-family:var(--fb); } /* 22.3 · LA JERARQUIA DE TITULOS ----------------------------------- */ h1,h2,h3,h4,h5,h6{ line-height:var(--int-titulo); letter-spacing:-.022em; font-weight:var(--peso-fuerte); text-wrap:balance; } h1{font-size:var(--td-h1)} h2{font-size:var(--t-2xl)} h3{font-size:var(--t-xl)} h4{font-size:var(--t-lg)} h5,h6{font-size:var(--t-base)} /* el titulo de seccion (bloque 19) manda sobre h2 */ .tit-sec{font-size:var(--tit-sec)} /* 22.4 · EL ANTETITULO, LA ETIQUETA DE ENCIMA DEL TITULO ----------- */ .eyebrow,.cp-ante,.fh-ante,.mv-et{ font-size:var(--t-xs); font-weight:var(--peso-fuerte); letter-spacing:.14em; text-transform:uppercase; line-height:var(--int-medio); } /* 22.5 · LA ENTRADILLA QUE ACOMPANA AL TITULO ---------------------- */ .bajada,.entradilla{ font-size:var(--t-lg); line-height:var(--int-texto); color:var(--muted); } /* 22.6 · TEXTO AUXILIAR -------------------------------------------- */ .aviso,.meta,.migas,figcaption,small,.pie-legal{ font-size:var(--t-sm); line-height:var(--int-medio); } /* 22.7 · NUMEROS: siempre de ancho fijo, para que no bailen -------- */ .cifra b,.com-cifra b,.fh-jalon b,.mz-cifra b,.datos b, .modal-num,.hito .anio,.tabla td,.tabla th{ font-variant-numeric:tabular-nums; } /* 22.8 · DONDE SE APLICA CADA TAMANO FLUIDO ------------------------ Se declara por PAPEL, no por parecido de numero: un titular de articulo y una cifra podian medir los dos 2,9rem y no son lo mismo. Agruparlos por el numero es lo que habia deshecho la jerarquia. */ /* entradillas: la frase que acompana al titular */ .bajada,.hero p,.diapo p,.cp-der,.fh-bajada{ font-size:var(--td-lead); line-height:1.6; } /* frases destacadas y subtitulos de bloque */ .cp-tit,.bien-guia,.bien-lema,.mv-tit-principios, .nv-destacado-cu h3{ font-size:var(--td-sub); } /* cifras grandes */ .cifra b,.cifra b .num-g,.com-cifra b,.fh-jalon b,.mz-cifra b{ font-size:var(--td-cifra); } /* titulares de pagina */ .articulo h1,.p404 h1,h1.tit-sec,h1.titulo{ font-size:var(--td-h1); } /* portada a toda pantalla y ventana de cifra */ .hero h1,.diapo h1,.diapo h2,.modal-num{ font-size:var(--td-hero); } /* el "404" es un grafico, no texto: se queda con su tamano propio */ .p404 .num{font-size:clamp(5rem,16vw,10rem)} /* ================================================================== 23 · MISMO PAPEL, MISMO TAMANO ------------------------------------------------------------------ El bloque 22 metio todos los tamanos en una escala, pero eso solo no arregla nada visible: cada componente seguia eligiendo SU escalon. Medido en pantalla, un titulo de tarjeta daba 18px en .tarj 16px en .persona 22px en .mapa-cuerpo 28px en .cp-tit Cuatro tamanos para el mismo papel. Eso es exactamente lo que se ve como "aqui la letra es mas grande y alli mas pequena": no es que falte escala, es que el mismo elemento cambia de tamano segun en que bloque caiga. Aqui el tamano lo decide EL PAPEL que cumple el texto, nunca el bloque donde vive. Las declaraciones sueltas de cada componente se retiraron una a una; estas son las unicas que mandan. LOS SEIS PAPELES etiqueta 12px antetitulos y distintivos, en mayusculas apoyo 14px pies, notas, meta, tablas cuerpo 16px TODO el texto que se lee de corrido realce 18px entradillas y titulos de tarjeta subtitulo 22px encabeza un grupo dentro de la seccion destacado 28px la frase que abre un relato Por encima quedan solo los titulares, que son fluidos porque tienen que crecer con la pantalla. ================================================================== */ :root{ --t-etiqueta : var(--t-xs); /* 12px */ --t-apoyo : var(--t-sm); /* 14px */ --t-cuerpo : var(--t-base); /* 16px */ --t-realce : var(--t-lg); /* 18px */ --t-subtitulo : var(--t-xl); /* 22px */ --t-destacado : var(--t-2xl); /* 28px */ } /* 23.1 · CUERPO · todo lo que se lee de corrido, al mismo tamano --- */ p,li,dd,dt,blockquote,label, .acceso-d,.cp-tx,.tarj p,.noticia p,.vt-cuerpo p,.mv-caja p{ font-size:var(--t-cuerpo); line-height:var(--int-texto); } /* 23.2 · REALCE · entradillas y titulos de tarjeta ----------------- */ h3,h4, .bajada,.entradilla,.hero p,.diapo p,.cp-der,.fh-bajada, .acceso b,.fruto b,.med-card b,.bien-card b,.cp-tit, .nv-destacado-cu h3{ font-size:var(--t-realce); line-height:1.3; } /* las entradillas respiran mas que un titulo de tarjeta */ .bajada,.entradilla,.hero p,.diapo p,.cp-der,.fh-bajada{line-height:1.6} /* 23.3 · SUBTITULO · encabeza un grupo dentro de la seccion -------- */ .sub-titulo,.mv-tit-principios,.tit-grupo,h2 + h3.suelto{ font-size:var(--t-subtitulo); line-height:1.22; } /* 23.4 · DESTACADO · la frase que abre un relato ------------------- .hist-texto .bien-guia queda fuera a propósito: tiene su propio tamaño, más chico, declarado en 20.1 — si entra aquí, este 28px fijo le gana por orden de cascada y la entradilla de «Nuestra historia» se ve desproporcionada. */ .bien-guia,.bien-lema{ font-size:var(--t-destacado); line-height:1.42; } /* 23.5 · APOYO · pies, notas, meta y tablas ------------------------ */ .meta,.meta span,.aviso,figcaption,.pie-legal,.migas,.com-cuenta, .vt-dep,.noticia-fuente,.com-dato span,.act-hito, .tabla td,.tabla th,small{ font-size:var(--t-apoyo); line-height:var(--int-medio); } /* 23.6 · ETIQUETA · siempre en mayusculas y siempre igual ---------- */ .eyebrow,.cp-ante,.fh-ante,.mv-et,.tipo,footer h4, .act-badge,.noticia-tag,.com-dato b,.act-num{ font-family:var(--fb); /* una etiqueta nunca va en serif, aunque sea un

como los del pie / font-size:var(--t-etiqueta); font-weight:var(--peso-fuerte); line-height:var(--int-medio); } .eyebrow,.cp-ante,.fh-ante,.mv-et,.tipo,footer h4, .act-badge,.noticia-tag,.com-dato b{ letter-spacing:.12em; text-transform:uppercase; } / pestanas, filtros y chips son botones, no rotulos: texto normal y al tamano de apoyo, que es el de los demas controles / .sec-tab,.vf-chip,.pr-tag,.noticias-chip{ font-size:var(--t-apoyo);font-weight:var(--peso-fuerte); letter-spacing:.01em;text-transform:none} / 23.7 · lo unico que sigue siendo fluido: los titulares ----------- / .tit-sec{font-size:var(--tit-sec)} h1,.articulo h1,.p404 h1,h1.tit-sec,h1.titulo{font-size:var(--td-h1)} .hero h1,.diapo h1,.diapo h2,.modal-num{font-size:var(--td-hero)} .cifra b,.cifra b .num-g,.com-cifra b,.fh-jalon b,.mz-cifra b{ font-size:var(--td-cifra)} h2:not(.tit-sec){font-size:var(--t-destacado)} / ========================================================================== REDES DEL PIE · cada marca con su color oficial ========================================================================== / .pie-redes .red{ width:42px;height:42px;display:grid;place-items:center;border-radius:50%; color:#fff;border:0; transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s} .pie-redes .red svg{display:block} .pie-redes .red:hover,.pie-redes .red:focus-visible{ transform:translateY(-4px) scale(1.06)} .pie-redes .red:focus-visible{outline:3px solid #fff;outline-offset:3px} / WhatsApp / .pie-redes .red-wa{background:#25D366} .pie-redes .red-wa:hover{box-shadow:0 8px 22px rgba(37,211,102,.45)} / Instagram · degradado oficial / .pie-redes .red-ig{background: radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)} .pie-redes .red-ig:hover{box-shadow:0 8px 22px rgba(214,36,159,.45)} / Facebook / .pie-redes .red-fb{background:#1877F2} .pie-redes .red-fb:hover{box-shadow:0 8px 22px rgba(24,119,242,.45)} / correo y puntos de atención no son marcas: van con el color del Consejo / .pie-redes .red-mail{background:var(--sol);color:var(--oscuro)} .pie-redes .red-mail:hover{box-shadow:0 8px 22px rgba(255,200,0,.42)} .pie-redes .red-mapa{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)!important} .pie-redes .red-mapa:hover{background:var(--vivo);border-color:var(--vivo)!important; box-shadow:0 8px 22px rgba(34,195,33,.45)} @media(prefers-reduced-motion:reduce){ .pie-redes .red{transition:none} .pie-redes .red:hover,.pie-redes .red:focus-visible{transform:none} } / ========================================================================== PIE · columna de atención: cada dato en su propio renglón, sin partirse La columna se ensancha lo necesario para que la línea más larga —el horario— entre entera. ========================================================================== / .pie-top{grid-template-columns:1.35fr 1fr 1fr 1.55fr} .pie-atencion .pa-linea{margin:0;line-height:1.55} .pie-atencion .pa-linea + .pa-linea{margin-top:.12rem} .pie-atencion .pa-sep{margin-top:.7rem} .pie-atencion .pa-linea a{display:inline-flex;align-items:center;gap:.35rem} / La columna se dimensiona para que cada dato entre en un renglón por sí solo. Sin white-space:nowrap a propósito: si el visitante agranda la letra con el control A/A/A, preferimos que parta antes que desbordar. / @media(max-width:960px){ .pie-top{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .pie-top{grid-template-columns:1fr} } / ========================================================================== El atributo hidden debe ocultar, siempre. Cualquier regla que fije display (grid, flex, inline-flex…) gana sobre el display:none que el navegador le da a [hidden]. Eso dejaba el visor de fotos cubriendo la pantalla entera después de cerrarlo —invisible pero tragándose todos los clics— y el botón «ver más» visible cuando sobraba. ========================================================================== / [hidden]{display:none!important} / ========================================================================== 21.8 · LA BARRA DE SECCIONES, AL COSTADO IZQUIERDO En pantallas anchas deja de ser una tira horizontal sobre el contenido y pasa a ser una columna fija a la izquierda, con el panel activo al lado. Por debajo de 1000 px vuelve a la tira horizontal: una barra lateral en un teléfono robaría todo el ancho de lectura. ========================================================================== / @media (min-width:1000px){ html.js-paneles main{ display:grid; grid-template-columns: minmax(0,1fr) [barra] minmax(215px,255px) [panel] minmax(0,880px) minmax(0,1fr); column-gap:clamp(1.4rem,2.6vw,2.6rem); align-items:start; } / la portada de la página y el cierre siguen ocupando todo el ancho / html.js-paneles main > .hero, html.js-paneles main > .volver-seccion{grid-column:1 / -1} html.js-paneles main > .sec-nav{grid-column:barra} html.js-paneles main > [data-panel]{grid-column:panel} / la barra se vuelve tarjeta vertical y se queda pegada al desplazarse / html.js-paneles main > .sec-nav{ position:sticky; top:calc(var(--alto-cab,64px) + 1.1rem); margin-block:clamp(1.6rem,3vw,2.6rem); background:var(--sup); border:1px solid var(--borde); border-radius:var(--r); box-shadow:var(--s1); padding:.55rem; backdrop-filter:none;-webkit-backdrop-filter:none; } html.js-paneles .sec-nav-in{ flex-direction:column; align-items:stretch; gap:.15rem; overflow:visible; padding-inline:0; padding-block:0; max-width:none; -webkit-mask-image:none;mask-image:none; } html.js-paneles .sec-tab{ width:100%; justify-content:flex-start; white-space:normal; text-align:left; border-radius:var(--r-sm); padding:.62rem .8rem; scroll-snap-align:none; } html.js-paneles .sec-tab i{min-width:1.4em} / el «Sección 2 de 5» pasa a ser el pie de la tarjeta / html.js-paneles .sec-nav-pie{ margin:.5rem .25rem 0; padding:.55rem .55rem 0; border-top:1px solid var(--borde); max-width:none; line-height:1.45; } / el panel ya no necesita su propio margen lateral: lo da la rejilla / html.js-paneles main > [data-panel] > .env{ max-width:none; padding-inline:0; } html.js-paneles main > [data-panel]{ padding-block:clamp(1.6rem,3vw,2.6rem); } / los paneles con fondo alterno quedan como tarjeta, no como franja / html.js-paneles main > [data-panel].sec-alt{ border-radius:var(--r); padding-inline:clamp(1.2rem,2.2vw,2rem); } } @media (prefers-reduced-motion:reduce){ html.js-paneles main > .sec-nav{transition:none} } / el punto del mapa y la miniatura son enlaces: que se note / .mapa-svg a.mp{cursor:pointer;text-decoration:none} .mapa-svg a.mp:focus{outline:none} .mapa-svg a.mp:focus-visible .mp-halo{stroke:var(--acento);stroke-width:3} a.mapa-tira-b{text-decoration:none;color:inherit} a.mapa-tira-b[aria-current="true"] .mapa-tira-n{color:var(--ink)} / 20 · encabezados centrados en columna y titulo blanco sobre fondo oscuro --- .cab-sec apila antetitulo, titulo y bajada en un solo eje centrado (antes el antetitulo y el titulo, ambos inline-block, quedaban lado a lado). El blanco se fuerza tambien con el modo de alto contraste activado, que ponia el titulo en tinta oscura sobre el verde. / .cab-sec{display:flex;flex-direction:column;align-items:center;text-align:center} .cab-sec .eyebrow,.cab-sec .cp-ante,.cab-sec .fh-ante{align-self:center} :is(.sec-tinta,.compromiso,.bien-fuerza,.hero,.diapo) :is(.tit-sec,.titulo,h2), body.contraste :is(.sec-tinta,.compromiso,.bien-fuerza,.hero,.diapo) :is(.tit-sec,.titulo,h2){ color:#fff!important} :is(.sec-tinta,.compromiso,.bien-fuerza,.hero,.diapo) .tit-sec::after, body.contraste :is(.sec-tinta,.compromiso,.bien-fuerza,.hero,.diapo) .tit-sec::after{ background:var(--tit-raya-clara)} / 21 · botones: un solo estilo y tamano compacto en todo el sitio ---------------- Medida tomada del boton «Ir a la pagina principal»: 38 px de alto, letra de 14 px, esquina de 6 px, verde institucional y texto blanco. Cubre .btn, .btn.sec (antes delineado en azul), .btn.claro, .btn.volver, .fh-btn y el enlace a.volver de arriba de cada articulo. Color y borde llevan !important (hay muchas reglas previas por seccion). El tamano va sin !important para no romper el boton de correo de la cabecera (.solo-ic) ni su reduccion en pantallas medianas. El alto es minimo, no fijo, para que un rotulo largo pueda pasar a dos lineas en el celular sin recortarse. Los iconos son de trazo (stroke=currentColor): heredan el blanco y no se les pone relleno, que los convertiria en manchas. / .btn,.fh-btn,a.volver{ display:inline-flex;align-items:center;justify-content:center; gap:6px; min-height:38px; font-family:Karla,system-ui,sans-serif; font-size:.875rem;font-weight:600;line-height:1.2; text-decoration:none; border-radius:6px; cursor:pointer; background:var(--brand,#0B7A1F)!important; color:#fff!important; border:1px solid var(--brand,#0B7A1F)!important; box-shadow:0 2px 4px rgba(0,0,0,.1)!important; } .btn:not(.solo-ic):not(.acciones .btn),.fh-btn,a.volver{padding:.5rem .9rem} .btn .ic,.btn svg,.fh-btn svg,a.volver svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;color:#fff} .btn:hover,.btn:focus-visible,.fh-btn:hover,.fh-btn:focus-visible,a.volver:hover,a.volver:focus-visible, .btn.sec:hover,.btn.claro:hover{ background:var(--oscuro,#0A2A0A)!important; border-color:var(--oscuro,#0A2A0A)!important; color:#fff!important; transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,.15)!important; } / sobre fondo verde oscuro el boton verde se recorta con un borde blanco / :is(.sec-tinta,.compromiso,.bien-fuerza,.hero,.diapo) :is(.btn,.fh-btn){ border-color:rgba(255,255,255,.9)!important} :is(.sec-tinta,.compromiso,.bien-fuerza,.hero,.diapo) :is(.btn,.fh-btn):hover{ background:var(--brand,#0B7A1F)!important;border-color:#fff!important} / los botones no se estiran al alto del vecino de fila: todos miden lo mismo / .btn,.fh-btn{align-self:center} .volver-pie,.btns{align-items:center} / alineacion vertical de botones vecinos: .volver trae un margen inferior pensado para el enlace de arriba del articulo; en un boton .btn.volver desplazaba 13 px al boton de al lado. / .btn.volver{margin:0} .btn,.fh-btn,a.volver{vertical-align:middle} .volver-pie>.btn,.btns>.btn{margin:0} / 22 · «¿Quiénes somos?» de la portada: subtitulo de lectura y parrafos justificados ---- El subtitulo baja de 28 px a ~18 px; los dos parrafos comparten ancho, se justifican y se centran como bloque (antes uno iba centrado y el otro a la izquierda). Solo dentro de #quienes-somos: .bien-guia se usa en otras paginas. / #quienes-somos .cab-sec .bien-guia{ font-size:1.15rem;line-height:1.4;font-weight:500; margin:.5rem auto 1.5rem} #quienes-somos .rev-i > .cab-sec > p.bajada, #quienes-somos .rev-i > p.bajada{ text-align:justify;text-justify:inter-word;hyphens:auto; line-height:1.6;max-width:800px; margin-left:auto;margin-right:auto} #quienes-somos .rev-i > .cab-sec > p.bajada{margin-bottom:0} / 23 · el antetitulo (.eyebrow) va sin la rayita «—» a la izquierda: en algunos titulos la tenia y en otros no, y ya se le quitaron los iconos. / .eyebrow::before{display:none} / 24 · tabla de aliados: todas las celdas de una fila se centran en vertical con el logo (el texto de «Acompañamiento» quedaba pegado arriba). / #aliados .tabla td{vertical-align:middle} / 25 · tarjetas vacias del listado de proyectos (.noticia.tarj-vacia): sin foto, sin enlace, texto centrado en la tarjeta. Los selectores llevan tres clases porque .rev.ok (opacity:1) les ganaba a una sola. / .noticia.tarj-vacia{background:#F8F9FA;border:2px dashed #CCC;box-shadow:none;pointer-events:none; display:flex;align-items:center;justify-content:center;text-align:center} .noticia.tarj-vacia.ok{opacity:.55} .noticia.tarj-vacia .cu{align-items:center;text-align:center} .noticia.tarj-vacia h3{font-weight:400;font-style:italic} .noticia.tarj-vacia:hover{transform:none;box-shadow:none} / 26 · consejo.php · panel «Quiénes somos»: encabezado centrado a todo el ancho, texto justificado y foto al lado. Va con #quienes (el de consejo.php); en la portada #quienes-somos es otra seccion y no se toca. / #quienes .env{padding-top:1.5rem} #quienes .cab-sec{margin-bottom:1.5rem} #quienes .tit-sec{font-size:2.25rem;line-height:1.2} #quienes .partido{max-width:850px;margin-inline:auto;align-items:start} #quienes .partido .bajada{ text-align:justify;text-justify:inter-word;hyphens:auto; font-size:1.05rem;line-height:1.65;color:var(--ink);max-width:none} / 27 · formulario PQRS en linea (#app-pqrs): secciones como las barras del formulario oficial, campos fijos de registro, casillas y errores. / .vp-sec{margin:1.6rem 0 .9rem;padding:.55rem 1rem;border-radius:8px;text-align:center; font-family:var(--fb);font-size:var(--t-sm);font-weight:700;letter-spacing:.04em; background:var(--menta);color:var(--oscuro)} .vp-cuerpo>.vp-sec:first-child{margin-top:0} .vp-fijo{display:flex;flex-direction:column;gap:.15rem;padding:.55rem .8rem;border:1px dashed var(--borde); border-radius:10px;background:var(--bg)} .vp-fijo .et{font-size:var(--t-xs);font-weight:700;color:var(--muted)} .vp-fijo b{font-size:var(--t-base);color:var(--ink);font-variant-numeric:tabular-nums} .vp-check{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 .9rem;font-size:var(--t-sm); line-height:1.5;cursor:pointer} .vp-check input{flex:none;width:20px;height:20px;margin-top:.15rem;padding:0;accent-color:var(--brand)} .vp-guia{font-size:var(--t-sm);color:var(--muted);font-style:italic;margin:0} .vp-cuenta{font-size:var(--t-xs);color:var(--muted);text-align:right;margin:0} .vp-error{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;background:#FDECEA;color:#B03325; border:1px solid #E7B6AE;font-size:var(--t-sm)} .vp textarea{min-height:110px;resize:vertical} .vp .btn[disabled]{opacity:.6;cursor:wait} @media(max-width:700px){.vp-rej{grid-template-columns:1fr}} / 28 · tarjetas de tramites de la portada que llevan a su formulario o tramite / a.tarj{display:block;color:inherit;text-decoration:none} a.tarj .leer{margin-top:.9rem} / 29 · tramite sin disponibilidad (tarjeta con texto pero sin enlace): se ve atenuada, no responde al puntero ni al foco. .rev.ok (opacity:1) les ganaba con una sola clase, de ahi el selector triple. / .tarj.tarj-desactivada{background:#F8F9FA;border:1px solid #E0E0E0;box-shadow:none;pointer-events:none} .tarj.tarj-desactivada.ok{opacity:.6} .tarj.tarj-desactivada:hover{transform:none} .tarj-desactivada .btn-enlace.deshabilitado{display:inline-block;margin-top:.9rem;font-size:var(--t-sm); font-weight:700;color:#888;cursor:not-allowed;text-decoration:none} / 30 · desplegables del menu principal: el cursor no se pierde al bajar ------ Causa: las reglas posteriores de transform (translateY sin translateX(-50%)) dejaban el panel arrancando en el centro del boton en lugar de centrado, asi que al bajar desde la mitad izquierda del boton el cursor quedaba fuera del panel y el :hover se cerraba. Ahora el panel parte del borde izquierdo del boton (o del derecho en las ultimas entradas) y mide al menos lo que mide el boton: bajar en linea recta siempre cae dentro. El puente invisible cubre todo el ancho del boton, y el panel espera 180 ms antes de ocultarse. / @media (min-width:1151px){ .nav>li.tiene-mega::before{left:0;right:0;width:auto;transform:none;height:.85rem} .nav>li.tiene-mega>.mega{left:0;right:auto;transform:translateY(10px) scale(.985); transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .18s} .nav>li.tiene-mega:nth-last-child(-n+2)>.mega{left:auto;right:0} .nav>li.tiene-mega:hover>.mega,.nav>li.tiene-mega:focus-within>.mega,.nav>li.tiene-mega.abierto>.mega{ transform:translateY(0) scale(1);transition-delay:0s} } / 31 · visor de mapa por comunidad (portada, antes del esquema de paradas) -------- Las fotografias de img/mapas/ ya traen dibujado el marcador «Usted se encuentra aqui» y su propia tarjeta de bienvenida, asi que el visor solo cambia de imagen: no hace falta una ficha lateral aparte. / .mapa-comunidad-visor{margin-bottom:clamp(2.4rem,5vw,3.6rem)} / Las imagenes miden unos 790 x 443 px: estiradas a los 1280 px del contenedor se veian borrosas y ocupaban la pantalla entera. El marco queda cerca de su tamano real y, ademas, nunca mas alto que la pantalla menos la cabecera fija, el titulo de la seccion y los botones: asi el titulo no queda tapado por la cabecera mientras se mira el mapa. / #territorio-inicio .cab-sec{margin-bottom:.9rem} .mcv-marco{border-radius:var(--r);overflow:hidden;box-shadow:var(--s2); border:1px solid var(--borde);background:var(--bg);margin:.4rem auto 0; width:min(100%,900px,max(480px,calc((100svh - 400px) 1.785)))} /* en pantalla ancha los botones caben en una fila: el mapa gana ese alto / @media (min-width:1100px){.mcv-marco{width:min(100%,900px,max(480px,calc((100svh - 340px) 1.785)))}} .mcv-marco img{width:100%;height:auto;display:block;aspect-ratio:791/443} @media (max-width:640px){.mcv-marco{width:100%}} /* el mapa va centrado: su titulo y su bajada tambien (regla del cliente) / .mapa-comunidad-visor>.mv-tit-principios,.mapa-comunidad-visor>.bajada{text-align:center;margin-inline:auto} .mapa-comunidad-visor>.bajada{max-width:60ch} .mcv-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.2rem} .mcv-btn{background:var(--sup);border:1px solid var(--borde);color:var(--ink); padding:.5rem 1.1rem;font-family:inherit;font-size:var(--t-sm);font-weight:600; border-radius:999px;cursor:pointer;transition:.25s var(--ease)} .mcv-btn:hover,.mcv-btn:focus-visible,.mcv-btn.activo{ background:var(--brand);color:#fff;border-color:var(--brand); box-shadow:0 4px 14px color-mix(in oklab,var(--brand) 35%,transparent)} / contador de visitas como Web Component: «actualizado hace…» */ bc-contador-visitas{display:block} .visitas-actualizado{margin:.8rem 0 0;text-align:center;font-size:var(--t-xs, .78rem);color:var(--muted);min-height:1.2em}

(o en el