.article-content{ max-width: 100% !important; padding: 0px !important; } /* ============================================================ VerdadesJEP — estilos.css Directorio: https://www.jep.gov.co/VerdadesJEP/css/ ============================================================ */ /* ── Variables y reset ── */ #jep-vd, #jep-vd *::before, #jep-vd *::after { box-sizing: border-box; margin: 0; padding: 0; } #jep-vd { --navy: #304a6f; --amber: #ffaf5a; --violet: #b374e6; --mint: #7ee8a2; --navy-dk: #223350; --navy-lt: #4a6a94; --amber-lt: #fff6e8; --violet-lt: #f5eeff; --mint-lt: #eafff3; --bg: #f2ede4; --bg2: #e8e2d8; --white: #ffffff; --text: #1e2e42; --muted: #6b7f94; --border: #ddd8ce; --ff: 'Fira Sans', sans-serif; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; } /* ── Bloque raíz ── */ #jep-vd { font-family: var(--ff); color: var(--text); line-height: 1.6; scroll-behavior: smooth; position: relative; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; } /* ── Fondo aplicado directamente al #jep-vd y a los contenedores de SharePoint que lo envuelven ── */ #jep-vd { background: url(https://www.jep.gov.co/VerdadesJEP/Imagenes/Background-light.png) #f2ede4 0% 0% / 450px 450px repeat !important; } /* ── Full-bleed en elementos individuales ── left:50% + margin-left:-50vw funciona sin JS y sin tocar ancestros */ #jep-vd .hero, #jep-vd .footer-hero, #jep-vd .inst-footer, #jep-vd .inst-header { position: relative; width: 100vw; left: 50%; margin-left: -50vw; box-sizing: border-box; } /* overflow:hidden solo en los que tienen ilustraciones absolutas */ #jep-vd .hero, #jep-vd .footer-hero { overflow: hidden; } /* ══════════════════════════════════════════════════════════ MODO EDICIÓN SHAREPOINT — anular full-bleed para que el editor sea accesible y los elementos no tapen la UI de SP. SP clásico agrega ms-edit-mode o ms-EditMode al . ══════════════════════════════════════════════════════════ */ .ms-edit-mode #jep-vd .hero, .ms-edit-mode #jep-vd .footer-hero, .ms-edit-mode #jep-vd .inst-footer, .ms-edit-mode #jep-vd .inst-header, .ms-EditMode #jep-vd .hero, .ms-EditMode #jep-vd .footer-hero, .ms-EditMode #jep-vd .inst-footer, .ms-EditMode #jep-vd .inst-header { width: 100% !important; left: auto !important; margin-left: 0 !important; position: relative !important; } /* ── Reset de listas y textos (aislamiento SharePoint) ── */ #jep-vd ul, #jep-vd ol { list-style: none !important; margin: 0 !important; padding: 0 !important; } #jep-vd li { list-style: none !important; background-image: none !important; margin: 0 !important; padding: 0 !important; } #jep-vd li::before { display: none !important; content: none !important; } #jep-vd a { text-decoration: none; } #jep-vd p { margin: 0; padding: 0; } #jep-vd img { max-width: 100%; } /* ── HEADER institucional ── */ #jep-vd .inst-header { position: relative; background: var(--navy); padding: 10px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #jep-vd .inst-logo { display: flex; align-items: center; gap: 10px; } #jep-vd .inst-logo-badge { background: var(--amber); border-radius: 6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--navy); flex-shrink: 0; } #jep-vd .inst-logo-text { color: white; font-size: 11px; font-weight: 300; line-height: 1.4; } #jep-vd .inst-logo-text strong { display: block; font-size: 13px; font-weight: 600; } #jep-vd .inst-nav { display: flex; gap: 18px; flex-wrap: wrap; } #jep-vd .inst-nav a { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 400; transition: color .2s; } #jep-vd .inst-nav a:hover { color: white; } #jep-vd .inst-nav a.active { color: var(--amber); font-weight: 600; } /* ── HERO ── */ #jep-vd .hero { background: var(--navy); min-height: 400px; display: flex; align-items: stretch; margin-top: 0; } #jep-vd .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } #jep-vd .hero-wave-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; line-height: 0; } #jep-vd .hero-wave-bottom svg { width: 100%; height: auto; display: block; } #jep-vd .hero-ilu-left { position: absolute; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none; } #jep-vd .hero-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 48px 32px 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; width: 100%; } #jep-vd .hero-left { display: flex; flex-direction: column; gap: 16px; } #jep-vd .hero-hashtag { font-size: clamp(38px, 5vw, 60px); font-weight: 800; line-height: 1.05; } #jep-vd .hero-desc { font-size: 20px; color: var(--navy); line-height: 1.7; max-width: 600px; } #jep-vd .hero-desc strong { font-weight: 600; color: var(--navy); } #jep-vd .hero-right { display: flex; justify-content: flex-end; position: relative; z-index: 3; } #jep-vd .hero-post-card { background: var(--bg); border-radius: var(--r-lg); overflow: hidden; width: 100%; max-width: 340px; box-shadow: 0 8px 40px rgba(0,0,0,.35); } #jep-vd .hero-post-meta { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: white; } #jep-vd .hero-post-info { display: flex; align-items: center; gap: 8px; } #jep-vd .meta-text .plat { font-size: 12px; font-weight: 600; color: var(--text); } #jep-vd .meta-text .time { font-size: 11px; color: var(--muted); } /* ── Pills ── */ #jep-vd .pill { height: 22px; padding: 0 7px; border-radius: 5px; font-size: 10px; font-weight: 700; color: white; display: inline-flex; align-items: center; } #jep-vd .pill-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } #jep-vd .pill-tt { background: #010101; } #jep-vd .pill-fb { background: #1877f2; } #jep-vd .pill-yt { background: #ff0000; } #jep-vd .pill-x { background: #14171a; } /* ── Botones ── */ #jep-vd .btn { display: inline-block; padding: 8px 20px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: var(--ff); cursor: pointer; border: none; transition: all .2s; text-decoration: none; white-space: nowrap; } #jep-vd .btn-sm { padding: 5px 14px; font-size: 12px; } #jep-vd .btn-navy { background: var(--navy); color: white; } #jep-vd .btn-navy:hover { background: var(--navy-dk); } #jep-vd .btn-amber { background: var(--amber); color: var(--navy); } #jep-vd .btn-amber:hover { opacity: .88; } #jep-vd .btn-violet { background: var(--violet); color: white; } #jep-vd .btn-violet:hover { opacity: .88; } #jep-vd .btn-mint { background: var(--mint); color: var(--navy); } #jep-vd .btn-mint:hover { opacity: .88; } #jep-vd .btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--muted); } #jep-vd .btn-outline:hover { border-color: var(--navy); color: var(--navy); } /* ── Contenido principal ── */ #jep-vd .main { max-width: 1100px; margin: 0 auto; padding: 0 24px 40px; } #jep-vd .sec-block { border-radius: var(--r-lg); margin-top: 28px; padding: 28px 28px 32px; } #jep-vd .sec-block-amber { background: var(--amber-lt); border-top: 3px solid var(--amber); } #jep-vd .sec-block-violet { background: var(--violet-lt); border-top: 3px solid var(--violet); position: relative; z-index: 3; } #jep-vd .sec-block-mint { background: var(--mint-lt); border-top: 3px solid var(--mint); } #jep-vd .sec-block-navy { background: #e6ecf4; border-top: 3px solid var(--navy); } /* ── Cabecera de sección ── */ #jep-vd .section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } #jep-vd .section-line { flex: 1; height: 1px; background: var(--border); } #jep-vd .section-title { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy); white-space: nowrap; } #jep-vd .section-desc { font-size: 16px; text-align: center; color: var(--navy); line-height: 1.7; max-width: 100%; } #jep-vd .section-desc strong { font-weight: 600; color:var(--navy); } #jep-vd .section-description{ align-items: center; margin-bottom: 40px; } /* ── Filtros ── */ #jep-vd .filter-bar { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px; margin-bottom: 22px; } #jep-vd .f-btn { display: inline-block !important; width: auto !important; flex: 0 0 auto !important; padding: 7px 18px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 500 !important; font-family: var(--ff) !important; cursor: pointer !important; border: 1.5px solid var(--border) !important; background: transparent !important; color: var(--muted) !important; transition: all .2s; line-height: normal !important; white-space: nowrap !important; text-align: center !important; box-sizing: border-box !important; } #jep-vd .f-btn.active { background: var(--navy) !important; color: white !important; border-color: var(--navy) !important; } #jep-vd .f-btn:hover:not(.active) { border-color: var(--navy) !important; color: var(--navy) !important; background: rgba(48,74,111,.06) !important; } /* ── Carrusel ── */ #jep-vd .carousel-wrap { overflow: hidden; } #jep-vd .carousel-track { display: flex; gap: 16px; transition: transform .4s cubic-bezier(.25,.46,.45,.94); will-change: transform; } #jep-vd .carousel-track .card { flex: 0 0 calc(33.333% - 11px); min-width: 0; } #jep-vd .carousel-nav { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; } #jep-vd .c-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50%; border: 1.5px solid #ddd8ce; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; font-size: 16px; color: #304a6f; padding: 0; margin: 0; line-height: 1; flex-shrink: 0; } #jep-vd .c-btn:hover { background: #304a6f; color: white; border-color: #304a6f; } #jep-vd .c-btn:disabled { opacity: .3; cursor: default; } #jep-vd .c-dots { display: flex; flex-direction: row; align-items: center; flex: 1; gap: 6px; list-style: none; margin: 0; padding: 0; } #jep-vd .c-dot { width: 8px; height: 8px; min-width: 8px; min-height: 8px; border-radius: 50%; background: #ddd8ce; cursor: pointer; transition: all .2s; border: none; padding: 0; margin: 0; display: inline-block; flex-shrink: 0; } #jep-vd .c-dot.active { background: #304a6f; width: 20px; min-width: 20px; border-radius: 4px; } /* ── Cards ── */ #jep-vd .card { background: white; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; } #jep-vd .card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(48,74,111,.12); } #jep-vd .card-ig-top, #jep-vd .card-video-top { overflow: hidden; background: #f8f4ef; flex: 1; } #jep-vd .card-ig-top blockquote.instagram-media, #jep-vd .card-video-top blockquote.instagram-media { margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; } /* Ocultar comentarios del embed de Instagram */ #jep-vd .card-ig-top iframe, #jep-vd .card-video-top iframe, #jep-vd .feat-ig-top iframe { margin-bottom: -160px !important; display: block !important; } #jep-vd .card-footer { padding: 10px 14px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #f0ede6; flex-shrink: 0; } #jep-vd .card-footer-meta { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } #jep-vd .card-footer-text .platform { font-size: 12px; font-weight: 600; color: var(--text); } #jep-vd .card-footer-text .timestamp { font-size: 11px; color: var(--muted); } /* ── Featured grid ── */ #jep-vd .featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; } #jep-vd .featured-card { background: white; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; } #jep-vd .feat-ig-top { overflow: hidden; background: #f8f4ef; } #jep-vd .feat-ig-top blockquote.instagram-media { margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; } #jep-vd .feat-footer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #f0ede6; } #jep-vd .feat-meta { display: flex; align-items: center; gap: 8px; } #jep-vd .feat-meta .meta-text .plat { font-size: 12px; font-weight: 600; color: var(--text); } #jep-vd .feat-meta .meta-text .time { font-size: 11px; color: var(--muted); } /* ── Footer decorativo ── */ #jep-vd .footer-hero { height: 300px; margin-top: -148px; margin-bottom: -232px; z-index: 0; } #jep-vd .footer-hero-wave { position: absolute; bottom: 0; left: 0; right: 0; line-height: 0; } #jep-vd .footer-hero-wave svg { width: 100%; display: block; } #jep-vd .footer-hero-ilu-right { position: absolute; right: -1%; bottom: 30px; height: 88%; pointer-events: none; } #jep-vd .footer-hero-ilu-left { position: absolute; left: -20px; bottom: -30px; height: 82%; pointer-events: none; } /* ── Footer institucional ── */ #jep-vd .inst-footer { background: var(--navy-dk); color: white; padding: 40px 32px 20px; } #jep-vd .footer-inner { max-width: 1100px; margin: 0 auto; } #jep-vd .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } #jep-vd .footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; } #jep-vd .footer-col p, #jep-vd .footer-col address { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.7; font-style: normal; } #jep-vd .footer-col a { color: rgba(255,255,255,.65); font-size: 12px; display: block; line-height: 2; transition: color .2s; } #jep-vd .footer-col a:hover { color: white; } #jep-vd .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } #jep-vd .footer-bottom p { font-size: 11px; color: rgba(255,255,255,.35); } #jep-vd .footer-social { display: flex; gap: 8px; } #jep-vd .soc-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; transition: all .2s; text-decoration: none; } #jep-vd .soc-icon:hover { background: var(--amber); color: var(--navy); } /* ── Placeholders de Instagram ── */ #jep-vd .ig-ph { padding: 12px; } #jep-vd .ig-ph-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } #jep-vd .ig-ph-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #jep-vd .ig-ph-name { font-size: 12px; font-weight: 600; color: #304a6f; font-family: 'Fira Sans', sans-serif; } #jep-vd .ig-ph-img { background: #f0ede6; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; display: flex; align-items: center; justify-content: center; } #jep-vd .ig-ph-img-video { background: #304a6f; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-radius: 4px; position: relative; } #jep-vd .ig-ph-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(70,145,178,.6), rgba(48,74,111,.8)); border-radius: 4px; } #jep-vd .ig-ph-play { width: 40px; height: 40px; background: rgba(255,255,255,.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } #jep-vd .ig-ph-play::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 13px; border-color: transparent transparent transparent #304a6f; margin-left: 3px; } /* ── Etiquetas de categoría ── */ #jep-vd .card-label { display: inline-block; padding: 5px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; font-family: var(--ff); white-space: nowrap; letter-spacing: .2px; } #jep-vd .card-label-justicia { background: linear-gradient(90deg, #ffaf5a, #ff8c42); color: white; } #jep-vd .card-label-resultados { background: linear-gradient(90deg, #e8622a, #c94a1a); color: white; } #jep-vd .card-label-reconciliacion{ background: linear-gradient(90deg, #c94080, #a02060); color: white; } /* ── Neutralizar contenedores conocidos de SharePoint ── IMPORTANTE: solo se neutralizan contenedores de LAYOUT, nunca .ms-rtestate-field ni ScriptEditorWebPart porque esos son el editor mismo y resetearlos impide editarlo. */ .ms-WPBody, .ms-wpContentDivSpace, div[id*="WebPartWPQ"], div[id*="MSOZoneCell"] { padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Forzar que el padre directo de #jep-vd no añada espacio superior/lateral */ #jep-vd:first-child { margin-top: 0 !important; } /* Quitar padding/margin del área de contenido principal de SharePoint que genera el espacio blanco alrededor del fragmento de código */ #DeltaPlaceHolderMain, #ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichHtmlField, .ms-rtestate-field > *:first-child, #contentBox, #contentRow, td.ms-borderbottom, .ms-wikicontent, .ms-pageRow, #s4-bodyContainer { padding: 0 !important; margin: 0 !important; } /* ── Fondo del body de SharePoint ── Solo se aplica a contenedores de layout seguros, NO al body ni a .ms-rtestate-field para no interferir con el editor de páginas de SharePoint. */ #DeltaPlaceHolderMain, #contentRow, #contentBox, #s4-bodyContainer { background: url(https://www.jep.gov.co/VerdadesJEP/Imagenes/Background-light.png) #f2ede4 0% 0% / 450px 450px repeat !important; } /* ── Responsive ── */ @media (max-width: 768px) { #jep-vd .hero-inner { grid-template-columns: 1fr; } #jep-vd .hero-right { display: none; } #jep-vd .carousel-track .card { flex: 0 0 calc(50% - 8px); } #jep-vd .footer-top { grid-template-columns: 1fr; } #jep-vd .inst-nav { display: none; } #jep-vd .featured-grid { grid-template-columns: 1fr; } } @media (max-width: 500px) { #jep-vd .carousel-track .card { flex: 0 0 100%; } } @media (max-width: 470px) { #jep-vd { max-width: 470px; padding-top: 0; } #jep-vd .hero-inner { grid-template-columns: 1fr; max-width: 470px; } #jep-vd .sec-block { max-width: 400px; } #jep-vd .hero { min-height: 800px; margin-top: 0; } #jep-vd .hero-right { display: none; } #jep-vd .footer-top { grid-template-columns: 1fr; } #jep-vd .inst-nav { display: none; } #jep-vd .featured-grid { grid-template-columns: 1fr; } } /* ── Ocultar web part de redes sociales de SharePoint ── El web part "Herramientas de página social" (XPost + fb:Compartir) que aparece debajo del fragmento de código. Múltiples selectores para cubrir distintas versiones de SharePoint. */ .ms-socialNotif, .ms-socialNotif-container, div[id*="SocialDataWebPart"], div[id*="socialdata"], div[id*="SocialShare"], div[id*="SharePageWebPart"], .ms-SharePage, .ms-SharePage-container, [data-automation-id="socialshare"], [data-automation-id="SharePage"], .social-actions, div:has(> .fb-share-button), div:has(> [data-size="large"]) { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }