/* ══════════════════════════════════════════════════════════════════
   BIM Forum Chile — Artículo de noticia
   Tipografías y color del manual de marca: Dubai en titulares,
   Roboto en cuerpo, azul #0175c9 como primario y ámbar como acento.
   ══════════════════════════════════════════════════════════════════ */

/* ── Barra de progreso de lectura ── */
.art-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cta),var(--p1) 60%,var(--c1));transition:transform .12s linear}

/* ── Portada ────────────────────────────────────────────────── */
.art-hero{position:relative;isolation:isolate;background:var(--navy-900);color:#fff;padding:clamp(6rem,12vw,9rem) 0 clamp(3rem,6vw,4.5rem);overflow:hidden}
/* El fondo es textura, no contenido: se desenfoca para que el texto del afiche
   no compita con el titular del artículo. La escala evita bordes claros al
   aplicar el desenfoque. */
.art-hero__bg{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:.55;filter:saturate(.85) blur(16px)}
.art-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,15,26,.68) 0%,rgba(7,15,26,.8) 55%,rgba(7,15,26,.95) 100%)}
.art-hero__diag{position:absolute;top:0;right:-12%;width:46%;height:100%;background:linear-gradient(115deg,transparent 44%,rgba(85,187,235,.14) 45%,rgba(85,187,235,.14) 47%,transparent 48%,transparent 56%,rgba(243,146,0,.16) 57%,rgba(243,146,0,.16) 59%,transparent 60%);pointer-events:none}
.art-hero__inner{position:relative;z-index:2;max-width:900px}

.art-back{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);font-family:Dubai,sans-serif;font-size:.78rem;font-weight:600;line-height:1.2;padding:.55rem .95rem;border-radius:99px;cursor:pointer;margin-bottom:1.75rem;transition:background .18s ease,border-color .18s ease}
.art-back:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.art-back svg{transform:rotate(180deg);flex:0 0 auto}

