/* Ruztiko — homepage "Selección especial" (featured articles) showcase.
   Three layout directions (1 Expediente · 2 Galería · 3 Pliego); each featured
   article carries its own direction, and the homepage renders one block per
   non-empty direction (order 1→2→3), adapting to the item count.
   Ported from the Claude Design demo (featured-section.js / "Selección especial").
   All selectors scoped under .ruz-featured so they can't collide with catalogo.css.
   Lives inside .ruz-app, so box-sizing is inherited. */

.ruz-featured{
  --app-bg:#f4ede0; --paper:#fdf9ee; --ink:#241710; --ink-soft:#3a2418;
  --text:#5a4a3a; --rust:#a0552a; --gold:#d49a3f; --gold-soft:#f0c372;
  --olive:#5b7a3f; --line:#e6dcc6; --line2:#d8cbb5; --line3:#c9b89a; --img:#e8e0cd;
  background:var(--app-bg); border-bottom:1px solid var(--line2); scroll-margin-top:80px;
  font-family:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.ruz-featured a{color:inherit;text-decoration:none}
.ruz-featured img{display:block;max-width:100%}
.ruz-featured-wrap{max-width:1240px;margin:0 auto;padding:40px 32px 44px}

/* stacked direction blocks share one header; blocks after the first get a rule */
.ruz-featured .fx-block + .fx-block{margin-top:40px;padding-top:36px;border-top:1px solid var(--line2)}

/* ============ section header ============ */
.ruz-featured .fx-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line2);margin-bottom:30px}
.ruz-featured .fx-kick{margin:0;font-size:11px;line-height:1;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--rust);font-weight:700}
.ruz-featured .fx-all{font-size:12px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:3px;white-space:nowrap;display:inline-flex;align-items:center}
.ruz-featured .fx-all:hover{color:var(--rust);border-color:var(--rust)}

/* availability tag — typographic, no status dots */
.ruz-featured .av{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--rust);white-space:nowrap}
.ruz-featured .av::before{content:"";width:16px;height:1.5px;background:currentColor;flex:0 0 auto}
.ruz-featured .av.in_stock{color:var(--olive)}
.ruz-featured .av.made_to_order{color:var(--rust)}
.ruz-featured .av.sold{color:#9a8b76}
.ruz-featured .av small{font-weight:500;letter-spacing:0.04em;text-transform:none;color:var(--text);font-size:11.5px}

/* num badge */
.ruz-featured .nbadge{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:0.14em;
  color:var(--paper);background:rgba(36,23,16,0.82);padding:5px 9px}

/* actions over image */
.ruz-featured .acts{position:absolute;right:11px;bottom:11px;z-index:3;display:flex;gap:6px}
.ruz-featured .act{height:31px;border:0;background:rgba(36,23,16,0.9);color:var(--paper);padding:0 11px;
  display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:11px;font-weight:700;
  letter-spacing:0.03em;text-transform:uppercase;cursor:pointer}
.ruz-featured .act.ic{width:31px;padding:0;justify-content:center}
.ruz-featured .act:hover{background:var(--ink-soft)}
.ruz-featured .act svg{width:13px;height:13px}

/* buttons */
.ruz-featured .btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);
  font-family:inherit;font-size:14px;font-weight:650;padding:12px 19px;border-radius:2px;
  border:0;cursor:pointer;transition:background .16s}
