/* Proto&Go! — Blog: portada del blog y artículo (16-09-2026).
   Hereda tokens y componentes de pg.css. Aquí manda el texto largo: columna de lectura de 68ch. */

.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.crumbs a:hover{color:var(--ink)}
.ocre{color:#9c5800}

/* ============ PORTADA DEL BLOG ============ */
.bhero + .sec{padding-top:0}
.bhero{padding-top:calc(var(--nav) + clamp(28px,4.5vw,64px));padding-bottom:clamp(48px,6vw,96px)}
.bhero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.bhero-copy{display:flex;flex-direction:column;gap:24px}
.bhero-copy>*{animation:rise .9s var(--ease) both}
.bhero-copy>:nth-child(2){animation-delay:.06s}.bhero-copy>:nth-child(3){animation-delay:.12s}.bhero-copy>:nth-child(4){animation-delay:.18s}.bhero-copy>:nth-child(5){animation-delay:.24s}
.bhero h1{font-size:clamp(2.5rem,5vw,4.6rem);letter-spacing:-.045em;line-height:.96}
.bhero h1 em{font-style:normal;color:var(--orange)}
.bhero .bh-tools{display:flex;flex-wrap:wrap;gap:8px}
.bstats{display:flex;gap:clamp(20px,3vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.bstats b{display:block;font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:-.03em;line-height:1}
.bstats span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* artículo principal */
.lead{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--ink);color:var(--paper);aspect-ratio:4/3.1;isolation:isolate;animation:rise 1.1s var(--ease) both .12s;box-shadow:0 40px 80px -40px rgba(30,32,35,.55)}
.lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease)}
.lead:hover img{transform:scale(1.07)}
.lead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,25,29,0) 34%,rgba(21,25,29,.88) 100%);z-index:1}
.lead .body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,3vw,40px);display:grid;gap:14px}
.lead .k{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,246,244,.72)}
.lead .k .nuevo{background:var(--orange);color:var(--ink);padding:5px 8px;border-radius:3px}
.lead h2{font-size:clamp(1.6rem,2.9vw,2.6rem);max-width:20ch;letter-spacing:-.035em}
.lead p{max-width:54ch;color:rgba(246,246,244,.78);font-size:.98rem}
.lead .go{position:absolute;right:clamp(18px,2.4vw,32px);top:clamp(18px,2.4vw,32px);z-index:2;width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
.lead .go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.lead:hover .go{transform:rotate(-45deg);background:var(--orange)}

/* destacados */
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pick{display:flex;flex-direction:column;background:#fff;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.pick:hover{box-shadow:inset 0 0 0 1px var(--line-strong),0 30px 60px -34px rgba(30,32,35,.5);transform:translateY(-4px)}
.pick .ph{aspect-ratio:16/11;overflow:hidden;background:var(--paper-2)}
.pick .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pick:hover .ph img{transform:scale(1.05)}
.pick .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pick h3{font-size:1.14rem;letter-spacing:-.015em;line-height:1.18}
.pick:hover h3{color:var(--orange-deep)}
.pick .meta{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* archivo */
.arch-bar{position:sticky;top:60px;z-index:20;display:grid;grid-template-columns:minmax(220px,380px) minmax(0,1fr) auto;gap:14px 20px;align-items:center;padding:14px 0;background:rgba(246,246,244,.9);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:15px;width:16px;height:16px;stroke:var(--steel);fill:none;stroke-width:1.8;pointer-events:none}
.search input{width:100%;height:46px;padding:0 40px 0 42px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:.95rem;transition:box-shadow .3s}
.search input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(240,138,2,.18)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{position:absolute;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--steel)}
.search .clear[hidden],.needs [hidden]{display:none}
.search .clear:hover{background:var(--paper-2);color:var(--ink)}
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.86rem;font-weight:500;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.cats button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.cats button .n{font-family:var(--mono);font-size:.6rem;color:var(--steel)}
.cats button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.cats button[aria-pressed=true] .n{color:rgba(246,246,244,.6)}
.arch-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.arch-count b{color:var(--ink);font-weight:500}

#archivo .head-2{margin-bottom:clamp(16px,2vw,28px)}
.year{display:grid;grid-template-columns:minmax(110px,1.4fr) minmax(0,10fr);gap:clamp(16px,3vw,40px);padding-block:clamp(22px,2.4vw,34px);border-top:1px solid var(--line-strong)}
.year[hidden]{display:none}
.year h3{position:sticky;top:150px;align-self:start;font-size:clamp(2.2rem,4vw,3.6rem);letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--line-strong);transition:color .6s var(--ease),-webkit-text-stroke-color .6s}
.year.on h3{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
.year h3 small{display:block;margin-top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);-webkit-text-stroke:0;font-weight:400}
/* galería del archivo: las mismas tarjetas que los destacados */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gal .pick[hidden]{display:none}
.gal .pick .body{padding:16px 18px 20px;gap:9px}
.gal .pick h3{font-size:1.04rem}
.gal .pick .x{font-size:.86rem;line-height:1.45;color:var(--steel);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gal .pick .t mark{background:var(--orange-soft);color:inherit;border-radius:2px;padding:0 1px}
.more{display:flex;justify-content:center;padding-top:clamp(24px,3vw,40px)}
.more[hidden]{display:none}
.more .n{margin-left:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--steel)}
.more .n::before{content:"+"}
[data-c=cnc]{--dot:#1e2023}[data-c=p3d]{--dot:#f08a02}[data-c=moldes]{--dot:#8fb3c9}[data-c=fab]{--dot:#b9b9b2}
.empty{padding:48px 0;display:grid;gap:14px;justify-items:start}
.empty[hidden]{display:none}
.empty b{font-family:var(--display);font-variation-settings:'wdth' 110;font-size:1.5rem;font-weight:600;letter-spacing:-.02em}

/* ============ ARTÍCULO ============ */
.ahead{padding-top:calc(var(--nav) + clamp(28px,4vw,60px))}
.ahead .top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,72px);align-items:end}
.ahead .copy{display:flex;flex-direction:column;gap:22px}
.ahead .copy>*{animation:rise .9s var(--ease) both}
.ahead .copy>:nth-child(2){animation-delay:.06s}.ahead .copy>:nth-child(3){animation-delay:.12s}
.ahead h1{font-size:clamp(2.3rem,4.8vw,4.3rem);letter-spacing:-.045em;line-height:.98;max-width:18ch}
.ahead h1 em{font-style:normal;color:var(--orange)}
.cat-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.cat-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,var(--steel))}
.cat-chip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ahead .side{display:flex;flex-direction:column;gap:18px;padding-bottom:6px;animation:rise .9s var(--ease) both .18s}
.ahead .lede{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.byline{display:flex;align-items:center;gap:12px}
.byline .av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:.02em;flex:none;position:relative}
.byline .av::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--paper)}
.byline b{display:block;font-weight:600;font-size:.98rem}
.byline small{display:block;font-size:.86rem;color:var(--ink-2);margin:1px 0 3px}
.byline>span>span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.afig{--p:0;margin:clamp(32px,4vw,56px) 0 0;border-radius:8px;overflow:hidden;background:var(--paper-2);aspect-ratio:21/9;position:relative}
.afig img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p)*.14));transform-origin:50% 30%;will-change:transform}
.afig figcaption{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(246,246,244,.9);padding:6px 9px;border-radius:3px;color:var(--graphite)}

