/* ============================================================================ Eje Sur Medios — piel de portada Una implementacion, seis portales. El portal se elige con un atributo en o en el contenedor raiz: Todos los ratios de contraste anotados estan calculados (WCAG 2.1), no estimados. Ver design/handoff/tokens/design-tokens.json. ========================================================================== */ /* ---------- 1. lo que NO se parametriza -------------------------------- */ :root { --ink: #1C1C1C; --muted: #6B6B6B; --line: #E2E2E2; --foto: #DCDCD8; /* placeholder mientras no hay imagen */ --serif: 'Libre Baskerville', Georgia, serif; --sans: 'Source Sans 3', Inter, Helvetica, Arial, sans-serif; --ancho: 1200px; /* contenido */ --margen: clamp(20px, 8vw, 120px); /* 120 en 1440, 20 en 390 */ --gap-seccion: 44px; --gap-rotulo: 4px; /* rotulo -> contenido */ } /* ---------- 2. las 15 variables por portal ----------------------------- */ /* valores base = Deseret sin color de marca */ :root { --brand: #1C1C1C; --brand-fill: #E2E2E2; /* relleno del resalte: SIEMPRE claro */ --on-brand: #FFFFFF; /* texto calado sobre --brand */ --accent-text: #1C1C1C; /* la marca cuando tiene que ser texto */ --paper: #FFFFFF; --paper-soft: #F7F7F5; --radius-foto: 0; /* foto del lead */ --radius-thumb: 0; /* miniatura de fila */ --radius-bloque: 0; --regla-seccion: 1px; --nameplate-font: var(--serif); --nameplate-align: left; --rotulo-size: 44px; --rotulo-size-m: 32px; --head-rule: oxford; /* informativo: lo resuelve .masthead-rule--* */ --meta-format: clock; /* informativo: lo resuelve el backend */ } [data-portal="hub"] { --brand: #111111; --accent-text: #1E52B8; /* 7.11:1 sobre blanco */ --brand-ui: #2B6DE5; /* solo rellena: blanco encima 4.75:1 */ --chip-bg: #EAF0FE; /* el acento encima da 6.23:1 */ --on-brand: #FFFFFF; /* 18.88:1 */ --paper: #FFFFFF; --paper-soft: #F5F6F8; --line: #E8EAEE; --nameplate-font: var(--sans); --rotulo-size: 18px; --rotulo-size-m: 16px; /* el Hub sigue el pin */ } [data-portal="laboca"] { --brand: #B8860B; --brand-fill: #B8860B; /* oro medio: tinta 5.24:1 */ --on-brand: #1C1C1C; --accent-text: #7A5610; /* 5.55:1 sobre crema */ --paper: #F3EAD8; --paper-soft: #DDD3BE; --line: #D6C9AE; --muted: #6B655C; /* 4.83:1 */ --nameplate-align: center; } [data-portal="barracas"] { --brand: #1F4D3A; --brand-fill: #A0522D; --on-brand: #F3F3F1; /* 8.67:1 sobre el verde */ --accent-text: #1F4D3A; /* 8.67:1 sobre el papel */ --paper: #F3F3F1; --paper-soft: #FFFFFF; --line: #C9C7C1; --muted: #6E6961; /* 4.90:1 */ --radius-foto: 5px; --radius-thumb: 5px; --radius-bloque: 5px; --nameplate-align: center; } [data-portal="liniers"] { --brand: #E9C46A; --brand-fill: #FFC629; /* tinta encima: 10.84:1 */ --on-brand: #1C1C1C; --accent-text: #7A5A12; /* 6.15:1 sobre el papel */ --paper: #FDFBF5; --paper-soft: #F6F2E8; --radius-foto: 10px; --radius-thumb: 6px; --radius-bloque: 14px; --nameplate-font: 'Abril Fatface', Didot, 'Bodoni 72', Georgia, serif; --nameplate-align: center; } [data-portal="lugano"] { --brand: #1D3557; --brand-fill: #1D3557; --on-brand: #FFFFFF; /* 12.36:1 */ --accent-text: #1D3557; --paper: #FFFFFF; --paper-soft: #F4F6F9; --line: #E5E5E5; --nameplate-font: 'Titillium Web', 'Segoe UI', Roboto, Helvetica, sans-serif; --nameplate-align: left; } [data-portal="mataderos"] { --brand: #9B2226; --brand-fill: #E38A7C; /* tinta encima: 6.65:1 */ --on-brand: #FAFAF8; /* 7.58:1 sobre el rojo */ --accent-text: #9B2226; /* 7.58:1 sobre el papel */ --paper: #FAFAF8; --paper-soft: #F0F0EC; --nameplate-font: 'Alfa Slab One', 'Rockwell Extra Bold', Rockwell, Georgia, serif; --nameplate-align: left; } /* ---------- 3. base --------------------------------------------------- */ /* .portada puede ir en o en un contenedor: el Worker elige. */ .portada { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } body.portada { margin: 0; } .portada * { box-sizing: border-box; } /* Una imagen pegada en el cuerpo desde el CMS no viene envuelta en nada: sin esto se sale de la pagina. */ /* max-width sola no alcanza: el atributo height del HTML sigue mandando y la imagen queda achatada. height:auto conserva la proporcion de los atributos, que es justo lo que evita el salto de layout. */ .portada :is(img, svg, video, iframe, canvas) { max-width: 100%; height: auto; } /* Una URL larga sin espacios rompe la caja si no se le permite cortar. */ .portada :is(p, h1, h2, h3, h4, li, td, figcaption) { overflow-wrap: anywhere; } .portada p, .portada h1, .portada h2, .portada h3 { margin: 0; } .portada a { color: var(--accent-text); text-decoration: none; } /* Un titular es un enlace, pero no se pinta de color: hereda la tinta. El color de acento queda para los enlaces sueltos ("Leer la nota completa"). */ .portada .nameplate, .portada h1 a, .portada h2 a, .portada h3 a, .portada h4 a { color: inherit; } .envoltorio { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin: 0 auto; padding-inline: var(--margen); } .seccion { display: flex; flex-direction: column; gap: var(--gap-rotulo); } .pila { display: flex; flex-direction: column; gap: var(--gap-seccion); } /* ---------- 4. masthead + nav ----------------------------------------- */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 32px; } .masthead[data-align="center"] { flex-direction: column; align-items: center; } .nameplate { font-family: var(--nameplate-font); font-synthesis: none; font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: 0; } .ubicacion { font-size: 11.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); line-height: 1; } .nav { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; } .nav a { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 6px 0; } .nav a[aria-current="page"] { padding-bottom: 4px; border-bottom: 2px solid var(--brand); } .masthead-rule { height: 1px; background: var(--ink); margin-top: 18px; } .masthead-rule--thick { height: 4px; } .masthead-rule--oxford { height: 1px; box-shadow: 0 4px 0 0 var(--ink); margin-bottom: 5px; } /* ---------- 5. rotulo de seccion + resalte ---------------------------- */ .rotulo-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: var(--regla-seccion) solid var(--ink); padding-bottom: 12px; margin-top: 8px; } .rotulo { font-family: var(--serif); font-size: var(--rotulo-size); font-weight: 700; line-height: 1; letter-spacing: -0.012em; color: var(--ink); position: relative; display: inline-block; } .rotulo > span { position: relative; z-index: 1; } /* El resalte: SIEMPRE detras de la tinta, nunca encima. Sin SVG y sin ancho calculado: el bisel de la izquierda son 9px fijos que no se estiran con la palabra (por eso clip-path en px y no en %), y el remate de la derecha es un border-radius. Mismo dibujo que los mockups. */ .rotulo::before { content: ""; position: absolute; left: -3px; right: -6px; bottom: 0; height: 14px; background: var(--brand-fill); border-radius: 0 7px 7px 0; clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%); z-index: 0; pointer-events: none; } .rotulo--sin-resalte::before { content: none; } /* el Hub no lleva resalte: su rotulo es sans 18/700, como el pin */ [data-portal="hub"] .rotulo { font-family: var(--sans); letter-spacing: 0; } [data-portal="hub"] .rotulo::before { content: none; } /* Barracas: el rotulo ES el gesto. Serif 44 en peso normal, forest, sin regla ni riel debajo; el marron queda para volantas y enlaces, nunca de barra. */ [data-portal="barracas"] .rotulo { font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: var(--brand); } [data-portal="barracas"] .rotulo::before { content: none; } [data-portal="barracas"] .rotulo-fila { border-bottom: 0; padding-bottom: 0; margin-bottom: 22px; } /* Lugano: bloque calado, como el widget title de Kontrast */ [data-portal="lugano"] .rotulo { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-brand); background: var(--brand); padding: 7px 10px 6px; } [data-portal="lugano"] .rotulo::before { content: none; } [data-portal="lugano"] .rotulo-fila { border-bottom: 2px solid var(--brand); padding-bottom: 0; } .volanta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1; color: var(--accent-text); display: inline-block; } .sub-rotulo { font-size: 12.5px; color: var(--muted); } /* ---------- 6. lead --------------------------------------------------- */ .lead { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; } .lead-cuerpo { display: flex; flex-direction: column; gap: 14px; } .lead h1 { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; text-wrap: pretty; } .deck { font-size: 16px; line-height: 1.5; } .meta { font-size: 12.5px; color: var(--muted); line-height: 1; } /* ---------- 7. fila titular (tres densidades) ------------------------- */ .fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); } .fila:first-child { border-top: 0; } .fila--media { grid-template-columns: 120px minmax(0, 1fr); } .fila--suelta { grid-template-columns: 160px minmax(0, 1fr); padding: 16px 0; } .fila h3 { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; text-wrap: pretty; } .fila--media h3 { font-size: 17px; } .fila--suelta h3 { font-size: 18px; } .fila .meta { margin-top: 8px; display: flex; align-items: center; gap: 8px; } /* ---------- 8. card --------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .card { display: flex; flex-direction: column; gap: 10px; } .card h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.3; } /* ---------- 9. foto y bloque de acento -------------------------------- */ /* height:auto es obligatorio: el atributo height del HTML sobrevive como presentational hint y anula el aspect-ratio, deformando la foto. */ .foto { background: var(--foto); border-radius: var(--radius-foto); display: block; width: 100%; height: auto; } .thumb { background: var(--foto); border-radius: var(--radius-thumb); display: block; width: 100%; height: auto; } .foto[class*="foto--"], .thumb { object-fit: cover; } .foto--16x9 { aspect-ratio: 16 / 9; } .foto--16x10 { aspect-ratio: 16 / 10; } .foto--3x4 { aspect-ratio: 3 / 4; } .bloque-acento { background: var(--paper-soft); border-radius: var(--radius-bloque); padding: 30px 32px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: center; } .bloque-acento--calado { background: var(--brand); color: var(--on-brand); } .bloque-acento--calado .meta, .bloque-acento--calado a { color: var(--on-brand); opacity: .85; } /* ---------- 10. modulo fijo (la portada sin notas) -------------------- */ /* Cada portal tiene UN modulo que no depende de que haya notas publicadas: Hub "El sur en un dato" · Boca "El color de la semana" · Barracas "El dato del barrio" · Liniers "El tablero" · Lugano "Obras prometidas" · Mataderos "Domingo". Es lo que evita la portada vacia. */ .modulo-fijo { display: flex; flex-direction: column; gap: 12px; } .modulo-fijo .dato { font-family: var(--serif); font-size: 56px; font-weight: 700; line-height: 1; color: var(--accent-text); } /* ---------- 11. slot de pauta ---------------------------------------- */ /* El rotulo va SIEMPRE, tambien con pauta real: un anuncio sin identificar es publicidad encubierta. Antes el texto vivia en :empty y por eso solo se veia en los mockups. */ .pauta { display: flex; flex-direction: column; gap: 6px; } .pauta::before { content: "Publicidad"; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .pauta > * { max-width: 100%; } .pauta:not(:has(*)) { background: var(--paper-soft); border: 1px dashed var(--line); min-height: 90px; align-items: center; justify-content: center; } .pauta:not(:has(*))::after { content: "Slot 970 × 90 · se oculta si no hay pauta"; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* ---------- 11b. pie legal ------------------------------------------- */ /* Lo que un medio registrado tiene que declarar y no estaba en ninguna pagina: director responsable, domicilio y registro. El dato ya existia en feed.xml y no se imprimia en el HTML. */ .pie-legal { border-top: 1px solid var(--line); padding: 14px 0 0; margin-top: 14px; font-size: 11.5px; line-height: 1.6; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 18px; } .pie-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } /* ---------- 12. footer ----------------------------------------------- */ .footer { border-top: 1px solid var(--ink); margin-top: var(--gap-seccion); padding: 20px 0 40px; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; } .footer .nombre { font-family: var(--nameplate-font); font-size: 20px; font-weight: 700; } .footer .contacto { font-size: 12.5px; color: var(--muted); } .footer .red { display: flex; gap: 22px; flex-wrap: wrap; } .footer .red a { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* ---------- 13. mobile ----------------------------------------------- */ /* Entre 761 y 1100px no hay artboard. Sin este corte, a 800px de viewport la columna principal del lead queda en 140px. */ @media (max-width: 1100px) { .lead, .bloque-acento { grid-template-columns: minmax(0, 1fr); } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { :root { --gap-seccion: 32px; } .nameplate { font-size: 34px; } .rotulo { font-size: var(--rotulo-size-m); } .rotulo::before { left: -2px; right: -5px; height: 11px; border-radius: 0 5.5px 5.5px 0; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); } .rotulo-fila { padding-bottom: 10px; } .lead h1 { font-size: 30px; } .cards { grid-template-columns: minmax(0, 1fr); } .fila, .fila--media, .fila--suelta { grid-template-columns: 108px minmax(0, 1fr); } .nav { gap: 18px; overflow-x: auto; } } /* ---------- 14. componentes propios del Hub --------------------------- */ /* Portado de design/ejesur/Main.dc.html, el artboard aprobado. Las medidas son las del artboard, no aproximaciones: el Hub no comparte estructura con los otros cinco y no hay una version "simplificada" valida de esta pagina. Contrastes calculados (WCAG 2.1): tinta #1C1C1C sobre chip #F5F6F8 15.76:1 blanco sobre azul #2B6DE5 4.75:1 (chip activo y pastilla) muted #6B6B6B sobre chip #F5F6F8 4.93:1 los seis tags de barrio, de 5.41 a 15.08:1 (ver mas abajo) */ /* El Hub tiene su propia caja: 1440 de ancho con 32 de margen, no los 1200/120 de la base. Y sus secciones no se separan con un gap sino con un filete arriba, que es lo que da la lectura de panel continuo. */ [data-portal="hub"] { --ancho: 1376px; --margen: clamp(16px, 2.2vw, 32px); } [data-portal="hub"] .pila { gap: 0; } [data-portal="hub"] .envoltorio { padding-block: 22px 28px; } .hub-seccion { border-top: 1px solid var(--line); padding: 20px 0 24px; display: flex; flex-direction: column; } .hub-seccion--temas { padding: 18px 0 22px; } .hub-seccion--ultimas { padding: 20px 0 26px; } /* --- cabecera --------------------------------------------------------- */ .hub-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding-bottom: 18px; } .hub-id { display: flex; align-items: center; gap: 14px; } /* El avatar es un cuadrado redondeado de 14, no un circulo: es la marca ES, no la foto de una persona. */ .hub-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } .hub-saludo { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } .hub-sub { font-size: 14px; color: var(--muted); margin-top: 3px; } .hub-derecha { display: flex; align-items: center; gap: 24px; padding-top: 6px; flex-wrap: wrap; min-width: 0; } .hub-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-width: 0; font-size: 14px; font-weight: 600; } .hub-nav a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); } .hub-nav a[aria-current="page"] { color: var(--ink); padding-bottom: 4px; border-bottom: 2px solid var(--brand-ui, var(--brand)); } .hub-acciones { display: flex; align-items: center; gap: 8px; } /* 36 de caja visible pero 44 de area tactil: el circulo del artboard no llega a los 24 minimos de 2.5.8 por si solo... si llega (36 > 24), pero se deja el area comoda igual porque son los dos unicos botones de la pagina. */ .hub-accion { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); } .hub-accion:hover { color: var(--ink); border-color: var(--muted); } .hub-accion .ico { width: 16px; height: 16px; } /* --- fila de rotulo --------------------------------------------------- */ /* No hay regla debajo del rotulo en el Hub: la regla de seccion esta arriba. El sub-rotulo va en linea con el titulo, no debajo. */ [data-portal="hub"] .rotulo-fila { border-bottom: 0; padding-bottom: 0; margin: 0 0 16px; align-items: flex-end; gap: 24px; } .hub-seccion--temas .rotulo-fila { margin-bottom: 14px; } .hub-seccion--dato .rotulo-fila { margin-bottom: 18px; } .hub-rotulo-izq { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; } [data-portal="hub"] .rotulo { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } [data-portal="hub"] .sub-rotulo { font-size: 13px; } /* enlace "Ver todos ->" con la flecha del artboard */ .hub-mas { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted); } .hub-mas::after { content: ""; width: 12px; height: 12px; } .hub-mas--acento { color: var(--accent-text); } .hub-filtrar { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 13px; font-weight: 600; color: var(--muted); } .hub-filtrar::after { content: ""; width: 13px; height: 13px; } /* --- chips de tema ---------------------------------------------------- */ /* Nueve columnas iguales. El icono vive en su propia caja de 40 dentro del chip: es eso lo que da el aire de producto, no el radio. */ .chips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; } .chip { background: var(--paper-soft); border-radius: 16px; padding: 12px 8px 11px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--ink); } .chip .ico-caja { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; } .chip .ico { width: 20px; height: 20px; } .chip span { font-size: 12.5px; font-weight: 600; line-height: 1.2; } .chip:hover { background: #EDEFF3; } .chip[aria-pressed="true"] { background: var(--brand-ui, var(--brand)); color: var(--on-brand); } .chip[aria-pressed="true"] .ico-caja { background: rgba(255, 255, 255, .18); } .chip[aria-pressed="true"]:hover { background: #2560CC; } /* --- El sur en un dato ------------------------------------------------ */ .hub-dato { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .hub-dato-principal { display: flex; align-items: center; gap: 24px; min-width: 0; } .hub-dato .cifra { font-size: 76px; font-weight: 700; line-height: .95; letter-spacing: -0.035em; white-space: nowrap; font-variant-numeric: tabular-nums; } .hub-dato-texto { display: flex; flex-direction: column; gap: 5px; max-width: 380px; border-left: 1px solid var(--line); padding-left: 24px; } .hub-dato .glosa { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; } .hub-dato-texto .meta { font-size: 13px; line-height: 1.45; } .hub-dato-chicos { display: flex; align-items: stretch; flex-shrink: 1; min-width: 0; } .hub-dato-chicos > div { display: flex; flex-direction: column; justify-content: center; gap: 5px; flex: 0 1 202px; min-width: 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--line); } .hub-dato-chicos > div + div { margin-left: 24px; } .hub-dato-chicos .cifra { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .hub-dato-chicos p { font-size: 13px; font-weight: 600; line-height: 1.3; } .hub-dato-chicos .meta { font-size: 12px; } /* --- tag de barrio y meta con iconos ---------------------------------- */ /* En el Hub conviven notas de seis portales: sin el tag, el titular no dice de donde viene. Los seis pares son los del artboard y todos pasan AA. */ .tag-barrio { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; border-radius: 6px; padding: 3px 8px; background: var(--paper-soft); color: var(--ink); } .tag-barrio[data-barrio="laboca"] { background: #FDEEE3; color: #A84100; } /* 5.41:1 */ .tag-barrio[data-barrio="barracas"] { background: #E4EFE9; color: #1F4D3A; } /* 8.17:1 */ .tag-barrio[data-barrio="liniers"] { background: #FAF1DC; color: #7A5D14; } /* 5.49:1 */ .tag-barrio[data-barrio="lugano"] { background: #E4E9F0; color: #1D3557; } /* 10.13:1 */ .tag-barrio[data-barrio="mataderos"] { background: #F7E6E6; color: #9B2226; } /* 6.57:1 */ .tag-barrio[data-barrio="hub"] { background: #F0F1F3; color: #1C1C1C; } /* 15.08:1 */ .hub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; overflow: hidden; } .hub-meta > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); flex-shrink: 0; white-space: nowrap; } .hub-meta > span:last-child { min-width: 0; } .hub-meta > span:last-child > span { overflow: hidden; text-overflow: ellipsis; } .meta-ico { width: 12px; height: 12px; } /* --- titulares de hoy ------------------------------------------------- */ .titulares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; } .titular { display: flex; gap: 12px; align-items: center; min-width: 0; } .titular .thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; } .titular > div { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } /* Dos lineas y corta: con cuatro columnas, un titular largo desalinearia toda la fila. */ .titular h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- ultimas ---------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } [data-portal="hub"] .card { gap: 10px; } .card-media { position: relative; display: block; border-radius: 14px; overflow: hidden; } [data-portal="hub"] .card-media .foto { border-radius: 14px; } /* La pastilla es azul, no negra: es una llamada a la accion, no una etiqueta sobre la foto. Blanco sobre #2B6DE5 da 4.75:1. */ .pill-leer { position: absolute; right: 10px; bottom: 10px; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--brand-ui, var(--brand)); color: var(--on-brand); font-size: 11.5px; font-weight: 700; line-height: 1; } .pill-leer::after { content: ""; width: 12px; height: 12px; } .card-media:hover .pill-leer { background: #2560CC; } [data-portal="hub"] .card h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.28; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card .hub-meta { margin-top: 2px; gap: 10px; } /* La firma: quien lo escribio, con que rol y en que portal. Es un indicador de confianza, no un adorno. */ .card-firma { display: flex; align-items: center; gap: 10px; padding-top: 2px; } .card-firma .retrato { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--foto); object-fit: cover; } .card-firma > div { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .card-firma .autor { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* El enlace del autor queda en 16px de alto y no llega a 24: aplica la excepcion "inline" de 2.5.8, va dentro de una linea de texto corrida. */ .card-firma .rol { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-firma .fecha { font-size: 12px; color: var(--muted); flex-shrink: 0; } /* --- pie -------------------------------------------------------------- */ [data-portal="hub"] .footer { border-top: 1px solid var(--line); margin-top: 0; padding: 18px 0 0; align-items: center; } [data-portal="hub"] .footer .nombre { font-family: var(--sans); font-size: 14px; } [data-portal="hub"] .footer .contacto { font-size: 12.5px; } [data-portal="hub"] .footer .red { gap: 18px; } [data-portal="hub"] .footer .red a { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; } /* --- de 1440 para abajo ----------------------------------------------- */ /* El artboard es de 1440 fijo. Estos cortes son la reduccion; el orden y la jerarquia no cambian, cambia cuantas columnas entran. */ @media (max-width: 1240px) { .chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hub-dato { gap: 24px; } .hub-dato-chicos > div { width: auto; min-width: 150px; } } @media (max-width: 1100px) { .hub-dato { flex-direction: column; align-items: stretch; gap: 22px; } .titulares { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-dato-chicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; flex-shrink: 1; width: 100%; } .hub-dato-chicos > div, .hub-dato-chicos > div + div { width: auto; min-width: 0; margin-left: 0; padding: 0 0 0 20px; } [data-portal="hub"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-dato-texto { max-width: none; } } @media (max-width: 760px) { .hub-header { flex-direction: column; gap: 16px; padding-bottom: 14px; } .hub-derecha { padding-top: 0; width: 100%; justify-content: space-between; gap: 12px; } .hub-nav { gap: 16px; overflow-x: auto; flex-wrap: nowrap; flex: 1 1 0; min-width: 0; } .hub-saludo { font-size: 22px; } .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .titulares, [data-portal="hub"] .cards { grid-template-columns: minmax(0, 1fr); } .hub-dato-principal { flex-direction: column; align-items: flex-start; gap: 12px; } .hub-dato .cifra { font-size: 52px; } .hub-dato-texto { border-left: 0; padding-left: 0; } .hub-dato-chicos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; flex-shrink: 1; width: 100%; } .hub-dato-chicos > div, .hub-dato-chicos > div + div { width: auto; min-width: 0; margin-left: 0; padding: 0 0 0 14px; } } /* ---------- 14b. iconos del Hub --------------------------------------- */ /* Calcados de Main.dc.html: mismos paths y mismo grosor de trazo. Van en mask-image para que el color salga de currentColor, que es lo que permite que el chip activo invierta el icono sin un segundo archivo. */ .chip .ico, .hub-accion .ico, .meta-ico, .hub-mas::after, .pill-leer::after, .hub-filtrar::after { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: var(--ico); mask-image: var(--ico); background: currentColor; flex-shrink: 0; } .chip .ico[data-ico="todos"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%277%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2717%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%272.4%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="vecinales"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M3%2020c0-3.3%202.7-5%206-5s6%201.7%206%205%27%2F%3E%3Cpath%20d%3D%27M16%206.5a3%203%200%20010%206%27%2F%3E%3Cpath%20d%3D%27M18%2015c2%20.7%203%202.3%203%205%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="obras"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l7%2012H5z%27%2F%3E%3Cpath%20d%3D%27M3%2020h18%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="transporte"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M4%2011h16%27%2F%3E%3Cpath%20d%3D%27M7%2020v-2%27%2F%3E%3Cpath%20d%3D%27M17%2020v-2%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="cultura"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l2.4%205.2%205.6.6-4.2%203.8%201.2%205.6L12%2016.4%206.9%2019.2%208.1%2013.6%204%209.8l5.6-.6z%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="agenda"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2715%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%203v4%27%2F%3E%3Cpath%20d%3D%27M16%203v4%27%2F%3E%3Cpath%20d%3D%27M4%2010h16%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="ferias"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010l3-5h12l3%205z%27%2F%3E%3Cpath%20d%3D%27M3%2010c1.5%200%201.5%202%203%202s1.5-2%203-2%201.5%202%203%202%201.5-2%203-2%201.5%202%203%202%201.5-2%203-2%27%2F%3E%3Cpath%20d%3D%27M5%2012v8%27%2F%3E%3Cpath%20d%3D%27M19%2012v8%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="salud"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%204h4v6h6v4h-6v6h-4v-6H4v-4h6z%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="educacion"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%207c-2-2-5-2.5-8-2v12c3-.5%206%200%208%202%202-2%205-2.5%208-2V5c-3-.5-6%200-8%202z%27%2F%3E%3Cpath%20d%3D%27M12%207v12%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="seguridad"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5l7.5%202.8V12c0%204.3-3.1%207.1-7.5%208.4C7.6%2019.1%204.5%2016.3%204.5%2012V6.3z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2.2%202.2L15.5%2010%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="deportes"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M12%203.5v5.3%27%2F%3E%3Cpath%20d%3D%27M4.4%208.8l4.9%203.6%27%2F%3E%3Cpath%20d%3D%27M19.6%208.8l-4.9%203.6%27%2F%3E%3Cpath%20d%3D%27M7.6%2019.5l1.9-5.6%27%2F%3E%3Cpath%20d%3D%27M16.4%2019.5l-1.9-5.6%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="ambiente"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2019.5c0-8.5%205.2-13%2015-13%200%209.5-5%2013.8-11.4%2013.8%27%2F%3E%3Cpath%20d%3D%27M4.5%2019.5c2.4-5.2%205.7-8.1%2010-10%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="economia"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2019.5h17%27%2F%3E%3Cpath%20d%3D%27M6.5%2016.5v-5%27%2F%3E%3Cpath%20d%3D%27M11%2016.5v-8%27%2F%3E%3Cpath%20d%3D%27M15.5%2016.5v-6%27%2F%3E%3Cpath%20d%3D%27M20%2016.5v-10%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="politica"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h16%27%2F%3E%3Cpath%20d%3D%27M6.5%2020V11%27%2F%3E%3Cpath%20d%3D%27M10.5%2020V11%27%2F%3E%3Cpath%20d%3D%27M14.5%2020V11%27%2F%3E%3Cpath%20d%3D%27M18.5%2020V11%27%2F%3E%3Cpath%20d%3D%27M4%2011l8-6%208%206%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="policiales"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M20%2020l-3.5-3.5%27%2F%3E%3C%2Fsvg%3E"); } .chip .ico[data-ico="tema"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204h7l9%209-7%207-9-9z%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278.5%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); } .hub-accion .ico[data-ico="buscar"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M20%2020l-3.5-3.5%27%2F%3E%3C%2Fsvg%3E"); } .hub-accion .ico[data-ico="campana"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%209a6%206%200%2010-12%200c0%206-2%207-2%207h16s-2-1-2-7%27%2F%3E%3Cpath%20d%3D%27M10.5%2020a2%202%200%20003%200%27%2F%3E%3C%2Fsvg%3E"); } .meta-ico[data-ico="reloj"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.5%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E"); } .meta-ico[data-ico="etiqueta"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204h7l9%209-7%207-9-9z%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278.5%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); } .hub-mas::after { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h13%27%2F%3E%3Cpath%20d%3D%27M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E"); } .pill-leer::after { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h13%27%2F%3E%3Cpath%20d%3D%27M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E"); } .hub-filtrar::after { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16%27%2F%3E%3Cpath%20d%3D%27M7%2012h10%27%2F%3E%3Cpath%20d%3D%27M10%2018h4%27%2F%3E%3C%2Fsvg%3E"); } /* ---------- 15. la nota ------------------------------------------------ */ /* A diferencia de la portada, la nota SI es la misma en los seis portales: cambia la piel, no la estructura. Es la pagina que mas trafico recibe (se entra desde WhatsApp, Facebook o Google, no desde la portada), asi que manda la lectura: medida corta, cuerpo grande, interlinea amplia. */ .nota { max-width: 680px; margin: 0 auto; } /* ~68 caracteres por linea */ .nota-cabeza { display: flex; flex-direction: column; gap: 14px; } .nota h1 { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.14; letter-spacing: -0.012em; text-wrap: pretty; } .nota .bajada { font-size: 20px; line-height: 1.5; color: var(--ink); } .nota .firma { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .nota .firma strong { font-weight: 700; color: var(--ink); } /* La foto rompe la medida del texto y ocupa el ancho de la columna de lectura mas un respiro a cada lado; en mobile va a sangre. */ .nota-foto { margin: 26px 0 0; } .nota-foto img, .nota-foto .foto { width: 100%; } .nota-foto figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; } .nota-foto figcaption .credito { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; } .nota-cuerpo { font-size: 18px; line-height: 1.7; margin-top: 26px; display: flex; flex-direction: column; gap: 22px; } .nota-cuerpo h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.25; margin-top: 10px; } .nota-cuerpo a { text-decoration: underline; text-underline-offset: 3px; } .nota-cuerpo blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--brand); font-family: var(--serif); font-size: 21px; line-height: 1.45; } .nota-cuerpo ul, .nota-cuerpo ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } .nota-pie { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .compartir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .compartir a { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; color: var(--ink); } .etiquetas { display: flex; gap: 8px; flex-wrap: wrap; } /* 24px de alto minimo: es el criterio 2.5.8 de WCAG 2.2. */ .etiquetas a { font-size: 12px; font-weight: 600; color: var(--accent-text); min-height: 24px; display: inline-flex; align-items: center; padding: 0 2px; } @media (max-width: 760px) { .nota h1 { font-size: 29px; } .nota .bajada { font-size: 17px; } .nota-cuerpo { font-size: 17px; } .nota-foto { margin-left: calc(var(--margen) * -1); margin-right: calc(var(--margen) * -1); } .nota-foto figcaption { padding-inline: var(--margen); } } /* ---------- 16. seccion y 404 ----------------------------------------- */ /* Como la nota, el listado de seccion es el mismo en los seis: cambia la piel, no la estructura. */ .seccion-cabeza { display: flex; flex-direction: column; gap: 10px; } .seccion-cabeza .descripcion { font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 620px; } .seccion-cabeza .cuenta { font-size: 12.5px; color: var(--muted); } .paginacion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--gap-seccion); padding-top: 20px; border-top: 1px solid var(--line); } .paginacion a, .paginacion span { font-size: 13px; font-weight: 600; line-height: 1; padding: 10px 14px; border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-bloque); } .paginacion [aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: transparent; } .paginacion .hueco { border: 0; color: var(--muted); padding-inline: 4px; } /* Cuando una seccion todavia no tiene notas publicadas. No es un error: pasa siempre al arrancar un portal. */ .vacio { border: 1px dashed var(--line); border-radius: var(--radius-bloque); padding: 40px 32px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; } .vacio h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; } .vacio p { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 440px; } .error-404 { padding: 70px 0 60px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 620px; } .error-404 .codigo { font-family: var(--serif); font-size: 72px; font-weight: 700; line-height: 1; color: var(--accent-text); } .error-404 h1 { font-family: var(--serif); font-size: 32px; font-weight: 700; line-height: 1.2; } .error-404 p { font-size: 16px; line-height: 1.55; } /* ---------- 17. componentes propios de La Boca ------------------------- */ /* La Boca sigue su pin y su artboard aprobado (BocaClara.dc.html): barra fina en vez de masthead, rotulos en mayusculas sin resalte, un mosaico de tres anchos, modulos rellenos de oro, barra separadora, banner redondeado y pie negro. El gesto de la pincelada vive UNICAMENTE en el titular principal de «Lo ultimo» y se tine con el color de la semana. Bloque para pegar al final de skin.css. Todo va con prefijo boca- salvo los ajustes a la piel base, que van bajo [data-portal="laboca"]. Contrastes calculados (WCAG 2.1), no estimados: tinta #1C1C1C sobre oro #B8860B 5.24:1 acento #7A5610 sobre papel #F3EAD8 5.55:1 muted #6B655C sobre papel #F3EAD8 4.83:1 tinta suave #4A4640 sobre papel 7.84:1 tinta suave #4A4640 sobre placeholder 6.31:1 (muted daria 3.88: no) papel #F3EAD8 sobre tinta #1C1C1C 14.26:1 (barra separadora) papel #F3EAD8 sobre negro #0E0E0E 16.15:1 (boton del banner) crema #F5F0E8 sobre negro #0E0E0E 17.02:1 (pie) gris #9D9A95 sobre negro #0E0E0E 6.89:1 (pie, texto secundario) oro #B8860B sobre negro #0E0E0E 5.93:1 (pie, rotulos chicos) negro #0E0E0E sobre oro #B8860B 5.93:1 (no se usa: va la tinta) El oro NUNCA es texto sobre el papel (2.72:1): rellena, y encima va tinta. */ [data-portal="laboca"] { --boca-negro: #0E0E0E; /* pie y boton del banner */ --boca-negro-texto: #F5F0E8; /* 17.02:1 sobre el negro */ --boca-negro-suave: #9D9A95; /* 6.89:1 sobre el negro; reemplaza el rgba .62 del artboard */ --boca-tinta-suave: #4A4640; /* bajadas en serif y texto sobre placeholder */ --foto: #DDD3BE; /* el placeholder de foto es el papel suave, no el gris base */ /* El artboard aprobado es de 1328px de contenido con 56px de margen a 1440, no los 1200/120 de Deseret. Si se prefiere unificar, borrar estas dos lineas: la grilla es proporcional y no se rompe. */ --ancho: 1328px; --margen: clamp(20px, 3.9vw, 56px); } /* --- ajustes a la piel base ------------------------------------------- */ /* Rotulos en mayusculas, sin pincelada (la version clara la reserva para el titular principal) y con la regla en color de linea, no en tinta. */ [data-portal="laboca"] .rotulo { text-transform: uppercase; letter-spacing: 0.01em; } [data-portal="laboca"] .rotulo::before { content: none; } [data-portal="laboca"] .rotulo-fila { border-bottom-color: var(--line); align-items: baseline; } [data-portal="laboca"] .seccion { gap: 22px; } [data-portal="laboca"] .sub-rotulo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } /* La volanta es una etiqueta con borde de oro y texto de acento. El borde es decorativo (2.72:1): el texto es lo que se lee. */ [data-portal="laboca"] .volanta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--brand); font-size: 11px; letter-spacing: 0.12em; align-self: flex-start; } [data-portal="laboca"] .meta { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.3; } [data-portal="laboca"] .deck { font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--boca-tinta-suave); } [data-portal="laboca"] .card h3 { line-height: 1.3; } [data-portal="laboca"] .card h4 { font-family: var(--serif); font-size: 14px; font-weight: 700; line-height: 1.35; } [data-portal="laboca"] .foto, [data-portal="laboca"] .thumb { object-fit: cover; } /* --- barra fina (cabecera) --------------------------------------------- */ .boca-barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 4px 0; border-bottom: 1px solid var(--line); } .boca-barra .nameplate { font-size: 21px; letter-spacing: -0.01em; } .boca-barra .nav { margin-top: 0; gap: 22px; } .boca-barra .nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; } .boca-barra .nav a[aria-current="page"] { padding-bottom: 0; border-bottom: 2px solid var(--ink); } .boca-utiles { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .boca-fecha { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 8px; white-space: nowrap; } .boca-icono { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); } .boca-icono--buscar::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; margin: -3px 0 0 -3px; } .boca-icono--buscar::after { content: ""; position: absolute; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); right: 13px; bottom: 14px; } .boca-icono--menu::before { content: ""; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 0 currentColor, 0 6px 0 0 currentColor; } /* --- rotulo de portada («Lo ultimo»): centrado, grande, sin regla ------ */ .rotulo-fila.boca-rotulo-portada { justify-content: center; border-bottom: 0; padding-bottom: 0; margin-top: 0; } .boca-rotulo-portada .rotulo { font-size: 66px; } /* enlace chico en mayusculas («Ver todas», «Archivo de colores») */ .boca-enlace { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; } .boca-rotulo-extra { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } /* --- la pincelada: solo en el titular principal ------------------------ */ /* El color lo pone el Worker en el envoltorio: style="--boca-pincel: #hex" y data-pincel-texto="papel" | "tinta" segun cual de los dos de AA calculado sobre ese color. Sin color cargado: oro con tinta (5.24:1). */ .boca-pincel { position: relative; display: inline-block; margin-left: 12px; } .boca-pincel svg { position: absolute; left: -16px; top: -7px; width: calc(100% + 32px); height: calc(100% + 14px); z-index: 0; pointer-events: none; } .boca-pincel path { fill: var(--boca-pincel, var(--brand-fill)); } .boca-pincel > span { position: relative; z-index: 1; padding: 0 6px; color: var(--on-brand); } [data-pincel-texto="papel"] .boca-pincel > span { color: var(--paper); } .boca-pincel--chica { margin-left: 10px; } .boca-pincel--chica svg { left: -12px; top: -5px; width: calc(100% + 24px); height: calc(100% + 10px); } .boca-pincel--chica > span { padding: 0 4px; } /* --- mosaico de tres anchos (700 · 360 · 220 sobre 1328) --------------- */ .boca-mosaico { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 18fr) minmax(0, 11fr); gap: 24px; align-items: start; } .boca-mosaico-col { display: flex; flex-direction: column; gap: 24px; } .boca-mosaico-lead { gap: 14px; } .boca-mosaico-lead .foto { aspect-ratio: 35 / 19; } .boca-mosaico-lead h2 { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; text-wrap: pretty; } /* las dos de apoyo debajo del lead */ .boca-apoyo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 4px; } .boca-apoyo .card { gap: 8px; } .boca-apoyo .card h3 { font-size: 21px; line-height: 1.25; } .boca-apoyo .deck { font-size: 13.5px; line-height: 1.55; } .boca-apoyo-foto { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; } .boca-apoyo-foto .thumb { aspect-ratio: 1; } .boca-apoyo-foto .card h3 { font-size: 16px; line-height: 1.32; } /* columna media: dos notas con foto */ .boca-mosaico-media .card h3 { font-size: 19px; line-height: 1.28; } .boca-mosaico-media .card:first-child .foto { aspect-ratio: 16 / 9; } .boca-mosaico-media .card:last-child .foto { aspect-ratio: 12 / 11; } /* columna angosta: breves separadas por filete */ .boca-mosaico-breves { gap: 0; } .boca-mosaico-breves .card { gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); } .boca-mosaico-breves .card:first-child { padding-top: 0; border-top: 0; } .boca-mosaico-breves .card:last-child { padding-bottom: 0; } .boca-mosaico-breves .foto { aspect-ratio: 2 / 1; } .boca-mosaico-breves .card h4 { font-size: 13px; } .boca-mosaico-breves .volanta { height: 18px; } /* --- modulos: oro con foto + contorno con lista ------------------------ */ .boca-modulos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; } .boca-modulo-oro { background: var(--brand-fill); color: var(--on-brand); padding: 24px 26px; display: flex; gap: 22px; align-items: stretch; } .boca-modulo-oro .card { flex-grow: 1; min-width: 0; gap: 14px; } .boca-modulo-oro .card h3 { font-size: 25px; line-height: 1.25; } .boca-modulo-oro .volanta { border-color: var(--on-brand); color: var(--on-brand); } .boca-modulo-oro .deck, .boca-modulo-oro .meta, .boca-modulo-oro a { color: var(--on-brand); } .boca-modulo-oro .foto, .boca-modulo-oro .thumb { background: var(--paper); } .boca-modulo-oro .boca-foto-lateral { width: 190px; flex-shrink: 0; align-self: stretch; height: auto; } .boca-modulo-oro .boca-remate { display: flex; gap: 12px; align-items: flex-end; margin-top: auto; } .boca-modulo-oro .boca-remate .thumb { width: 110px; aspect-ratio: 110 / 74; } .boca-modulo-oro .boca-foto-apaisada { aspect-ratio: 3 / 1; margin-top: auto; } .boca-modulo-borde { border: 1px solid var(--line); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; } .boca-modulo-borde h3 { font-family: var(--serif); font-size: 23px; font-weight: 700; line-height: 1.25; } .boca-lista { display: flex; flex-direction: column; } .boca-lista p { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; padding: 12px 0; border-top: 1px solid var(--line); } .boca-lista p:last-child { padding-bottom: 0; } /* --- tarjetas con contorno (Popular, Ultimas del barrio) --------------- */ .boca-tarjeta { border: 1px solid var(--line); padding: 12px; } .boca-compacta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: flex-start; } .boca-compacta .thumb { width: 96px; aspect-ratio: 1; } .boca-compacta .card { gap: 7px; } .boca-compacta .card h4 { font-size: 14.5px; } .boca-compacta .volanta { height: 18px; } .boca-compacta--redonda { align-items: center; } .boca-compacta--redonda .thumb { width: 72px; border-radius: 50%; } .boca-compacta--redonda .card h4 { font-size: 14px; } .boca-populares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .boca-compactas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* --- barra separadora --------------------------------------------------- */ .boca-barra-sep { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 18px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-top: -16px; } /* --- el color de la semana (modulo fijo) ------------------------------- */ .boca-color { display: grid; grid-template-columns: 420px minmax(0, 1fr) 380px; gap: 24px; align-items: stretch; } .boca-muestra { min-height: 300px; background: var(--boca-pincel, var(--brand-fill)); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px; } .boca-muestra-etiqueta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .boca-color-cuerpo { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; } .boca-color-cuerpo h3 { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-wrap: pretty; } .boca-color-cuerpo .deck { font-size: 15px; line-height: 1.55; } .boca-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; } .boca-ficha dt { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .boca-ficha dd { margin: 0; } .boca-color-regla { border: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .boca-color-regla .boca-muestra-titular { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .boca-color-regla p { font-size: 13px; line-height: 1.5; } .boca-color-regla p + p { font-size: 12px; color: var(--muted); } .boca-anteriores { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; } .boca-anteriores-rotulo { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .boca-anteriores-rotulo::after { content: ""; flex-grow: 1; height: 1px; background: var(--line); } .boca-anteriores-grilla { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; } .boca-anteriores-grilla a { display: flex; flex-direction: column; gap: 7px; color: var(--ink); } .boca-swatch { display: block; height: 40px; background: var(--boca-swatch, var(--paper-soft)); } .boca-anteriores-grilla strong { font-family: var(--serif); font-size: 12.5px; font-weight: 700; line-height: 1.3; } /* --- trio de seccion: contorno · oro · contorno ------------------------ */ .boca-trio { display: flex; gap: 20px; align-items: stretch; } .boca-trio > * { flex: 1 1 0; min-width: 0; } .boca-trio > .boca-modulo-oro { flex-grow: 1.4; padding: 22px 24px; gap: 20px; } .boca-trio > .boca-modulo-oro .card { gap: 12px; } .boca-trio > .boca-modulo-oro .card h3 { font-size: 23px; } .boca-trio > .boca-modulo-oro .boca-foto-lateral { width: 170px; } .boca-trio > .boca-tarjeta { padding: 14px; } .boca-trio > .boca-tarjeta .card h3 { font-size: 18px; } .boca-trio > .boca-tarjeta:first-child .foto { aspect-ratio: 8 / 7; } .boca-trio > .boca-tarjeta:last-child .foto { aspect-ratio: 3 / 2; } /* --- cronica: foto grande + caja con contorno -------------------------- */ .boca-cronica { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .boca-cronica > .foto { aspect-ratio: 3 / 2; height: 100%; } .boca-cronica .boca-tarjeta { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .boca-cronica .boca-tarjeta h3 { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.2; } .boca-cronica .deck { font-size: 15px; } /* --- banner redondeado -------------------------------------------------- */ .boca-banner { background: var(--brand-fill); color: var(--on-brand); border-radius: 22px; padding: 52px 56px 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-top: 8px; } .boca-banner .boca-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .boca-banner h3 { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.1; } .boca-banner p { font-size: 15px; max-width: 520px; } .boca-boton { display: inline-flex; align-items: center; height: 44px; padding: 0 36px; margin-top: 10px; border-radius: 22px; background: var(--boca-negro); color: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* --- pie negro, a sangre ------------------------------------------------ */ .footer.boca-pie { margin: 4px calc(var(--margen) * -1) 0; padding: 40px var(--margen) 46px; background: var(--boca-negro); color: var(--boca-negro-texto); border-top: 0; align-items: flex-start; gap: 48px; } .boca-pie > div:first-child { display: flex; flex-direction: column; gap: 10px; max-width: 420px; } .boca-pie .nombre { font-family: var(--serif); font-size: 24px; } .boca-pie h4 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin: 0; } .boca-pie .contacto { font-size: 14px; line-height: 1.6; color: var(--boca-negro-suave); } .boca-pie-cols { display: flex; gap: 56px; flex-wrap: wrap; } .boca-pie .boca-pie-col, .boca-pie .red { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--boca-negro-suave); } .boca-pie .boca-pie-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); } /* 5.93:1 sobre el negro */ .boca-pie .red a, .boca-pie .boca-pie-col a { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--boca-negro-suave); } /* --- mobile ------------------------------------------------------------ */ @media (max-width: 1100px) { .boca-mosaico { grid-template-columns: minmax(0, 1fr); } .boca-mosaico-breves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .boca-mosaico-breves .card { padding: 0; border-top: 0; } .boca-modulos, .boca-cronica { grid-template-columns: minmax(0, 1fr); } .boca-populares, .boca-compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .boca-color { grid-template-columns: minmax(0, 1fr); } .boca-muestra { min-height: 220px; } .boca-anteriores-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .boca-trio { flex-direction: column; } /* la barra pasa a dos filas: nombre + utiles arriba, secciones en una sola fila que se desliza abajo */ .boca-barra { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; } .boca-barra .nameplate { grid-row: 1; grid-column: 1; } .boca-utiles { grid-row: 1; grid-column: 2; } .boca-barra .nav { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; } .boca-barra .nav a { height: 40px; white-space: nowrap; } } @media (max-width: 760px) { [data-portal="laboca"] .rotulo-fila { flex-wrap: wrap; gap: 10px 24px; } .boca-rotulo-portada .rotulo { font-size: 40px; } .boca-mosaico-lead h2 { font-size: 30px; } .boca-apoyo, .boca-mosaico-breves, .boca-populares, .boca-compactas { grid-template-columns: minmax(0, 1fr); } .boca-apoyo-foto { grid-template-columns: 108px minmax(0, 1fr); } .boca-modulo-oro { flex-direction: column; padding: 20px; } .boca-modulo-oro .boca-foto-lateral, .boca-trio > .boca-modulo-oro .boca-foto-lateral { width: 100%; aspect-ratio: 3 / 2; } .boca-modulo-borde { padding: 20px; } .boca-fecha { display: none; } .boca-barra-sep { height: auto; padding: 12px 20px; text-align: center; line-height: 1.4; } .boca-color-cuerpo h3 { font-size: 32px; } .boca-anteriores-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .boca-cronica .boca-tarjeta { padding: 20px; } .boca-cronica .boca-tarjeta h3 { font-size: 24px; } .boca-banner { padding: 36px 24px 32px; } .boca-banner h3 { font-size: 28px; } .boca-pie-cols { gap: 32px; } } /* ---------- 18. componentes propios de Barracas ------------------------ */ /* Tiempo de Barracas no comparte estructura con la base Deseret: su portada es un mosaico de 8 piezas, una seleccion a 3 columnas con reglas verticales, cajas para las ultimas, el dato del barrio calado en verde, la lista "Barracas al dia" y una fila de fotos verticales. Todo esto va con prefijo barracas-. Ningun color literal: el verde es var(--brand), el marron var(--brand-fill), el papel var(--paper), el blanco de las cajas var(--paper-soft). Los blancos con alpha sobre el verde salen de var(--on-brand) (#F3F3F1) con opacity, y estan calculados: on-brand @0.70 sobre #1F4D3A -> 5.16:1 (solo la etiqueta [EJEMPLO]) on-brand @0.75 sobre #1F4D3A -> 5.70:1 (volantas, horas, numeradores) on-brand @0.86 sobre #1F4D3A -> 6.90:1 (bajadas) on-brand pleno sobre #1F4D3A -> 8.67:1 (titulares, cifra) marron #A0522D sobre papel #F3F3F1 -> 5.05:1 · sobre blanco -> 5.62:1 verde #1F4D3A sobre blanco #FFFFFF -> 9.63:1 (texto del boton claro) muted #6E6961 sobre blanco #FFFFFF -> 5.45:1 (meta dentro de la caja) Las reglas y bordes sobre el verde van con color-mix (25 % y 40 %): no son texto, no tienen umbral. Pegar este bloque al final de skin.css, despues de la seccion 15. */ /* 16.1 ajustes de piel sobre clases que ya existen (scoped al portal) ---- */ /* el artboard separa las secciones a 56, no a 44 */ [data-portal="barracas"] { --gap-seccion: 56px; } [data-portal="barracas"] .masthead[data-align="center"] { padding-top: 22px; gap: 6px; } [data-portal="barracas"] .nameplate { font-size: 30px; letter-spacing: -0.01em; } [data-portal="barracas"] .ubicacion { letter-spacing: 0.22em; } [data-portal="barracas"] .nav { justify-content: center; } [data-portal="barracas"] .nav a[aria-current="page"] { color: var(--accent-text); } /* la volanta de Barracas es marron, no verde: 5.05:1 sobre el papel */ [data-portal="barracas"] .volanta { color: var(--brand-fill); font-size: 11px; letter-spacing: 0.16em; } [data-portal="barracas"] .rotulo-fila { gap: 40px; } [data-portal="barracas"] .sub-rotulo { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } [data-portal="barracas"] .sub-rotulo a { color: var(--accent-text); } [data-portal="barracas"] .deck { font-size: 13.5px; line-height: 1.55; } [data-portal="barracas"] .meta { font-size: 12px; line-height: 1.3; } /* las ultimas van en 3 cajas, no en 4 cards */ [data-portal="barracas"] .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } [data-portal="barracas"] .card h3 { font-size: 18px; line-height: 1.32; } /* los chips de filtro son cuadrados (r4), mayusculas, y el activo se cala */ [data-portal="barracas"] .chips { gap: 8px; } [data-portal="barracas"] .chip { border-radius: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; color: var(--ink); } [data-portal="barracas"] .chip[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); } /* 16.2 calado: cualquier caja verde ------------------------------------- */ /* El bloque verde REEMPLAZA una card dentro de la grilla; nunca se apila encima. Por eso es un modificador que se suma a la pieza, no un wrapper. */ .barracas-calada { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-bloque); padding: 14px 14px 18px; } .barracas-calada a { color: inherit; } .barracas-calada .volanta, .barracas-calada .meta { color: var(--on-brand); opacity: .75; } /* 5.70:1 */ .barracas-calada .deck { color: var(--on-brand); opacity: .86; } /* 6.90:1 */ .barracas-calada .foto, .barracas-calada .thumb { border-radius: 4px; } /* 16.3 boton -------------------------------------------------------------- */ .barracas-boton, .portada .barracas-boton { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 6px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; } .barracas-boton--claro, .portada .barracas-boton--claro { background: var(--on-brand); color: var(--brand); justify-content: center; min-height: 40px; border-radius: 4px; padding: 0 16px; } /* 16.4 "Lo principal": el mosaico de 8 piezas ----------------------------- */ /* 3 columnas 1.5fr / 1fr / 0.82fr (524 / 349 / 287 a 1200), gap 20. Cada columna es un flex vertical y su ultima pieza crece para emparejar las alturas. Si una columna entera no se imprime, el mosaico se recalcula a 2 o 1 columna (:has, envuelto en :where para que un navegador sin :has no descarte la regla). Si falta una pieza dentro de una columna, la de abajo se estira: la grilla no se rompe. */ .barracas-principal .rotulo-fila { justify-content: center; margin-bottom: 22px; } .barracas-principal .rotulo { font-size: 68px; letter-spacing: 0.02em; text-align: center; } .barracas-mosaico { display: grid; gap: 20px; align-items: stretch; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.82fr); } .barracas-mosaico:where(:has(> :nth-child(2):last-child)) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .barracas-mosaico:where(:has(> :only-child)) { grid-template-columns: minmax(0, 1fr); } .barracas-columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .barracas-columna > :last-child { flex-grow: 1; } .barracas-pieza { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .barracas-pieza--chica { gap: 10px; } .barracas-pieza h3 { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.35; text-wrap: pretty; } .barracas-pieza--hero h3 { font-size: 27px; line-height: 1.26; letter-spacing: -0.01em; } .barracas-pieza--media h3 { font-size: 17px; line-height: 1.32; } .barracas-pieza--informe h3 { font-size: 22px; line-height: 1.28; } .barracas-pieza .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .barracas-pieza .foto { object-fit: cover; aspect-ratio: auto; } .barracas-pieza--hero .foto { height: 300px; } .barracas-pieza--media .foto { height: 150px; } .barracas-pieza--chica .foto { height: 110px; } /* la pieza que cierra la columna crece con la columna, y su foto con ella */ .barracas-pieza--crece { flex-grow: 1; } .barracas-pieza--crece .foto { flex-grow: 1; height: auto; min-height: 96px; } .barracas-pieza--media.barracas-pieza--crece .foto { min-height: 190px; } /* el bloque verde horizontal: foto 200 a la izquierda + informe a la derecha */ .barracas-verde-doble { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 18px; align-items: stretch; } .barracas-verde-doble > :only-child { grid-column: 1 / -1; } .barracas-verde-doble .barracas-pieza .foto { flex-grow: 1; height: auto; min-height: 120px; } .barracas-verde-doble .barracas-pieza--foto { gap: 14px; } /* 16.5 "Seleccion de la redaccion": 3 columnas con reglas verticales ------ */ .barracas-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .barracas-paginador { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 14px; color: var(--accent-text); } .barracas-paginador nav { display: flex; gap: 6px; } /* la flecha es un boton calado cuando es un enlace y hueca cuando no hay pagina a donde ir (span). Sin JS: cada pagina es una URL. */ .barracas-flecha, .portada .barracas-flecha { width: 30px; height: 30px; border: 1px solid var(--brand); border-radius: 4px; display: grid; place-items: center; font-family: var(--sans); font-size: 14px; line-height: 1; color: var(--accent-text); } a.barracas-flecha, .portada a.barracas-flecha { background: var(--brand); color: var(--on-brand); } .barracas-seleccion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .barracas-seleccion > article { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; padding: 4px 28px; border-left: 1px solid var(--line); min-width: 0; } .barracas-seleccion > article:first-child { padding-left: 0; border-left: 0; } .barracas-seleccion > article:last-child { padding-right: 0; } .barracas-seleccion > article > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .barracas-seleccion .thumb { width: 104px; height: 104px; object-fit: cover; } .barracas-seleccion h3 { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.34; } /* 16.6 "Ultimas noticias": cajas + dos fotos grandes ---------------------- */ .barracas-ultimas { display: flex; flex-direction: column; gap: 18px; } .barracas-caja { background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-bloque); padding: 20px; gap: 12px; } .barracas-caja.barracas-calada { background: var(--brand); border-color: transparent; padding: 20px; } .barracas-caja .meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); } .barracas-caja.barracas-calada .meta { border-top-color: color-mix(in srgb, var(--on-brand) 25%, transparent); } .barracas-fotos-grandes { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; } .barracas-fotos-grandes > :only-child { grid-column: 1 / -1; } .barracas-fotos-grandes .foto { height: 380px; aspect-ratio: auto; object-fit: cover; } .barracas-fotos-grandes .card { gap: 12px; } /* 16.7 "El dato del barrio": el modulo fijo, calado ----------------------- */ .barracas-dato { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 320px; gap: 32px; padding: 28px 32px; align-items: stretch; } .barracas-dato > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .barracas-dato-cifra { font-family: var(--serif); font-size: 96px; font-weight: 700; line-height: .95; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; } .barracas-dato h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; text-wrap: pretty; } .barracas-dato > .barracas-dato-ficha { border-left: 1px solid color-mix(in srgb, var(--on-brand) 25%, transparent); padding-left: 32px; gap: 14px; } .barracas-dato-ficha > div { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; } .barracas-dato-ficha > div + div { border-top: 1px solid color-mix(in srgb, var(--on-brand) 25%, transparent); padding-top: 14px; } .barracas-dato-tendencia { display: flex; gap: 10px; align-items: flex-start; } .barracas-dato-tendencia .icono { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; background: var(--on-brand); color: var(--brand); display: grid; place-items: center; } .barracas-dato-tendencia[data-tendencia="baja"] .icono svg { transform: rotate(180deg); } .barracas-dato-tendencia[data-tendencia="igual"] .icono svg { display: none; } .barracas-dato > .barracas-dato-nota { border: 1px solid color-mix(in srgb, var(--on-brand) 40%, transparent); border-radius: 4px; padding: 18px 20px; gap: 10px; } .barracas-dato-nota h3 { font-size: 18px; line-height: 1.32; } .barracas-dato-nota .barracas-boton { margin-top: auto; } /* 16.8 "Barracas al dia": rotulo a la izquierda, lista numerada calada ---- */ /* la lista y la fila de fotos verticales comparten seccion, a 40 de gap */ .barracas-aldia-seccion { display: flex; flex-direction: column; gap: 40px; } .barracas-aldia { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 40px; align-items: start; } .barracas-aldia-intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .barracas-aldia-intro .rotulo { line-height: 1.05; } .barracas-aldia-intro p { font-size: 14px; line-height: 1.55; } .barracas-aldia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: aldia; } .barracas-aldia-lista li { counter-increment: aldia; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 42px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--brand); } .barracas-aldia-lista li::before { content: counter(aldia, decimal-leading-zero); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); } .barracas-aldia-lista h3 { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barracas-aldia-lista .meta { letter-spacing: 0.05em; white-space: nowrap; } /* la primera (la mas nueva) va calada */ .barracas-aldia-lista li:first-child { background: var(--brand); color: var(--on-brand); } .barracas-aldia-lista li:first-child::before, .barracas-aldia-lista li:first-child .meta { color: var(--on-brand); opacity: .75; } /* 16.9 fila de fotos verticales ------------------------------------------ */ .barracas-verticales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .barracas-verticales > article { display: flex; flex-direction: column; gap: 12px; padding: 0 24px; border-left: 1px solid var(--line); min-width: 0; } .barracas-verticales > article:first-child { padding-left: 0; border-left: 0; } .barracas-verticales > article:last-child { padding-right: 0; } .barracas-verticales header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); } .barracas-verticales header .meta { letter-spacing: 0.05em; } .barracas-verticales .foto { height: 330px; aspect-ratio: auto; object-fit: cover; } .barracas-verticales h3 { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.34; } /* 16.10 "Cultura / Agenda": card + bloque verde con lista + card ---------- */ .barracas-agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 0.9fr); gap: 18px; align-items: stretch; } .barracas-agenda > .barracas-pieza .foto { flex-grow: 1; height: auto; min-height: 210px; } .barracas-agenda-bloque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; padding: 18px; align-items: stretch; } .barracas-agenda-bloque > :only-child { grid-column: 1 / -1; } .barracas-agenda-bloque > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .barracas-agenda > article:first-child h3 { font-size: 18px; line-height: 1.32; } .barracas-agenda > article:last-child h3 { font-size: 16px; line-height: 1.34; } .barracas-agenda-bloque h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.3; text-wrap: pretty; } .barracas-agenda-bloque > .foto { min-height: 240px; height: 100%; aspect-ratio: auto; object-fit: cover; } .barracas-agenda-bloque .meta { margin-top: auto; } .barracas-agenda-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--on-brand); opacity: .86; } .barracas-agenda-lista b { font-weight: 700; } /* 16.11 mobile ------------------------------------------------------------ */ @media (max-width: 1100px) { /* el override de .cards de 16.1 pesa mas que el corte de la piel: se repite aca */ [data-portal="barracas"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .barracas-principal .rotulo { font-size: 40px; } .barracas-mosaico, .barracas-aldia, .barracas-agenda, .barracas-fotos-grandes, .barracas-dato, .barracas-seleccion, .barracas-verticales { grid-template-columns: minmax(0, 1fr); } .barracas-seleccion > article, .barracas-verticales > article { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); } .barracas-seleccion > article:first-child, .barracas-verticales > article:first-child { border-top: 0; padding-top: 0; } .barracas-dato > .barracas-dato-ficha { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--on-brand) 25%, transparent); padding-top: 20px; } } @media (max-width: 760px) { [data-portal="barracas"] { --gap-seccion: 32px; } [data-portal="barracas"] .cards { grid-template-columns: minmax(0, 1fr); } .barracas-verde-doble, .barracas-agenda-bloque { grid-template-columns: minmax(0, 1fr); } .barracas-verde-doble > .barracas-pieza--informe { order: -1; } .barracas-pieza--hero .foto { height: 220px; } .barracas-dato { padding: 22px 20px; } .barracas-dato-cifra { font-size: 68px; } .barracas-fotos-grandes .foto, .barracas-verticales .foto { height: 260px; } .barracas-aldia-lista li { grid-template-columns: 34px minmax(0, 1fr); padding: 10px 14px; row-gap: 4px; } .barracas-aldia-lista h3 { white-space: normal; } .barracas-aldia-lista .meta { grid-column: 2; } .barracas-paginador { width: 100%; justify-content: flex-end; } } /* ---------- 19. componentes propios de Lugano (sobre Kontrast) ---------- */ /* Lugano no es Deseret: es sans (Titillium Web), con topbar, barra de menu navy, subnav de barrios, destacada + cards 2-up y una barra lateral navy de 340px que lleva el modulo fijo "Obras prometidas". El tema Kontrast (AlxMedia, GPLv3) NO se copia: se respetan sus medidas y su gesto. Medidas del artboard (LuganoKontrast.dc.html), que hay que respetar: - contenedor 1380 centrado: topbar (padding 0 20), cabecera y pie (30). - pagina 1382 con box-sizing border-box y borde de 1px a cada lado, grilla minmax(0,1fr) + 340. Columna util = 1382 - 2 - 340 - 30 - 30 = 980, que es lo que miden la foto de la destacada y las dos cards (475 + 30 + 475). Si se toca cualquiera de estas medidas, recalcular. Todos los ratios anotados estan calculados (WCAG 2.1), no estimados. El .rotulo de Lugano (bloque calado navy) ya esta en la seccion 5 y no se rehace: aca solo se INVIERTE dentro de los bloques navy (barra y pie), que es lo que hace Kontrast con .dark .widget h3. */ [data-portal="lugano"] { /* Los cuatro colores que solo existen dentro de los bloques navy. El cian NUNCA va sobre papel blanco (2.68:1). */ --lugano-cian: #26ABD3; /* sobre --brand 4.62:1 · sobre navy-2 5.41:1 */ --lugano-muted-navy: #B8C4D6; /* sobre --brand 7.01:1 · sobre navy-2 8.21:1 */ --lugano-line-navy: #3A5580; /* regla sobre --brand: no es texto (1.64:1) */ --lugano-navy-2: #16294A; /* franja de la red e input: blanco encima 14.48:1 */ --lugano-ancho: 1380px; --lugano-barra: 340px; --lugano-pad: 30px; } /* La portada de Lugano es toda Titillium, no solo el nameplate. Se pisa --sans SOLO dentro de la portada para que .rotulo, .deck, .meta y el resto de la piel lo hereden sin tocar la nota ni los otros portales. */ [data-portal="lugano"] .lugano-portada { --sans: var(--nameplate-font); font-family: var(--sans); } /* contenedor de 1380: el .envoltorio de la piel mide 1200 + margen fluido, que es la medida Deseret; Lugano tiene la suya. */ .lugano-envoltorio { width: 100%; max-width: var(--lugano-ancho); margin: 0 auto; } /* --- topbar (Kontrast #wrap-nav-topbar): blanco, regla 1px, 14px ------- */ .lugano-topbar { border-bottom: 1px solid var(--line); background: var(--paper); } .lugano-topbar .lugano-envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 20px; min-height: 44px; font-size: 14px; color: var(--muted); line-height: 1; } .lugano-topbar nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .lugano-topbar a { color: var(--muted); } .lugano-topbar a.lugano-topbar-red { font-weight: 600; color: var(--accent-text); } .lugano-topbar-der { display: flex; align-items: center; gap: 18px; } a.lugano-icono, .lugano-icono { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; } .lugano-icono svg { width: 20px; height: 20px; } .lugano-topbar .lugano-icono { color: var(--ink); } /* --- cabecera (Kontrast: site-title 42/600 + descripcion italica 16, regla 4px) */ .lugano-cabecera { display: flex; flex-direction: column; gap: 4px; } .lugano-masthead { padding: 15px var(--lugano-pad); border-bottom: 4px solid var(--brand); display: flex; align-items: center; justify-content: space-between; gap: 32px; } .lugano-masthead-id { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; } /* el nameplate de la piel (60/700, serif) se pisa: Kontrast es 42/600 */ .lugano-masthead .nameplate { font-size: 42px; font-weight: 600; letter-spacing: -0.5px; line-height: 60px; padding: 10px 0; color: var(--ink); } /* la ubicacion de la piel (11.5 mayusculas) se pisa: Kontrast es 16 italica */ .lugano-masthead .ubicacion { font-size: 16px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; } .lugano-redes { display: flex; align-items: center; gap: 4px; } /* --- nav principal (Kontrast #nav-header): barra navy, 15/600 mayusculas, 48 de alto */ .lugano-nav { background: var(--brand); display: flex; align-items: stretch; padding: 0 10px; overflow-x: auto; } .lugano-nav a { display: flex; align-items: center; padding: 0 20px; min-height: 48px; flex-shrink: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-brand); line-height: 1; white-space: nowrap; } .lugano-nav a[aria-current="page"] { color: var(--lugano-cian); } /* 4.62:1 */ .lugano-nav .lugano-nav-fijo { margin-left: auto; } /* el modulo fijo, a la derecha */ /* --- subnav de barrios (Kontrast #nav-subheader): gris, 14/400 mayusculas, 40 de alto */ .lugano-subnav { background: var(--paper-soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 var(--lugano-pad); min-height: 40px; gap: 28px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; overflow-x: auto; } .lugano-subnav > * { flex-shrink: 0; white-space: nowrap; } .lugano-subnav a { color: var(--ink); } /* 15.74:1 sobre paper-soft */ .lugano-subnav .lugano-subnav-etiqueta { color: var(--muted); } /* 4.92:1 sobre paper-soft */ /* --- pagina: contenido + barra lateral (Kontrast col-2cl con .s1 oscura) */ .lugano-pagina { width: 100%; max-width: calc(var(--lugano-ancho) + 2px); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) var(--lugano-barra); align-items: stretch; } .lugano-contenido { padding: var(--lugano-pad) var(--lugano-pad) 20px; display: flex; flex-direction: column; min-width: 0; } /* page-title (Kontrast: 16/600 mayusculas + span gris) */ .lugano-titulo-pagina { padding: 0 0 18px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 24px; color: var(--ink); } .lugano-titulo-pagina span { color: var(--muted); font-weight: 400; } /* meta de nota (Kontrast .post-meta): 14 mayusculas, seccion en navy, fecha gris */ .lugano-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; color: var(--muted); } .lugano-meta .volanta { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; } /* foto con insignias (Kontrast .post-thumbnail): estrella de destacada y contador de comentarios */ .lugano-foto { position: relative; } .lugano-foto .foto { width: 100%; height: auto; object-fit: cover; } .lugano-insignia { position: absolute; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; } .lugano-insignia svg { fill: currentColor; } .lugano-insignia--estrella { left: 20px; bottom: 20px; width: 32px; height: 32px; } .lugano-insignia--estrella svg { width: 16px; height: 16px; } .lugano-insignia--comentarios { right: 0; bottom: 0; font-size: 12px; font-weight: 600; line-height: 20px; padding: 2px 8px; } .lugano-insignia--comentarios svg { width: 12px; height: 12px; } /* destacada (Kontrast .featured): foto 980x500, meta, titulo 34/400, copete gris. Regla 1px abajo */ .lugano-destacada { display: flex; flex-direction: column; gap: 16px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); } .lugano-destacada .foto { aspect-ratio: 980 / 500; } .lugano-destacada h2 { font-size: 34px; font-weight: 400; letter-spacing: -0.7px; line-height: 1.4; color: var(--ink); text-wrap: pretty; } /* el .deck de la piel (16/1.5 tinta) en Lugano va gris y mas abierto */ .lugano-contenido .deck { line-height: 1.6; color: var(--muted); } /* grilla (Kontrast .post-list): filas de dos cards de 475, gutter 30, regla 1px entre filas. Cada fila es un .cards para que la regla cruce el gutter de corrido. */ .lugano-grilla { display: flex; flex-direction: column; } .lugano-grilla .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); } .lugano-grilla .cards:last-child { border-bottom: 0; margin-bottom: 10px; } .lugano-grilla .card { gap: 12px; } .lugano-grilla .card .foto { aspect-ratio: 475 / 268; } /* el h3 de card de la piel (serif 17/700) se pisa: Kontrast es 22/400 */ .lugano-grilla .card h3 { font-family: var(--sans); font-size: 22px; font-weight: 400; line-height: 1.5; color: var(--ink); text-wrap: pretty; } /* paginacion: bloque macizo de 44, esquinas vivas, regla 2px navy arriba */ .lugano-paginacion { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 2px solid var(--brand); padding-top: 16px; } /* a.lugano-boton y no .lugano-boton: .portada a (0,1,1) pintaria el texto de navy */ a.lugano-boton, .lugano-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .lugano-paginacion > span { font-size: 14px; color: var(--muted); line-height: 1; } /* --- barra lateral navy (Kontrast .s1 dark). Es el UNICO lugar donde vive el cian. */ .lugano-barra { background: var(--brand); color: var(--lugano-muted-navy); display: flex; flex-direction: column; } .lugano-barra a { color: inherit; } .lugano-widget { padding: 10px var(--lugano-pad) 20px; } .lugano-widget:first-child { padding-top: var(--lugano-pad); } .lugano-widget:last-child { padding-bottom: var(--lugano-pad); } .lugano-widget .rotulo-fila { margin-top: 0; gap: 10px; } .lugano-widget h3 { font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--on-brand); text-wrap: pretty; } .lugano-widget strong { font-weight: 600; color: var(--on-brand); } .lugano-widget .lugano-texto { font-size: 13px; line-height: 1.5; padding: 4px 0 2px; } .lugano-widget .lugano-texto--grande { font-size: 15px; padding: 8px 0 4px; } /* el rotulo invertido: bloque blanco con texto navy sobre regla blanca (Kontrast .dark .widget h3) */ .lugano-invertido .rotulo-fila { border-color: var(--on-brand); } .lugano-invertido .rotulo { background: var(--on-brand); color: var(--brand); white-space: nowrap; } /* 12.36:1 */ .lugano-invertido .sub-rotulo { color: var(--lugano-muted-navy); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; padding-bottom: 6px; } /* las filas de la piel dentro del navy: regla navy-line y sin tinta */ .lugano-barra .fila { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--lugano-line-navy); } .lugano-barra .fila:first-child { border-top: 0; } .lugano-barra .fila .thumb { width: 80px; height: 60px; } .lugano-barra .fila h3 { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 0; } .lugano-barra .fila .meta { margin-top: 0; color: var(--lugano-muted-navy); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .lugano-barra .fila > div { display: flex; flex-direction: column; gap: 3px; } .lugano-barra .fila .volanta { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--lugano-cian); } /* 4.62:1 */ /* obras prometidas: el modulo fijo. Nombre 18/400 blanco, plazos 13, estado como pill cian */ .lugano-obras { display: flex; flex-direction: column; } .lugano-obra { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--lugano-line-navy); } .lugano-obra h3 { font-size: 18px; } .lugano-obra .lugano-plazos { font-size: 13px; line-height: 1.4; } .lugano-estado { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--lugano-cian); border: 1px solid var(--lugano-cian); padding: 5px 8px 4px; white-space: nowrap; } .lugano-estado--terminada { background: var(--lugano-cian); color: var(--ink); } /* 6.37:1 */ .lugano-obras-cuenta { font-size: 13px; line-height: 1.5; padding-top: 10px; } .lugano-obras-cuenta a { font-weight: 600; color: var(--lugano-cian); } /* agenda: la fecha como bloque blanco de 56, esquinas vivas */ .lugano-barra .fila--agenda { grid-template-columns: 56px minmax(0, 1fr); } .lugano-fecha { width: 56px; height: 56px; background: var(--on-brand); color: var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .lugano-fecha .dia { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .lugano-fecha .numero { font-size: 24px; font-weight: 600; } .lugano-barra .fila--agenda .meta { text-transform: none; letter-spacing: 0; line-height: 1.4; } /* newsletter: input oscuro, boton como bloque blanco */ .lugano-form { display: flex; flex-direction: column; gap: 8px; } .lugano-form input { min-height: 44px; border: 1px solid var(--lugano-line-navy); background: var(--lugano-navy-2); color: var(--on-brand); padding: 0 12px; font: inherit; font-size: 15px; border-radius: 0; width: 100%; } .lugano-form input::placeholder { color: var(--lugano-muted-navy); opacity: 1; } /* 8.21:1 */ .lugano-form button { min-height: 44px; border: 0; background: var(--on-brand); color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; cursor: pointer; border-radius: 0; } /* --- pie (Kontrast #footer): navy, tres columnas de widgets, franja de la red, copyright */ .lugano-footer { border-top: 0; margin-top: 0; padding: 0; display: block; background: var(--brand); color: var(--lugano-muted-navy); } .lugano-footer a { color: inherit; } .lugano-footer-cols { padding: 40px var(--lugano-pad) 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } .lugano-footer-cols .seccion { gap: 8px; } .lugano-footer-cols .rotulo-fila { margin-top: 0; } .lugano-footer-cols p { font-size: 15px; line-height: 1.5; padding-top: 6px; } .lugano-footer-secciones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding-top: 6px; font-size: 15px; line-height: 1.8; } .lugano-footer-secciones a { color: var(--on-brand); } .lugano-footer-secciones a.lugano-nav-fijo { color: var(--lugano-cian); font-weight: 600; } .lugano-footer-contacto { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; font-size: 15px; line-height: 1.6; } .lugano-footer-contacto a, .lugano-footer strong { color: var(--on-brand); font-weight: 400; } /* franja de la red (Kontrast #wrap-nav-footer): centrada, 14 mayusculas, sobre navy-2 */ .lugano-red { background: var(--lugano-navy-2); } .lugano-red .red { justify-content: center; gap: 8px; padding: 0 var(--lugano-pad); } .lugano-red .red a, .lugano-red .red span { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-brand); line-height: 1; } /* 14.48:1 */ .lugano-red .red span { font-weight: 400; color: var(--lugano-muted-navy); } /* 8.21:1 */ /* footer-bottom: pestana "volver arriba" 60x30 centrada + copyright 15 */ .lugano-footer-pie { display: flex; flex-direction: column; align-items: center; } .lugano-footer a.lugano-arriba { width: 60px; height: 30px; background: var(--lugano-navy-2); color: var(--on-brand); display: flex; align-items: center; justify-content: center; } .lugano-arriba svg { width: 16px; height: 16px; } .lugano-copyright { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px var(--lugano-pad) 30px; font-size: 15px; line-height: 1.5; } .lugano-copyright nav { display: flex; gap: 20px; flex-wrap: wrap; } .lugano-copyright nav a { color: var(--on-brand); } /* --- responsive. Entre 761 y 1100 no hay artboard: la barra baja debajo del contenido. */ @media (max-width: 1100px) { .lugano-pagina { grid-template-columns: minmax(0, 1fr); border-left: 0; border-right: 0; } .lugano-footer-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; } } /* 390 sigue LuganoKontrastMobile.dc.html: sin topbar, nombre centrado, nav desplazable, una columna con cards a ancho completo, margen 16. */ @media (max-width: 760px) { .lugano-topbar { display: none; } .lugano-masthead { padding: 8px 16px 6px; justify-content: center; } .lugano-masthead-id { flex-direction: column; align-items: center; gap: 2px; } .lugano-masthead .nameplate { font-size: 28px; line-height: 1.1; padding: 0; } .lugano-masthead .ubicacion { font-size: 12px; } .lugano-redes { display: none; } .lugano-nav { padding: 0 6px; } .lugano-nav a { padding: 0 12px; min-height: 44px; font-size: 14px; } .lugano-nav .lugano-nav-fijo { margin-left: 0; } .lugano-subnav { padding: 0 16px; gap: 20px; } .lugano-contenido { padding: 20px 16px 0; } .lugano-titulo-pagina { font-size: 14px; line-height: 1.4; padding-bottom: 14px; } .lugano-destacada { gap: 10px; padding-bottom: 22px; margin-bottom: 22px; } .lugano-destacada h2 { font-size: 26px; line-height: 1.3; } .lugano-grilla .cards { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 22px; margin-bottom: 22px; } .lugano-grilla .card h3 { font-size: 20px; } .lugano-widget { padding-left: 16px; padding-right: 16px; } .lugano-footer-cols, .lugano-copyright { padding-left: 16px; padding-right: 16px; } .lugano-red .red { padding: 8px 16px; } } /* ---------- 20. dentro de la nota: lo que el cuerpo trae de verdad ----- */ /* Un embed de YouTube o Instagram pegado en el cuerpo desborda la medida de lectura si no se contempla. Se rompe la medida a proposito y se centra. */ .nota-cuerpo :is(iframe, video, .embed) { display: block; width: 100%; border: 0; border-radius: var(--radius-foto); } .nota-cuerpo .embed { position: relative; aspect-ratio: 16 / 9; background: var(--paper-soft); } .nota-cuerpo .embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .nota-cuerpo .embed--vertical { aspect-ratio: 9 / 16; max-width: 400px; margin-inline: auto; } .nota-cuerpo .embed--mapa { aspect-ratio: 4 / 3; } /* Una foto o una tabla pueden salirse de la medida; el texto no. */ /* El sangrado no puede ser fijo: a 390 de ancho dejaba el borde fuera. */ .nota-cuerpo :is(figure, .ancho) { margin: 4px 0; --sangra: min(40px, var(--margen)); width: calc(100% + var(--sangra) * 2); max-width: 100vw; margin-inline: calc(var(--sangra) * -1); } .nota-cuerpo figure img { width: 100%; border-radius: var(--radius-foto); } .nota-cuerpo figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; padding-inline: var(--sangra, 40px); } .nota-cuerpo table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; } .nota-cuerpo :is(th, td) { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); } .nota-cuerpo th { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .tabla-scroll { overflow-x: auto; } /* Galeria: una feria, un mural, un acto escolar. Es el formato natural. */ .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 4px 0; --sangra: min(40px, var(--margen)); width: calc(100% + var(--sangra) * 2); margin-inline: calc(var(--sangra) * -1); } .galeria figure { margin: 0; width: auto; } .galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius-foto); } .galeria figcaption { padding-inline: 0; font-size: 12px; } /* Fe de erratas. Barata de hacer y es lo que separa a un medio serio. */ .correccion { border-left: 3px solid var(--brand); background: var(--paper-soft); padding: 14px 18px; font-size: 14.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; } .correccion .rotulo { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); } /* ---------- 21. accesibilidad ----------------------------------------- */ .saltar { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 16px; font-size: 14px; font-weight: 600; } .saltar:focus { left: 8px; top: 8px; } /* Anillo doble: el interior claro y el exterior oscuro, asi se ve sobre cualquier fondo. Con un solo color fallaba donde --accent-text coincide con --brand (Lugano y Barracas: 1.00:1 sobre sus propios bloques). */ :is(a, button, input, [tabindex]):focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; box-shadow: 0 0 0 5px #1C1C1C; border-radius: 2px; position: relative; z-index: 3; } /* Las barras con scroll horizontal recortaban el anillo. */ :is(.nav, .chips, .lugano-nav, .lugano-subnav, .barracas-chips):has(:focus-visible) { overflow: visible; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 22. modo oscuro -------------------------------------------- */ /* Se respeta la preferencia del sistema. Los rellenos de marca no cambian: el gesto sigue siendo el mismo, cambia el papel. Todos los ratios de abajo estan calculados, no estimados. */ @media (prefers-color-scheme: dark) { [data-portal="hub"] { --paper:#121316; --paper-soft:#1B1D21; --ink:#E9EAEC; --muted:#9AA0A8; --line:#2A2C31; --accent-text:#6FA0FF; --foto:#23252A; } [data-portal="laboca"] { --paper:#17130C; --paper-soft:#221C13; --ink:#EFE6D4; --muted:#A79C87; --line:#302A20; --accent-text:#E8B23A; --foto:#2A2318; } [data-portal="barracas"] { --paper:#101512; --paper-soft:#1A201C; --ink:#E6E9E6; --muted:#94A099; --line:#232A26; --accent-text:#5FBF95; --foto:#1E2521; } [data-portal="liniers"] { --paper:#16140E; --paper-soft:#201D15; --ink:#F2EDE0; --muted:#A69C86; --line:#2B271D; --accent-text:#FFC629; --foto:#26221A; } [data-portal="lugano"] { --paper:#0E141F; --paper-soft:#161E2B; --ink:#E6EAF2; --muted:#98A4B8; --line:#1E2838; --accent-text:#26ABD3; --foto:#1A2231; } [data-portal="mataderos"] { --paper:#151211; --paper-soft:#1F1B19; --ink:#EDEAE7; --muted:#9C948F; --line:#292321; --accent-text:#E38A7C; --foto:#241F1D; } /* la regla del masthead y del pie eran tinta plena: en oscuro se apaga */ .masthead-rule, .footer, .rotulo-fila { border-color: var(--ink); } /* el trazo de marcador lleva la tinta encima: en oscuro la tinta es clara y dejaria de leerse, asi que el texto del rotulo vuelve a oscuro */ .rotulo::before ~ span, .rotulo > span { color: #1C1C1C; } [data-portal="hub"] .rotulo > span, [data-portal="barracas"] .rotulo > span, [data-portal="lugano"] .rotulo > span { color: inherit; } /* Los tags de barrio son pares fondo/texto fijos: en papel oscuro habria que leer tinta oscura sobre un pastel claro, asi que se invierten. */ .tag-barrio[data-barrio="laboca"] { background:#331F14; color:#F0A878; } /* 7.85:1 */ .tag-barrio[data-barrio="barracas"] { background:#1B2A22; color:#8FC9AC; } /* 7.94:1 */ .tag-barrio[data-barrio="liniers"] { background:#332D14; color:#EFD79A; } /* 9.73:1 */ .tag-barrio[data-barrio="lugano"] { background:#1B2432; color:#A9C2E8; } /* 8.60:1 */ .tag-barrio[data-barrio="mataderos"] { background:#31201F; color:#EFA7A7; } /* 7.93:1 */ .tag-barrio[data-barrio="hub"] { background:#24262B; color:#E9EAEC; } /* 12.58:1 */ /* la caja del icono dentro del chip es papel: en oscuro el papel es el fondo, asi que se levanta un escalon para que el chip siga leyendose */ .chip .ico-caja { background: #24262B; } .chip:hover { background: #24262B; } /* el azul de relleno pierde peso sobre papel oscuro: se aclara y el texto del chip activo pasa a tinta */ [data-portal="hub"] .chip[aria-pressed="true"], [data-portal="hub"] .chip[aria-pressed="true"]:hover { background:#6EA8FF; color:#121316; } /* 7.70:1 */ [data-portal="hub"] .pill-leer, .card-media:hover .pill-leer { background:#6EA8FF; color:#121316; } } /* ---------- 23. autor, buscador e institucionales ---------------------- */ .autor-ficha { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 4px 0 6px; } .autor-foto { border-radius: 999px; display: block; object-fit: cover; background: var(--foto); } .autor-rol { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); } .autor-contacto { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; } .autor-contacto a { color: var(--accent-text); } .buscador { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 0 6px; } .buscador input { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-bloque); background: var(--paper-soft); color: var(--ink); } .buscador input::placeholder { color: var(--muted); } .buscador button { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 22px; cursor: pointer; border: 0; border-radius: var(--radius-bloque); background: var(--brand); color: var(--on-brand); } .buscador-cuenta { padding: 10px 0 4px; } .inst-rotulo { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.25; margin-top: 32px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 18px; } .equipo-persona { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; } .equipo-nombre { font-family: var(--serif); font-size: 16px; font-weight: 700; } @media (max-width: 760px) { .autor-ficha { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } .inst-rotulo { font-size: 21px; } } /* El titular de una fila dentro de un listado es h2, no h3: en /seccion y /buscar el h1 es el rotulo y las filas son sus hijas directas. Hereda el cuerpo de .fila h3 para que no cambie nada visual. */ .fila .titulo-fila { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; text-wrap: pretty; margin: 0; } .fila--media .titulo-fila { font-size: 17px; } .fila--suelta .titulo-fila { font-size: 18px; }