/* ============================================================================
   Ruztiko — Article page redesign ("3 direcciones adaptativas").
   Ported from the Claude Design demo (docs/claude-design-2026-06-19/
   "Articulo (rediseno).html"). EVERY rule is scoped under .ruz-ap so it can't
   leak into the shared catalog chrome (header/footer/lightbox stay on catalogo.css).

   The article page picks one of three "directions" (A Adaptativo / B Editorial /
   C Vitrina) and, within each, one of two layouts driven by the hero image shape:
   tall (portrait) vs wide (landscape; 'pano' shares the wide layout). The seal is
   the shared project seal (.ruz-seal, seal.css) — not the demo's decorative one.
   ========================================================================== */

.ruz-ap{
  --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;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  background:var(--app-bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.45; letter-spacing:-0.005em;
  font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased;
  padding:22px 0 64px;
}
.ruz-ap img{display:block;max-width:100%}
.ruz-ap picture{display:block;max-width:100%}
.ruz-ap a{color:inherit;text-decoration:none}
.ruz-ap .wrap{max-width:1080px;margin:0 auto;padding:0 32px}
/* responsive <picture> wrappers must fill the fixed-height banner/stage boxes */
.ruz-ap .banner picture,.ruz-ap .stage picture{height:100%}

.ruz-ap .ap-back{display:inline-block;font-size:13px;color:var(--text);margin-bottom:18px}
.ruz-ap .ap-back:hover{color:var(--ink)}

/* ============ Shared atoms ============ */
.ruz-ap .av{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--rust);white-space:nowrap}
.ruz-ap .av::before{content:"";width:20px;height:1.5px;background:currentColor;flex:0 0 auto}
.ruz-ap .av.in_stock{color:var(--olive)}
.ruz-ap .av.made_to_order{color:var(--rust)}
.ruz-ap .av.sold{color:#9a8b76}

.ruz-ap .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:#9a8b76;
  text-transform:uppercase;font-weight:500}
.ruz-ap .title{font-size:clamp(30px,3.7vw,48px);line-height:1.0;letter-spacing:-0.035em;
  font-weight:700;margin:0;text-wrap:balance}
.ruz-ap .price{font-family:var(--mono);font-size:25px;font-weight:500;color:var(--ink);
  letter-spacing:-0.01em;display:inline-flex;align-items:baseline;gap:9px}
.ruz-ap .price .note{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--text);
  letter-spacing:0;text-transform:lowercase}
.ruz-ap .desc{color:var(--ink-soft);line-height:1.62;max-width:54ch}
.ruz-ap .desc p{margin:0 0 10px}
.ruz-ap .desc p:last-child{margin-bottom:0}
.ruz-ap .desc ul{margin:0 0 10px;padding-left:20px}
.ruz-ap .desc a{color:var(--rust);text-decoration:underline}
.ruz-ap .desc strong{font-weight:650}

.ruz-ap .cta{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#0a2218;
  font-weight:700;font-size:15px;padding:14px 24px;border-radius:4px;transition:filter .15s}
.ruz-ap .cta:hover{filter:brightness(.96)}
.ruz-ap .cta svg{width:17px;height:17px}
.ruz-ap .cta.ink{background:var(--ink);color:var(--paper)}

/* specs — ruled key/value index (Dir A & C) */
.ruz-ap .specs{margin:0;border-top:1.5px solid var(--ink)}
.ruz-ap .specs .row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.ruz-ap .specs .k{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#9a8b76;
  font-weight:700;flex:0 0 auto}
.ruz-ap .specs .v{font-size:14.5px;color:var(--ink);font-weight:500;text-align:right}

/* specs — leader-dot index (Dir B, editorial) */
.ruz-ap .idx{display:flex;flex-direction:column;gap:12px;margin:0}
.ruz-ap .idx .irow{display:flex;align-items:baseline;gap:12px}
.ruz-ap .idx .ik{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.ruz-ap .idx .idot{flex:1 1 auto;border-bottom:1.5px dotted var(--line3);transform:translateY(-5px)}
.ruz-ap .idx .iv{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--rust);white-space:nowrap}

