/* sec-B.css: work (.wk-), reviews (.rev-), area (.ar-). Usa variables y clases de base.css */

/* ================== WORK: mosaico de fichas ================== */
.wk-title{margin-bottom:clamp(30px,4.5vw,56px)}
.wk-grid{display:grid;gap:clamp(26px,3.4vw,40px) var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-fig{margin:0;display:flex;flex-direction:column;min-width:0}
.wk-frame{position:relative}
.wk-ph{aspect-ratio:3/4;background:var(--slab-3);box-shadow:0 22px 44px -24px color-mix(in srgb,var(--ink) 55%,transparent)}
.wk-ph img{width:100%;height:100%;object-fit:cover}
.wk-cap{position:relative;z-index:6;display:block;max-width:calc(100% - 14px);margin:-16px 0 0 10px;font-size:.64rem;box-shadow:5px 5px 0 var(--orange)}
.wk-big{grid-column:1/-1}
.wk-big .wk-ph{aspect-ratio:4/5}
.wk-big img{object-position:50% 60%}
@media(min-width:620px){.wk-big .wk-ph{aspect-ratio:16/10}.wk-cap{font-size:.72rem;max-width:30ch}}
@media(min-width:900px){
  .wk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wk-big{grid-column:1/3;grid-row:1/3}
  .wk-big .wk-frame{flex:1 1 auto;min-height:420px}
  .wk-big .wk-ph{position:absolute;inset:0;aspect-ratio:auto}
}

/* ================== REVIEWS: hoja de obra firmada ================== */
.rev-grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:minmax(0,1fr);align-items:center}
.rev-sum h2{margin-bottom:.35em}
.rev-score{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 6px}
.rev-score b{font:900 clamp(4.6rem,11vw,8rem)/.85 var(--f-display);font-variation-settings:"wdth" 125;letter-spacing:-.04em;color:var(--txt-i)}
.rev-stars{display:inline-flex;gap:2px;color:var(--navy)}
.rev-stars svg{width:18px;height:18px;fill:currentColor}
.rev-big{color:var(--orange)}
.rev-big svg{width:clamp(22px,3vw,30px);height:clamp(22px,3vw,30px)}
.rev-count{font:600 .8rem/1.2 var(--f-display);font-variation-settings:"wdth" 100;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin:0 0 28px}
.rev-sheets{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rev-sheet{position:relative;grid-column:1/-1;background:var(--slab);color:var(--ink);padding:20px clamp(18px,2.4vw,30px) 24px;border-top:4px solid var(--navy);box-shadow:0 18px 36px -22px color-mix(in srgb,var(--ink) 70%,transparent)}
.rev-sheet::before{content:"";position:absolute;right:0;top:0;width:22px;height:22px;background:linear-gradient(225deg,var(--ink) 50%,var(--slab-3) 50%)}   /* esquina doblada de la hoja */
.rev-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding-right:20px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--slab-3)}
.rev-name{font:700 .88rem/1.2 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:.06em;text-transform:uppercase}
.rev-q{margin:0}
.rev-q p{margin:0;font-size:clamp(1.1rem,1.5vw,1.25rem);line-height:1.5}
.rev-q p::before{content:"\201C";color:var(--orange-d);font:800 1.5em/0 var(--f-display);margin-right:.08em;vertical-align:-.28em}
.rev-q p::after{content:"\201D";color:var(--orange-d);font:800 1.5em/0 var(--f-display);margin-left:.04em;vertical-align:-.28em}
.rev-bare{grid-column:span 1;min-width:0}
.rev-bare{padding-bottom:18px}
.rev-bare .rev-top{flex-direction:column;align-items:flex-start;padding-right:14px;margin-bottom:12px;padding-bottom:0;border-bottom:0;gap:8px}
.rev-tag{display:inline-block;font:700 .68rem/1 var(--f-display);font-variation-settings:"wdth" 100;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border:1px solid var(--navy);padding:5px 8px}
.rev-sheet{transition:transform .35s var(--ease),box-shadow .35s}
.rev-sheet:hover{transform:translateY(-3px)}
@media(min-width:900px){
  .rev-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media(max-width:420px){.rev-stars svg{width:15px;height:15px}.rev-big svg{width:22px;height:22px}}

/* ================== AREA: puntos sobre una cinta ================== */
.ar-head{max-width:960px;margin:0 auto clamp(40px,6vw,76px)}
.ar-head .lede{margin:0}
.ar-tape{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));--ar-in:calc(100%/14)}
.ar-tape::before{content:"";position:absolute;left:var(--ar-in);right:var(--ar-in);top:0;height:14px;color:var(--ink);background:
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px) left bottom/100% 14px no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) left bottom/100% 7px no-repeat;opacity:.5;border-bottom:2px solid var(--ink)}
.ar-stop{position:relative;text-align:center;padding:34px 6px 0}
.ar-pin{position:absolute;left:50%;top:-6px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--navy);border:4px solid var(--slab);box-shadow:0 0 0 2px var(--navy)}
.ar-home .ar-pin{background:var(--orange);box-shadow:0 0 0 2px var(--orange);width:30px;height:30px;margin-left:-15px;top:-8px}
.ar-county .ar-pin{background:var(--slab);box-shadow:0 0 0 2px var(--navy);border-color:var(--slab)}
.ar-name{display:block;font:800 clamp(1.05rem,1.55vw,1.4rem)/1.1 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:-.015em;text-wrap:balance}
.ar-home .ar-name{color:var(--orange-d)}
.ar-county .ar-name{font-weight:600;font-style:normal;color:var(--txt-mute)}
.ar-link{margin:clamp(40px,6vw,72px) 0 0}
.js .ar-stop.rv .ar-pin{transform:scale(.4);transition:transform .7s var(--ease);transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.js .ar-stop.rv.in .ar-pin{transform:none}
@media(max-width:899px){
  .ar-tape{grid-template-columns:minmax(0,1fr);gap:0;width:min(420px,100%);margin-inline:auto;padding-left:26px}
  .ar-tape::before{left:12px;right:auto;top:14px;bottom:14px;width:14px;height:auto;background:
    repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 40px) right top/14px 100% no-repeat,
    repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 8px) right top/7px 100% no-repeat;border-bottom:0;border-right:2px solid var(--ink)}
  .ar-stop{text-align:left;padding:12px 0 12px 30px;min-height:52px;display:flex;align-items:center}
  .ar-pin{left:-13px;top:50%;margin-top:-13px;margin-left:0}
  .ar-home .ar-pin{margin-top:-15px;left:-15px;top:50%}
  .ar-name{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.js .ar-stop.rv .ar-pin{transform:none}.rev-sheet:hover{transform:none}}