.ruz-featured .btn:hover{background:var(--ink-soft)}
.ruz-featured .btn .ar{transition:transform .18s}
.ruz-featured .btn:hover .ar{transform:translateX(3px)}
.ruz-featured .wa{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
.ruz-featured .wa svg{width:15px;height:15px}
.ruz-featured .wa:hover{color:var(--ink)}

/* responsive <picture> from ruz_img_tag() fills its frame like a bare <img> */
.ruz-featured .f1-shot picture,
.ruz-featured .f1-thumb picture,
.ruz-featured .f2-tile picture,
.ruz-featured .f3-shot picture{display:block;width:100%;height:100%}

/* ===================================================================
   DIR 1 — EXPEDIENTE (dossier: image + ruled spec sheet)
   =================================================================== */
.ruz-featured .f1-item{display:grid;grid-template-columns:0.97fr 1.03fr;gap:40px;align-items:center;
  padding:36px 0;border-top:1px solid var(--line2)}
.ruz-featured .f1-block > .f1-item:first-child{border-top:0;padding-top:4px}
.ruz-featured .f1-shot{position:relative;aspect-ratio:4/3;background:var(--img);overflow:hidden;border:1px solid var(--line)}
.ruz-featured .f1-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ruz-featured .f1-shot .cover,.ruz-featured .f3-shot .cover{position:absolute;inset:0;z-index:1;display:block}
.ruz-featured .f1-item:hover .f1-shot img{transform:scale(1.03)}
.ruz-featured .f1-num{position:absolute;top:13px;left:13px;z-index:3}
.ruz-featured .f1-info{min-width:0}
.ruz-featured .f1-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.ruz-featured .f1-kick{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--rust);font-weight:500}
.ruz-featured .f1-name{font-size:clamp(27px,3vw,38px);line-height:1.03;letter-spacing:-0.028em;font-weight:650;margin:11px 0 12px;max-width:18ch}
.ruz-featured .f1-name a:hover{color:var(--rust)}
.ruz-featured .f1-desc{font-size:14.5px;color:var(--text);line-height:1.55;margin:0 0 22px;max-width:46ch}
.ruz-featured .f1-meta{border-top:1px solid var(--ink);margin-bottom:20px}
.ruz-featured .f1-mrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.ruz-featured .f1-mk{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#9a8b76;font-weight:700}
.ruz-featured .f1-mv{font-size:14.5px;color:var(--ink);font-weight:500;text-align:right}
.ruz-featured .f1-mv b{font-weight:650}
.ruz-featured .f1-mv .note{color:var(--text);font-weight:400;font-size:13px}
.ruz-featured .f1-thumbs{display:flex;gap:9px;margin-bottom:22px}
.ruz-featured .f1-thumb{width:66px;height:66px;flex:0 0 auto;overflow:hidden;border:1px solid var(--line);background:var(--img)}
.ruz-featured .f1-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ruz-featured .f1-thumb:hover img{transform:scale(1.06)}
.ruz-featured .f1-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ===================================================================
   DIR 2 — GALERÍA (image-dominant poster mosaic)
   =================================================================== */
.ruz-featured .f2-grid{display:grid;gap:16px}
.ruz-featured .f2-grid[data-n="1"]{grid-template-columns:1fr;--ar:2/1}
.ruz-featured .f2-grid[data-n="2"]{grid-template-columns:1fr 1fr;--ar:4/3}
.ruz-featured .f2-grid[data-n="3"]{grid-template-columns:repeat(3,1fr);--ar:4/5}
.ruz-featured .f2-grid[data-n="4"]{grid-template-columns:1fr 1fr;--ar:3/2}
.ruz-featured .f2-tile{position:relative;display:block;overflow:hidden;background:var(--img);
  border:1px solid var(--line);aspect-ratio:var(--ar)}
.ruz-featured .f2-tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ruz-featured .f2-tile:hover img{transform:scale(1.04)}
.ruz-featured .f2-num{position:absolute;top:13px;left:13px;z-index:3}
.ruz-featured .f2-plate{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:54px 20px 18px;
  background:linear-gradient(to top,rgba(20,12,8,0.82),rgba(20,12,8,0.34) 55%,transparent);
  color:var(--paper);display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.ruz-featured .f2-plate .av{color:var(--gold-soft)}
.ruz-featured .f2-plate .av::before{background:var(--gold-soft)}
.ruz-featured .f2-plate .av small{color:rgba(253,249,238,0.8)}
.ruz-featured .f2-pk{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(253,249,238,0.7);margin-bottom:9px}
.ruz-featured .f2-pt{font-size:clamp(20px,2vw,27px);line-height:1.05;letter-spacing:-0.02em;font-weight:600;
  color:var(--paper);max-width:20ch}
.ruz-featured .f2-pp{margin-top:9px;font-size:14px;color:var(--gold-soft);font-weight:600}
.ruz-featured .f2-pp .note{color:rgba(253,249,238,0.72);font-weight:400;font-size:12.5px}
.ruz-featured .f2-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--paper);border:1px solid rgba(253,249,238,0.5);padding:9px 13px;border-radius:2px;white-space:nowrap;
  transition:background .16s,border-color .16s}
