/* ============================================================
   AKORA — The Guide · ficha de artículo
   Reproduce la plantilla de artículo entregada (intro + lista
   numerada de pasos + recursos + cierre). Estructura común a
   todos los artículos del blog. Se carga DESPUÉS de akora.css.
   ============================================================ */

body{background:var(--cream);}
.art-wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

.art-breadcrumb{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
  padding:clamp(26px,3vw,40px) 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.art-breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.art-breadcrumb a:hover{color:var(--teal);}
.art-breadcrumb .sep{color:var(--line);}

.art-grid{display:grid;grid-template-columns:1.22fr 0.78fr;gap:clamp(44px,4.6vw,80px);
  align-items:start;padding:clamp(54px,5.6vw,88px) 0 clamp(72px,7.5vw,120px);}

.art-lead{position:sticky;top:96px;}
.art-tag{display:inline-block;white-space:nowrap;background:var(--navy);color:var(--cream);font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:5px 10px;border-radius:2px;margin:0 0 20px;}
.art-title{font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:-.018em;margin:0;text-wrap:balance;}
.art-lead__img{margin-top:72px;width:100%;height:460px;border-radius:4px;overflow:hidden;background:var(--cream-3);}
.art-lead__img img{width:100%;height:100%;object-fit:cover;display:block;}
.art-intro{font-size:16.5px;line-height:1.78;color:var(--ink-soft);margin:40px 0 0;max-width:none;font-style:italic;}
.art-intro + .art-intro{margin-top:16px;}
/* Bloque de introducción (HTML con varios <p>) */
.art-introbody{margin-top:40px;}
.art-introbody p{font-size:16.5px;line-height:1.78;color:var(--ink-soft);margin:0;font-style:italic;}
.art-introbody p + p{margin-top:16px;}

/* Share row */
.art-share{display:flex;align-items:center;gap:8px;margin:34px 0 0;}
.art-share__lbl{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-right:5px;}
.art-share__btn{width:32px;height:32px;border-radius:50%;border:none;background:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cream);
  transition:background .18s;text-decoration:none;position:relative;padding:0;}
.art-share__btn:hover{background:var(--teal);}
.art-share__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.art-share__btn.ok::after{content:"Copied";position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--navy);color:var(--cream);font-family:var(--font-body);font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:4px;white-space:nowrap;}

.art-steps-head{font-family:var(--font-script);color:var(--navy);font-size:clamp(30px,3.2vw,44px);line-height:.9;margin:0 0 34px;padding-left:2px;}

/* Numbered timeline */
.art-steps{position:relative;display:flex;flex-direction:column;gap:clamp(38px,4vw,56px);}
.art-step{position:relative;display:grid;grid-template-columns:38px 1fr;gap:26px;align-items:start;}
.art-step__num{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--navy);background:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;
  color:var(--navy);position:relative;z-index:1;}
.art-step__b{padding-top:3px;}
.art-step__k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  display:block;margin-bottom:10px;}
.art-step h2{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,1.7vw,25px);color:var(--navy);
  margin:0 0 12px;letter-spacing:-.005em;line-height:1.18;}
.art-step h2 a{color:inherit;text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0% 2px no-repeat;transition:background-size .3s;}
.art-step h2 a:hover{background-size:100% 2px;}
.art-step p{font-size:15px;color:var(--ink-soft);line-height:1.75;margin:0;}
.art-step p a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(24,30,58,.35);}
.art-step p a:hover{border-color:var(--navy);}
.art-step .art-addr{font-size:12px;color:var(--ink-soft);margin:10px 0 0;letter-spacing:.03em;}
.art-step p .flag{color:var(--teal);font-style:italic;}

/* Foot: resources + cta */
.art-res{font-size:14.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 clamp(30px,3.4vw,44px);max-width:none;}
.art-res b{color:var(--navy);font-weight:700;}
.art-res a{color:var(--teal);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(70,129,134,.3);}
.art-res a:hover{border-color:var(--teal);}
.art-foot{border-top:1px solid var(--line);max-width:none;margin:0 auto;
  padding:clamp(34px,4vw,52px) 0 clamp(50px,6vw,80px);}
.art-close{font-family:var(--font-display);font-size:clamp(17px,1.55vw,20px);line-height:1.45;color:var(--navy);
  font-weight:400;margin:0 auto;letter-spacing:-.005em;max-width:60ch;text-align:center;text-wrap:balance;}
.art-close a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,214,10,.55);font-weight:600;}
.art-close a:hover{border-color:var(--gold);}

@media(max-width:860px){
  .art-grid{grid-template-columns:1fr;gap:38px;padding-bottom:40px;}
  .art-lead{position:static;}
  .art-lead__img{height:240px;margin-top:36px;}
}
@media(max-width:520px){
  .art-wrap{padding:0 22px;}
  .art-step{grid-template-columns:34px 1fr;gap:16px;}
  .art-step__num{width:34px;height:34px;font-size:14px;}
}