.alayout{display:grid;grid-template-columns:minmax(180px,236px) minmax(0,1fr);gap:clamp(24px,4vw,72px);padding-block:clamp(48px,6vw,96px) clamp(64px,8vw,120px)}
.atoc{grid-column:1;position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;gap:18px}
.atoc .ring{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.atoc .ring svg{width:34px;height:34px;transform:rotate(-90deg)}
.atoc .ring circle{fill:none;stroke-width:2.5}
.atoc .ring .bg{stroke:var(--line-strong)}
.atoc .ring .fg{stroke:var(--orange);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--read,0)*100);transition:stroke-dashoffset .15s linear}
.atoc ol{list-style:none;margin:0;padding:0;display:grid;border-left:1px solid var(--line)}
.atoc li a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:.86rem;line-height:1.35;color:var(--steel);transition:color .3s,border-color .3s}
.atoc li a:hover{color:var(--ink)}
.atoc li a[aria-current=true]{color:var(--ink);border-left-color:var(--orange);font-weight:500}
.share{display:flex;gap:8px}
.share a,.share button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .3s,color .3s,box-shadow .3s}
.share a:hover,.share button:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.share svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

.abody{grid-column:2;min-width:0;counter-reset:sec}
.abody>p,.abody>ul,.abody>ol{max-width:68ch}
.abody>h2,.abody>h3{max-width:820px}
.abody>.key{max-width:820px}
.abody p{margin:0 0 1.15em;font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.abody strong{color:var(--ink);font-weight:600}
.abody p a,.abody li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:1.5px}
.abody p a:hover,.abody li a:hover{color:var(--orange-deep)}
.abody>h2{counter-increment:sec;font-size:clamp(1.55rem,2.4vw,2.1rem);letter-spacing:-.025em;line-height:1.1;margin:clamp(52px,6vw,84px) 0 18px;scroll-margin-top:96px}
.abody>h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:14px;padding-top:18px;border-top:1px solid var(--line-strong);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--orange-deep);font-weight:400}
.abody>h2:first-child{margin-top:0}
.abody h3{font-size:1.25rem;letter-spacing:-.015em;margin:34px 0 10px}
.abody ul,.abody ol{margin:0 0 1.3em;padding:0;list-style:none;display:grid;gap:10px}
.abody li{position:relative;padding-left:24px;font-size:1.04rem;line-height:1.65;color:var(--ink-2)}
.abody ul>li::before{content:"";position:absolute;left:2px;top:.78em;width:10px;height:2px;border-radius:1px;background:var(--orange)}
.abody ol{counter-reset:n}
.abody ol>li{counter-increment:n;padding-left:36px}
.abody ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.28em;font-family:var(--mono);font-size:.68rem;color:var(--orange-deep)}