.ruz-featured .f2-tile:hover .f2-go{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ruz-featured .f2-tile[data-wide="1"] .f2-pt{font-size:clamp(26px,2.8vw,38px);max-width:24ch}

/* ===================================================================
   DIR 3 — PLIEGO (editorial spread, oversized serial, leader dots)
   =================================================================== */
.ruz-featured .f3-items{display:flex;flex-direction:column;gap:8px}
.ruz-featured .f3-item{display:grid;grid-template-columns:1.08fr 0.92fr;gap:48px;align-items:center;
  padding:40px 0;border-top:1px solid var(--line2)}
.ruz-featured .f3-block > .f3-items > .f3-item:first-child{border-top:0}
.ruz-featured .f3-item.rev{grid-template-columns:0.92fr 1.08fr}
.ruz-featured .f3-item.rev .f3-shot{order:2}
.ruz-featured .f3-item.rev .f3-text{order:1}
.ruz-featured .f3-shot{position:relative;aspect-ratio:5/4;background:var(--img);overflow:hidden}
.ruz-featured .f3-shot img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ruz-featured .f3-item:hover .f3-shot img{transform:scale(1.025)}
.ruz-featured .f3-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 13px;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(20,12,8,0.6),transparent);color:var(--paper);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.06em}
.ruz-featured .f3-text{min-width:0}
.ruz-featured .f3-serial{display:flex;align-items:baseline;gap:13px;margin-bottom:6px}
.ruz-featured .f3-serial .num{font-family:'Geist Mono',ui-monospace,monospace;font-size:clamp(40px,5vw,64px);line-height:0.82;font-weight:500;
  letter-spacing:-0.02em;color:var(--rust);font-variant-numeric:tabular-nums}
.ruz-featured .f3-serial .lbl{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:#9a8b76}
.ruz-featured .f3-name{font-size:clamp(30px,3.8vw,50px);line-height:0.98;letter-spacing:-0.035em;font-weight:700;margin:8px 0 16px;text-wrap:balance}
.ruz-featured .f3-name a:hover{color:var(--rust)}
.ruz-featured .f3-desc{font-size:15.5px;color:var(--text);line-height:1.55;margin:0 0 22px;max-width:40ch}
.ruz-featured .f3-index{margin:0 0 24px;display:flex;flex-direction:column;gap:11px;max-width:430px}
.ruz-featured .f3-irow{display:flex;align-items:baseline;gap:12px}
.ruz-featured .f3-ik{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.ruz-featured .f3-idots{flex:1 1 auto;border-bottom:1.5px dotted var(--line3);transform:translateY(-5px)}
.ruz-featured .f3-iv{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--rust);white-space:nowrap}
.ruz-featured .f3-iv.olive{color:var(--olive)}
.ruz-featured .f3-iv.muted{color:#9a8b76}
.ruz-featured .f3-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ============ Seal sizing per direction (positioning lives in seal.css) ============ */
.ruz-featured .ruz-seal{--seal-size:108px;--seal-off:13px}
.ruz-featured .f2-grid[data-n="1"] .ruz-seal{--seal-size:160px;--seal-off:18px}
.ruz-featured .f2-grid[data-n="3"] .ruz-seal,
.ruz-featured .f2-grid[data-n="4"] .ruz-seal{--seal-size:80px;--seal-off:10px}

/* ============ Responsive ============ */
@media(max-width:900px){
  .ruz-featured-wrap{padding:30px 18px 34px}
  .ruz-featured .f1-item,
  .ruz-featured .f3-item,
  .ruz-featured .f3-item.rev{grid-template-columns:1fr;gap:22px}
  .ruz-featured .f3-item.rev .f3-shot,
  .ruz-featured .f3-item.rev .f3-text{order:initial}
  .ruz-featured .f2-grid[data-n]{grid-template-columns:1fr!important;--ar:3/2!important}
  .ruz-featured .ruz-seal{--seal-size:90px;--seal-off:11px}
}