.ruz-ap .gtitle{font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:#9a8b76;margin:0 0 16px;display:flex;align-items:center;gap:14px}
.ruz-ap .gtitle::after{content:"";flex:1;height:1px;background:var(--line2)}

/* seal sizing (shared .ruz-seal from seal.css) */
.ruz-ap .a-hero .ruz-seal,
.ruz-ap .b-shot .ruz-seal,
.ruz-ap .c-shot .ruz-seal{--seal-size:118px;--seal-off:16px}
.ruz-ap .a-top[data-w="wide"] .a-hero .ruz-seal,
.ruz-ap .banner .ruz-seal,
.ruz-ap .stage .ruz-seal{--seal-size:124px;--seal-off:24px}
/* align the seal of a full-bleed banner/stage with the centered content edge */
.ruz-ap .banner .ruz-seal--tr,
.ruz-ap .stage .ruz-seal--tr{right:max(24px,calc(50vw - 540px + 24px))}

/* ===================================================================
   DIR A — ADAPTATIVO  (switch column count by image shape)
   =================================================================== */
.ruz-ap .a-top[data-w="tall"]{display:grid;grid-template-columns:minmax(0,0.84fr) 1fr;gap:46px;align-items:start}
.ruz-ap .a-top[data-w="tall"] .a-info{position:sticky;top:24px}
.ruz-ap .a-hero{position:relative}
.ruz-ap .a-hero img{width:100%;border-radius:4px;display:block;background:var(--img)}

.ruz-ap .a-top[data-w="wide"]{display:block}
.ruz-ap .a-top[data-w="wide"] .a-hero{margin-bottom:36px}
.ruz-ap .a-top[data-w="wide"] .a-hero img{max-height:540px;object-fit:cover;width:100%}
.ruz-ap .a-top[data-w="wide"] .a-body{display:grid;grid-template-columns:1.35fr 0.95fr;gap:54px;align-items:start}
.ruz-ap .a-top[data-w="wide"] .a-rail{position:sticky;top:24px}

.ruz-ap .a-info .av{margin-bottom:16px}
.ruz-ap .a-info .eyebrow{margin-bottom:9px;display:block}
.ruz-ap .a-info .title{margin-bottom:18px}
.ruz-ap .a-info .price{margin-bottom:22px;margin-right:24px}
.ruz-ap .a-info .desc{margin-bottom:22px}
.ruz-ap .a-info .specs{margin:0 0 28px}
.ruz-ap .a-rail .price{margin-bottom:22px;margin-right:24px}
.ruz-ap .a-rail .specs{margin-bottom:26px}

/* ===================================================================
   DIR B — EDITORIAL  (change hero TREATMENT)
   wide -> full-bleed banner w/ overlaid title; tall -> portrait + folio
   =================================================================== */
.ruz-ap .b-wide .banner{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:64vh;min-height:440px;max-height:680px;overflow:hidden;background:var(--img)}
.ruz-ap .b-wide .banner img{width:100%;height:100%;object-fit:cover}
.ruz-ap .b-wide .banner .ov{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(20,12,8,.82),rgba(20,12,8,.18) 55%,transparent);
  color:var(--paper);padding:80px 0 30px}
.ruz-ap .b-wide .ov-in{max-width:1080px;margin:0 auto;padding:0 32px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ruz-ap .b-wide .ov .av{color:var(--gold-soft);margin-bottom:14px}
.ruz-ap .b-wide .ov .title{color:var(--paper);max-width:18ch}
.ruz-ap .b-wide .ov .price{color:var(--paper);font-size:27px}
.ruz-ap .b-wide .ov .price .note{color:rgba(253,249,238,.78)}
.ruz-ap .b-wide .band{display:grid;grid-template-columns:1.25fr 0.95fr;gap:60px;margin-top:42px}
.ruz-ap .b-wide .band .lead{font-size:18px;line-height:1.5;color:var(--ink-soft);max-width:40ch}
.ruz-ap .b-wide .band .lead p:first-child::first-letter{-webkit-initial-letter:2;initial-letter:2;
  font-weight:700;color:var(--rust);margin-right:10px}
.ruz-ap .b-wide .band .feats{margin:24px 0 0}
.ruz-ap .b-wide .band .cta{margin-top:28px}

.ruz-ap .b-tall{display:grid;grid-template-columns:0.92fr 1fr;gap:56px;align-items:start}
.ruz-ap .b-tall .b-shot{position:relative}
.ruz-ap .b-tall .b-shot img{width:100%;display:block;background:var(--img)}
.ruz-ap .b-tall .folio{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:#9a8b76;margin:13px 2px 0;display:flex;justify-content:space-between}
.ruz-ap .b-tall .b-text{position:sticky;top:24px}
.ruz-ap .b-tall .b-text .bignum{font-family:var(--mono);font-size:clamp(46px,6vw,76px);line-height:.8;
  font-weight:500;color:var(--rust);letter-spacing:-0.02em;margin-bottom:18px}
.ruz-ap .b-tall .b-text .av{margin-bottom:14px}
.ruz-ap .b-tall .b-text .title{font-size:clamp(34px,4.4vw,56px);margin-bottom:18px}
.ruz-ap .b-tall .b-text .price{margin-bottom:22px}
.ruz-ap .b-tall .b-text .desc{margin-bottom:26px}
.ruz-ap .b-tall .b-text .idx{margin-bottom:28px;padding-top:24px;border-top:1.5px solid var(--ink)}

/* ===================================================================
   DIR C — VITRINA  (immersive image + floating paper panel)
   wide -> banner with panel overlapping bottom-left + stat tiles
   tall -> image right, panel overlapping its left edge
   =================================================================== */
.ruz-ap .c-wide .stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:60vh;min-height:420px;max-height:640px;overflow:hidden;background:var(--img)}
.ruz-ap .c-wide .stage img{width:100%;height:100%;object-fit:cover}
.ruz-ap .c-wide .panelrow{position:relative;display:flex;justify-content:flex-start}
.ruz-ap .c-panel{background:var(--paper);box-shadow:0 30px 70px -34px rgba(36,23,16,.6);
  padding:38px 40px;max-width:520px;position:relative;z-index:3;border:1px solid var(--line)}
.ruz-ap .c-wide .c-panel{margin-top:-128px}
.ruz-ap .c-panel .av{margin-bottom:14px}
.ruz-ap .c-panel .eyebrow{display:block;margin-bottom:9px}
.ruz-ap .c-panel .title{margin-bottom:16px}
.ruz-ap .c-panel .price{margin-bottom:18px}
.ruz-ap .c-panel .desc{margin-bottom:24px;font-size:14.5px}
.ruz-ap .c-panel .cta{width:100%;justify-content:center}
.ruz-ap .c-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);
  border:1px solid var(--line2);margin-top:40px}