/* bloques dentro del texto */
.wide{margin:clamp(34px,4vw,56px) 0;max-width:none}
/* párrafos dentro de módulos: tamaño de interfaz, no de lectura */
.panel p,.aend p{font-size:.93rem;line-height:1.55;margin:0}
.panel p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.relief figure p{color:var(--ink-2)}
.quiz p{color:var(--steel);font-size:.86rem}
.flow p{color:var(--ink-2)}
.walls .detail p,.ribs .ctrl p{color:var(--ink-2)}
.key{margin:clamp(30px,3.5vw,48px) 0;padding:clamp(22px,2.6vw,34px);border-radius:8px;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.key::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(240,138,2,.35),transparent 70%)}
.key .mono{color:var(--orange);margin-bottom:10px;display:block}
.key p{position:relative;color:var(--paper)!important;font-family:var(--display);font-variation-settings:'wdth' 108;font-weight:500;font-size:clamp(1.25rem,1.9vw,1.6rem)!important;line-height:1.3!important;letter-spacing:-.015em;margin:0!important;text-wrap:balance}
.panel{background:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-head b{font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:600;font-size:1.1rem;letter-spacing:-.015em}
.bseg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--paper-2)}
.bseg button{padding:8px 13px;border-radius:999px;font-size:.84rem;font-weight:500;color:var(--ink-2);transition:background .3s,color .3s,box-shadow .3s}
.bseg button:hover{color:var(--ink)}
.bseg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line),0 6px 14px -8px rgba(30,32,35,.4)}
.lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* grabado frente a relieve (sección) */
.relief{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.relief figure{margin:0;background:#fff;padding:22px 22px 18px;display:grid;gap:12px}
.relief svg{width:100%;height:auto}
.relief figcaption{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.relief figcaption b{font-family:var(--display);font-variation-settings:'wdth' 110;font-size:1.1rem;font-weight:600}

/* probador de marcaje */
.mark-lab .lab-stage{display:grid;grid-template-columns:minmax(0,1fr) 260px}
.mark-lab .view{position:relative;min-height:340px;display:grid;place-items:center;padding:36px 24px 56px;background:
  radial-gradient(circle at 50% 40%,#fbfbfa,#e9e9e5 90%);overflow:hidden}
.mark-lab .plate{position:relative;padding:clamp(18px,3vw,34px) clamp(22px,4vw,48px);border-radius:10px;background:linear-gradient(145deg,#d9dcdf,#b9bec3 55%,#c9cdd1);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 6px rgba(0,0,0,.12),0 26px 40px -24px rgba(30,32,35,.55);max-width:100%;transition:background .5s}
.mark-lab .plate[data-fin=arenado]{background:linear-gradient(145deg,#cfd2d4,#c3c6c9);}
.mark-lab .plate[data-fin=arenado]::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.55;background-image:radial-gradient(rgba(0,0,0,.14) .6px,transparent .8px);background-size:3px 3px;pointer-events:none}
.mark-lab .plate[data-fin=pintura]{background:linear-gradient(145deg,#f39a24,#e07f00)}
.mark-lab .plate[data-fin=pulido]{background:linear-gradient(115deg,#aeb3b8 0%,#f4f5f6 38%,#b8bdc2 52%,#e9ebed 70%,#a9aeb3 100%)}
.mark-lab .txt{display:inline-block;position:relative;z-index:1;font-family:Archivo,Arial,sans-serif;font-variation-settings:'wdth' 100;line-height:1;white-space:nowrap;letter-spacing:.02em;color:#6c7278;text-shadow:0 1px 0 rgba(255,255,255,.75),0 -1px 0 rgba(0,0,0,.35);transition:font-size .35s var(--ease),font-weight .3s,filter .4s,opacity .4s,color .4s}
.mark-lab .plate[data-type=relieve] .txt{color:#c7cbcf;text-shadow:0 -1px 0 rgba(255,255,255,.8),0 2px 2px rgba(0,0,0,.35)}
.mark-lab .plate[data-fin=arenado] .txt{opacity:.72}
.mark-lab .plate[data-fin=pintura] .txt{color:#b86300;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.mark-lab .plate[data-fin=pulido] .txt{filter:blur(.35px)}
.mark-lab .txt .risk{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:6px}
.mark-lab .ruler{position:absolute;left:24px;bottom:16px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--steel)}
.mark-lab .ruler i{display:block;height:8px;border:1px solid var(--graphite);border-top:0}
.mark-lab .zoom{position:absolute;right:18px;top:14px}
.mark-lab .ctrl{padding:20px;display:grid;gap:18px;align-content:start;border-left:1px solid var(--line)}
.mark-lab .ctrl label{display:grid;gap:8px}
.mark-lab input[type=text]{height:42px;border-radius:6px;border:0;box-shadow:inset 0 0 0 1px var(--line-strong);padding:0 12px;font-size:.95rem;background:var(--paper)}
.mark-lab input[type=text]:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.range-row{display:flex;justify-content:space-between;align-items:baseline}
.range-row output{font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:600;font-size:1.2rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--orange) var(--fill,50%),var(--line-strong) var(--fill,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px #fff,0 2px 6px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px #fff}
.mark-lab .ctrl .bseg{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));border-radius:14px}
.mark-lab .ctrl .bseg button{padding:7px 8px;font-size:.8rem;border-radius:10px}
.glyphs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.glyphs div{background:#fff;padding:18px 16px;display:grid;gap:6px}
.glyphs b{font-family:Archivo,Arial,sans-serif;font-variation-settings:'wdth' 100;font-weight:700;font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:.06em;line-height:1}
.glyphs b i{font-style:normal;color:var(--orange)}
.glyphs span{font-size:.84rem;color:var(--steel);line-height:1.35}

/* fases: prototipo / preserie / serie corta */
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.phase{background:#fff;padding:clamp(20px,2.4vw,30px);display:grid;gap:14px;align-content:start;position:relative;transition:background .5s var(--ease)}
.phase .units{display:flex;gap:4px;flex-wrap:wrap;min-height:44px;align-content:flex-end}
.phase .units i{width:12px;height:18px;border-radius:2px;background:var(--line-strong);transition:background .4s var(--ease),transform .5s var(--ease)}
.phase h3{margin:0;font-size:1.45rem}
.phase p{font-size:.95rem!important;line-height:1.55!important;margin:0!important}
.phase .lbl{display:block;margin-bottom:4px}
.phase.on{background:var(--ink);color:var(--paper)}
.phase.on p{color:rgba(246,246,244,.78)!important}
.phase.on .lbl{color:rgba(246,246,244,.55)}
.phase.on .units i{background:var(--orange)}
.phase .tech{display:flex;flex-wrap:wrap;gap:6px}
.phase .tech span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.phase.on .tech span{box-shadow:inset 0 0 0 1px rgba(246,246,244,.25)}
.phase .pick-badge{position:absolute;right:16px;top:16px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:var(--ink);padding:4px 7px;border-radius:3px;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s var(--ease)}
.phase.on .pick-badge{opacity:1;transform:none}
.quiz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.quiz fieldset{margin:0;border:0;background:#fff;padding:18px 20px;display:grid;gap:12px;align-content:start}
.quiz legend{float:left;width:100%;display:flex;gap:10px;font-weight:600;font-size:.98rem;line-height:1.35;margin-bottom:12px}
.quiz legend span{font-family:var(--mono);font-size:.64rem;color:var(--orange-deep);padding-top:.28em}
.quiz .bseg{clear:both;justify-self:start;display:grid;grid-template-columns:1fr 1fr;border-radius:16px}
.quiz .bseg button{border-radius:12px;line-height:1.25}

/* alabeos */
.warp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.warp figure{margin:0;background:#fff;padding:20px 22px;display:grid;gap:10px}
.warp svg{width:100%;height:auto;overflow:visible}
.warp figcaption{display:flex;align-items:center;gap:10px;font-weight:600}
.warp figcaption i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.8rem;flex:none}
.warp .bad i{background:var(--ink);color:var(--paper)}
.warp .good i{background:var(--orange);color:var(--ink)}
.walls{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.walls .chart{padding:22px 22px 18px;display:grid;gap:4px}
.wall-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;padding:9px 8px;margin-inline:-8px;border-radius:6px;cursor:pointer;text-align:left;width:calc(100% + 16px);transition:background .3s}
.wall-row:hover{background:var(--paper)}
.wall-row[aria-pressed=true]{background:var(--paper-2)}
.wall-row b{font-size:.92rem;font-weight:600}
.wall-row small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:400}
.track{position:relative;height:26px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/6))}
.track .bar{position:absolute;top:7px;height:12px;border-radius:3px;background:var(--ink);left:calc(var(--a)/3*100%);width:max(4px,calc((var(--b) - var(--a))/3*100%));transition:background .3s}
.track .bar.open{width:auto;right:0;background:linear-gradient(90deg,var(--ink) 40%,rgba(30,32,35,.08))}
.wall-row[aria-pressed=true] .bar{background:var(--orange)}
.wall-row[aria-pressed=true] .bar.open{background:linear-gradient(90deg,var(--orange) 40%,rgba(240,138,2,.08))}
.track .val{position:absolute;top:-2px;left:calc(var(--b)/3*100% + 8px);font-family:var(--mono);font-size:.62rem;color:var(--graphite);white-space:nowrap}
.track .bar.open + .val{left:auto;right:calc((1 - var(--a)/3)*100% + 8px)}
.axis{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding-top:6px}
.axis div{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.58rem;color:var(--steel)}
.band{position:relative;grid-column:2;height:22px;margin-top:6px}
.band span{position:absolute;left:50%;width:50%;top:0;bottom:0;border-radius:3px;background:repeating-linear-gradient(135deg,rgba(240,138,2,.22) 0 6px,rgba(240,138,2,.08) 6px 12px);box-shadow:inset 0 0 0 1px rgba(240,138,2,.5);font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;color:#9c5800;white-space:nowrap}
.walls .detail{border-left:1px solid var(--line);padding:22px;display:grid;gap:14px;align-content:start}
.walls .detail svg{width:100%;max-width:280px;height:auto}
.walls .detail b{font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:600;font-size:1.2rem}
.walls .detail p{font-size:.9rem!important;line-height:1.55!important;margin:0!important}
.ribs{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center}
.ribs svg{width:100%;height:auto;padding:18px 22px}
.ribs .ctrl{padding:22px;border-left:1px solid var(--line);display:grid;gap:12px}

/* materiales */
.mat-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.mcard{background:#fff;display:grid;grid-template-rows:auto 1fr;position:relative;transition:background .5s var(--ease),opacity .5s}
.mcard .ph{aspect-ratio:16/10;overflow:hidden;background:#111;position:relative}
.mcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.mcard .body{padding:18px 20px 22px;display:grid;gap:10px;align-content:start}
.mcard h3{margin:0;font-size:1.5rem;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mcard h3 small{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:400}
.mcard p{font-size:.93rem!important;line-height:1.5!important;margin:0!important}
.mcard .mscore{display:flex;gap:4px}
.mcard .mscore i{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .4s var(--ease)}
.mcard .why{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.mcard .why span{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:3px;background:var(--orange-soft);color:#9c5800;animation:rise .4s var(--ease) both}
.mcard .badge{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:var(--ink);padding:5px 8px;border-radius:3px;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s var(--ease)}
.mat-pick.active .mcard.best .badge{opacity:1;transform:none}
.mat-pick.active .mcard:not(.best):not(.also){opacity:.5}
.mat-pick.active .mcard:not(.best):not(.also) .ph img{filter:grayscale(1)}
.mat-pick.active .mcard.best .ph img{transform:scale(1.05)}
.needs{display:flex;flex-wrap:wrap;gap:6px;padding:16px 20px;border-bottom:1px solid var(--line)}
.needs button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:.84rem;font-weight:500;transition:background .3s,color .3s,box-shadow .3s}
.needs button::before{content:"+";font-family:var(--mono);color:var(--orange-deep)}
.needs button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.needs button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.needs button[aria-pressed=true]::before{content:"✓";color:var(--orange)}
.needs .reset{margin-left:auto;background:none;box-shadow:none;color:var(--steel);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.needs .reset::before{content:none}
.cmp{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
.cmp th,.cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:400;background:var(--paper)}
.cmp tbody th{font-weight:600;width:24%}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp td b{color:var(--orange-deep);font-weight:600}

/* colada al vacío: defectos */
.defect{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.defect .ill{background:var(--ink);display:grid;place-items:center;padding:22px;min-height:240px;position:relative}
.defect .ill svg{width:100%;max-width:340px;height:auto;overflow:visible}
.defect .ill .lbl{position:absolute;left:16px;top:14px;color:rgba(246,246,244,.55)}
.defect .cols{display:grid;grid-template-rows:auto auto;gap:1px;background:var(--line)}
.defect .cols div{background:#fff;padding:18px 20px;display:grid;gap:8px;align-content:start}
.defect .cols div .lbl{display:flex;align-items:center;gap:8px}
.defect .cols div .lbl::before{content:"";width:14px;height:1.5px;background:var(--orange)}
.defect .cols ul{margin:0;gap:6px}
.defect .cols li{font-size:.93rem;line-height:1.5;padding-left:18px}
.defect .cols li::before{width:7px;top:.72em}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.flow div{background:#fff;padding:20px;display:grid;gap:8px;align-content:start}
.flow b{font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:600;font-size:1.15rem}
.flow .n{font-family:var(--mono);font-size:.62rem;color:var(--orange-deep)}

/* bubbles & anim */
@keyframes rise-b{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
@keyframes flowL{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.ill .b{animation:rise-b 3.4s var(--ease) infinite}
.ill .b:nth-of-type(2){animation-delay:.6s}.ill .b:nth-of-type(3){animation-delay:1.3s}.ill .b:nth-of-type(4){animation-delay:2s}.ill .b:nth-of-type(5){animation-delay:2.6s}

/* cierre del artículo */
.aend{grid-column:2;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3vw,40px);border-radius:8px;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center;position:relative;overflow:hidden}
.aend::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at 85% 0%,rgba(240,138,2,.25),transparent 70%);pointer-events:none}
.aend>*{position:relative}
.aend h2{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.025em}
.aend p{color:var(--paper-on-ink)!important;margin:10px 0 0!important;font-size:1rem!important;max-width:52ch}
.atags{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.atags a{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.atags a:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.related{padding-bottom:clamp(72px,9vw,130px)}
.related .head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(24px,3vw,40px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line-strong)}
.related .picks{grid-template-columns:repeat(3,minmax(0,1fr))}

/* responsive */
@media (max-width:1180px){
  .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alayout{grid-template-columns:200px minmax(0,1fr)}
  .arch-bar{grid-template-columns:minmax(0,1fr) auto}
  .arch-bar .cats{grid-column:1/-1;grid-row:2}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .bhero .wrap,.ahead .top{grid-template-columns:1fr}
  .lead{aspect-ratio:4/3.6}
  .alayout{grid-template-columns:1fr}
  .atoc{position:static;grid-column:1;display:none}
  .abody,.aend,.atags{grid-column:1}
  .afig{aspect-ratio:16/10}
  .year{grid-template-columns:1fr}
  .year h3{position:static;font-size:2.4rem}
  .year h3 small{display:inline;margin-left:12px}
  .mark-lab .lab-stage,.walls,.ribs{grid-template-columns:1fr}
  .mark-lab .ctrl,.walls .detail,.ribs .ctrl{border-left:0;border-top:1px solid var(--line)}
  .phases,.mat-pick,.flow{grid-template-columns:1fr}
  .quiz{grid-template-columns:1fr}
  .defect{grid-template-columns:1fr}
  .glyphs{grid-template-columns:1fr 1fr}
  .aend{grid-template-columns:1fr}
  .related .picks{grid-template-columns:1fr}
}
@media (max-width:640px){
  .picks{grid-template-columns:1fr}
  .arch-bar{top:56px;grid-template-columns:1fr}
  .arch-count{display:none}
  .gal{grid-template-columns:1fr}
  .relief,.warp{grid-template-columns:1fr}
  .abody p{font-size:1.02rem}
  .wall-row,.axis{grid-template-columns:96px minmax(0,1fr)}
  .bstats{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .afig img{transform:none}
  .ill .b{animation:none}
}

/* v11 · FAQ del artículo, caja de servicio y tablas dentro del cuerpo */
.afaq{display:grid;gap:10px;margin:0 0 1.6em;max-width:820px}
.afaq details{border:1px solid var(--line-strong);border-radius:8px;background:var(--paper)}
.afaq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 20px;font-weight:600;font-size:1.04rem;line-height:1.4;color:var(--ink);position:relative}
.afaq summary::-webkit-details-marker{display:none}
.afaq summary::after{content:"+";position:absolute;right:18px;top:13px;font-family:var(--mono);font-size:1.2rem;color:var(--orange-deep)}
.afaq details[open] summary::after{content:"−"}
.afaq details>p{padding:0 20px 18px;margin:0!important;font-size:1rem!important}
.aend .svc{margin-top:16px!important;font-size:.95rem!important;max-width:60ch}
.aend .svc a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:1.5px}
.aend .svc a:hover{color:var(--orange)}
.abody .cmp{margin:0 0 1.6em}
.abody .cmp table{min-width:640px}
.abody .cmp td,.abody .cmp th{font-size:.95rem;line-height:1.5}
.abody .cmp tbody th{width:22%}