.art-hero__meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-family:Dubai,sans-serif;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:1.1rem}
.art-hero__tag{background:var(--cta);color:#fff;padding:.3rem .75rem;border-radius:99px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.art-hero__dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34)}

.art-hero__title{font-family:Dubai,sans-serif;font-weight:700;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 1.1rem;text-wrap:balance}
.art-hero__lead{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65;color:rgba(255,255,255,.8);max-width:64ch;margin:0;text-wrap:pretty}

/* ── Cuerpo ─────────────────────────────────────────────────── */
.art-wrap{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem);background:#fff}
.art-grid{display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.art-aside__sticky{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.25rem}

.art-figure{margin:0 0 clamp(1.75rem,3vw,2.5rem);border-radius:var(--bfc-radius-card,14px);overflow:hidden;background:var(--ink-50);display:grid;place-items:center}
/* Sin recorte: las imágenes de las noticias suelen ser afiches con texto, así
   que se muestran completas en su proporción original. */
.art-figure img{display:block;width:100%;max-width:100%;height:auto;max-height:78vh;object-fit:contain}

/* Contenido maquetado en WordPress: se le da el ritmo tipográfico del sitio
   sin obligar al editor a aplicar clases. */
.art-rich{font-size:1.045rem;line-height:1.78;color:var(--ink-700,#2c3138);max-width:70ch}
.art-rich > *{margin:0 0 1.15em}
.art-rich > *:last-child{margin-bottom:0}
.art-rich h2{font-family:Dubai,sans-serif;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink-900);margin:2.2em 0 .7em;position:relative;padding-left:1.05rem}
.art-rich h2::before{content:'';position:absolute;left:0;top:.34em;width:9px;height:10px;background:var(--cta);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.art-rich h3{font-family:Dubai,sans-serif;font-weight:700;font-size:clamp(1.12rem,1.9vw,1.32rem);line-height:1.3;color:var(--ink-900);margin:1.9em 0 .6em}
.art-rich h4{font-family:Dubai,sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink-900);margin:1.6em 0 .5em}
.art-rich p{text-wrap:pretty}
.art-rich a{color:var(--cta);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-rich a:hover{color:var(--c1)}
.art-rich strong{font-weight:700;color:var(--ink-900)}
.art-rich ul,.art-rich ol{padding-left:1.3rem}
.art-rich li{margin-bottom:.5em}
.art-rich ul{list-style:none;padding-left:0}
.art-rich ul > li{position:relative;padding-left:1.5rem}
.art-rich ul > li::before{content:'';position:absolute;left:.15rem;top:.62em;width:7px;height:8px;background:var(--p1);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.art-rich blockquote{margin:2em 0;padding:1.4rem 1.6rem;background:var(--ink-50);border-left:3px solid var(--c1);border-radius:0 10px 10px 0;font-size:1.1rem;line-height:1.6;color:var(--ink-900);font-style:normal}
.art-rich blockquote p:last-child{margin-bottom:0}
.art-rich img,.art-rich figure img,.art-rich video,.art-rich iframe{max-width:100%;height:auto;border-radius:10px;display:block}
.art-rich figure{margin:2em 0}
.art-rich figcaption{font-size:.82rem;color:var(--ink-500);margin-top:.6rem;line-height:1.5}
.art-rich hr{border:0;height:1px;background:var(--ink-100);margin:2.4em 0}
.art-rich table{width:100%;border-collapse:collapse;font-size:.94rem}
.art-rich th,.art-rich td{padding:.6rem .8rem;border-bottom:1px solid var(--ink-100);text-align:left}
.art-rich th{font-family:Dubai,sans-serif;font-weight:700;color:var(--ink-900);background:var(--ink-50)}
.art-rich code{background:var(--ink-50);padding:.12em .4em;border-radius:4px;font-size:.9em}
.art-src-note{font-size:.92rem;color:var(--ink-500);padding-top:1rem;border-top:1px solid var(--ink-100)}

.art-author{padding-top:1.1rem;border-top:1px solid var(--ink-100);font-size:.8rem;line-height:1.5}
.art-author__lbl{display:block;font-family:Dubai,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin-bottom:.25rem}
.art-author strong{font-family:Dubai,sans-serif;font-size:.88rem;color:var(--ink-900)}

.art-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:clamp(2.25rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--ink-100)}

/* ── Compartir ──────────────────────────────────────────────── */
.art-share{display:flex;align-items:center;gap:.75rem}
.art-share__lbl{font-family:Dubai,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.art-share__nets{display:flex;gap:.45rem}
.art-share__btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--ink-100);background:#fff;color:var(--ink-700,#40474f);cursor:pointer;transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease;padding:0}
.art-share__btn:hover{color:#fff;background:var(--brand,var(--cta));border-color:var(--brand,var(--cta));transform:translateY(-2px)}
.art-share__btn--copy:hover{background:var(--ink-900);border-color:var(--ink-900)}
.art-share__btn--copy.is-done{color:#fff;background:#1a7f37;border-color:#1a7f37}
.art-share__ok{font-size:.76rem;color:#1a7f37;font-weight:600}

.art-share--col{flex-direction:column;align-items:flex-start;gap:.6rem}
.art-share--col .art-share__nets{flex-direction:column}
.art-share--col .art-share__lbl{writing-mode:horizontal-tb}

/* ── Relacionadas ───────────────────────────────────────────── */
.art-rel{background:var(--ink-50)}
.art-rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.art-rel__card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--ink-100);border-radius:var(--bfc-radius-card,14px);overflow:hidden;cursor:pointer;padding:0;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.art-rel__card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(7,15,26,.1);border-color:var(--p1)}
.art-rel__media{aspect-ratio:16/9;background:var(--ink-50);overflow:hidden;display:grid;place-items:center;padding:.4rem}
.art-rel__media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease}
.art-rel__card:hover .art-rel__media img{transform:scale(1.03)}
.art-rel__body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.art-rel__tag{font-family:Dubai,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cta)}
.art-rel__body h3{font-family:Dubai,sans-serif;font-weight:700;font-size:.98rem;line-height:1.35;color:var(--ink-900);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-rel__date{font-size:.76rem;color:var(--ink-500);margin-top:auto}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width:900px){
  .art-rel__grid{grid-template-columns:1fr 1fr}
  .art-grid{grid-template-columns:1fr;gap:1.75rem}
  .art-aside__sticky{position:static}
  .art-share--col{flex-direction:row;align-items:center;gap:.75rem;flex-wrap:wrap}
  .art-share--col .art-share__nets{flex-direction:row}
}
@media (max-width:640px){
  .art-hero{padding-top:clamp(4.5rem,16vw,6rem)}
  .art-hero__title{font-size:clamp(1.55rem,7vw,2.1rem)}
  .art-hero__lead{font-size:.98rem}
  .art-rich{font-size:1rem;max-width:100%}
  .art-rel__grid{grid-template-columns:1fr}
  .art-foot{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .art-share__btn{width:40px;height:40px}
  .art-figure img{max-height:none}
}


/* ══════════════════════════════════════════════════════════════════
   Fidelidad con el editor de WordPress

   Lo que el redactor ve al escribir tiene que ser lo que se publica: los
   bloques del editor traen sus propias clases de ancho y alineación y, sin
   estas reglas, todo caía en una sola columna estrecha y el diseño se perdía.
   ══════════════════════════════════════════════════════════════════ */

/* Anchos del editor. "Ancho" se sale del texto hasta ocupar la columna
   completa; "completo" llega de borde a borde de la pantalla. */
.art-rich .alignwide{width:calc(100% + clamp(1rem,6vw,5rem));max-width:none;margin-left:calc(clamp(1rem,6vw,5rem) / -2);margin-right:calc(clamp(1rem,6vw,5rem) / -2)}
.art-rich .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0}
.art-rich .alignfull img{border-radius:0}
.art-rich .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.art-rich figure.aligncenter img{margin-inline:auto}

/* Flotados: en pantallas anchas el texto envuelve la imagen, como en el
   editor. Por debajo de 720px se apilan, que es lo legible en un teléfono. */
@media(min-width:721px){
  .art-rich .alignleft{float:left;margin:.35em 2rem 1.4rem 0;max-width:min(48%,340px)}
  .art-rich .alignright{float:right;margin:.35em 0 1.4rem 2rem;max-width:min(48%,340px)}
  .art-rich::after{content:'';display:block;clear:both}
}
@media(max-width:720px){
  .art-rich .alignleft,.art-rich .alignright{float:none;margin-inline:0;max-width:100%}
}

/* Bloques nativos */
.art-rich .wp-block-image{margin:2em 0}
.art-rich .wp-block-image figcaption,.art-rich .wp-block-embed figcaption{font-size:.82rem;color:var(--ink-500);margin-top:.6rem;text-align:inherit}
.art-rich .wp-block-quote{margin:2em 0;padding:1.4rem 1.6rem;background:var(--ink-50);border-left:3px solid var(--c1);border-radius:0 10px 10px 0}
.art-rich .wp-block-quote cite{display:block;margin-top:.7rem;font-size:.84rem;font-style:normal;color:var(--ink-500)}
.art-rich .wp-block-pullquote{margin:2.4em 0;padding:1.8rem 0;border-top:2px solid var(--cta);border-bottom:2px solid var(--cta);text-align:center}
.art-rich .wp-block-pullquote p{font-family:Dubai,sans-serif;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.35;color:var(--ink-900);margin:0}
.art-rich .wp-block-separator{border:0;height:1px;background:var(--ink-100);margin:2.4em auto;max-width:180px}
.art-rich .wp-block-table table{width:100%;border-collapse:collapse}
.art-rich .wp-block-table figcaption{margin-top:.6rem;font-size:.82rem;color:var(--ink-500)}
.art-rich .wp-block-columns{display:flex;gap:clamp(1.2rem,3vw,2.4rem);flex-wrap:wrap;margin:2em 0}
.art-rich .wp-block-column{flex:1 1 240px;min-width:0}
.art-rich .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8em 0}
.art-rich .wp-block-button__link{display:inline-block;background:var(--cta);color:#fff;font-family:Dubai,sans-serif;font-weight:600;font-size:.92rem;padding:.72rem 1.5rem;border-radius:99px;text-decoration:none;transition:background .18s ease}
.art-rich .wp-block-button__link:hover{background:var(--c1);color:#fff}
.art-rich .is-style-outline .wp-block-button__link{background:transparent;color:var(--cta);box-shadow:inset 0 0 0 1.5px currentColor}
.art-rich .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin:2em 0}
.art-rich .wp-block-gallery figure{margin:0}
.art-rich .wp-block-media-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:center;margin:2.2em 0}
@media(max-width:720px){.art-rich .wp-block-media-text{grid-template-columns:1fr}}

/* Vídeos incrustados: proporción estable, sin saltos de maquetación. */
.art-rich .wp-block-embed__wrapper{position:relative}
.art-rich .wp-block-embed.is-type-video .wp-block-embed__wrapper{aspect-ratio:16/9}
.art-rich .wp-block-embed.is-type-video iframe{position:absolute;inset:0;width:100%;height:100%}

/* Colores y tamaños que el editor aplica por clase */
.art-rich .has-text-align-center{text-align:center}
.art-rich .has-text-align-right{text-align:right}
.art-rich .has-text-align-left{text-align:left}
.art-rich .has-large-font-size{font-size:1.35rem;line-height:1.5}
.art-rich .has-small-font-size{font-size:.88rem}
.art-rich .has-drop-cap:first-letter{float:left;font-family:Dubai,sans-serif;font-weight:700;font-size:3.4em;line-height:.82;margin:.06em .12em 0 0;color:var(--cta)}

/* ── Entradilla del cuerpo ─────────────────────────────────────
   El primer párrafo entra un punto más grande: marca dónde empieza la
   lectura sin necesidad de que el redactor aplique nada. */
.art-rich > p:first-of-type{font-size:1.14em;line-height:1.7;color:var(--ink-900)}

/* La imagen de portada del artículo respira más que el texto: se sale hacia
   el margen del lateral de compartir, un recurso editorial clásico. */
@media(min-width:981px){
  .art-figure{margin-left:calc(clamp(1.5rem,4vw,3.5rem) * -1)}
}