.ruz-ap .c-tile{background:var(--app-bg);padding:20px 22px}
.ruz-ap .c-tile .tk{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#9a8b76;
  font-weight:700;margin-bottom:8px}
.ruz-ap .c-tile .tv{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-0.01em}

.ruz-ap .c-tall{display:grid;grid-template-columns:0.46fr 0.54fr;align-items:center}
.ruz-ap .c-tall .c-shot{grid-area:1/2/2/3;position:relative;z-index:1}
.ruz-ap .c-tall .c-shot img{width:100%;display:block;background:var(--img)}
.ruz-ap .c-tall .c-panel{grid-area:1/1/2/2;justify-self:start;margin-right:-90px;max-width:none}
.ruz-ap .c-tall .c-panel .specs{margin-top:20px}

/* ============ Top-block spacing wrappers ============ */
.ruz-ap .ap-top{margin-bottom:8px}
.ruz-ap .ap-tail{margin-top:52px}

/* ============ Gallery — one uniform grid for all directions ============ */
.ruz-ap .ruz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ruz-ap .ruz-card{position:relative;background:var(--img)}
.ruz-ap .ruz-card-img{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;display:block}
.ruz-ap .ruz-card-img picture{display:block;width:100%;height:100%}
.ruz-ap .ruz-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.ruz-ap .ruz-card:hover .ruz-card-img img{transform:scale(1.05)}
.ruz-ap .ruz-card-zoom{position:absolute;top:10px;right:10px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;background:rgba(20,12,8,.55);
  border-radius:50%;color:var(--paper);opacity:0;transition:opacity .2s}
.ruz-ap .ruz-card:hover .ruz-card-zoom{opacity:1}

/* ============ Related models (reuses catalogo.css .ruz-art-related styles) ==== */
.ruz-ap .ap-tail .ruz-art-related{margin-top:48px}

/* ============ Responsive ============ */
@media(max-width:860px){
  .ruz-ap .a-top[data-w="tall"],
  .ruz-ap .a-top[data-w="wide"] .a-body{grid-template-columns:1fr;gap:26px}
  .ruz-ap .a-top[data-w="tall"] .a-info,
  .ruz-ap .a-top[data-w="wide"] .a-rail{position:static}
  .ruz-ap .b-wide .band,
  .ruz-ap .b-tall{grid-template-columns:1fr;gap:28px}
  .ruz-ap .b-tall .b-text{position:static}
  .ruz-ap .b-wide .banner{height:auto;max-height:none;aspect-ratio:3/2}
  .ruz-ap .c-wide .stage{height:auto;max-height:none;aspect-ratio:3/2}
  .ruz-ap .c-tall{grid-template-columns:1fr}
  .ruz-ap .c-tall .c-shot,
  .ruz-ap .c-tall .c-panel{grid-area:auto}
  .ruz-ap .c-tall .c-panel{margin-right:18px;margin-top:-50px;margin-left:18px}
  .ruz-ap .ruz-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .ruz-ap .wrap{padding:0 18px}
  .ruz-ap .ruz-grid{grid-template-columns:repeat(2,1fr)}
  .ruz-ap .c-tiles{grid-template-columns:repeat(2,1fr)}
}