/* ============================================================
   Dizarro — page.css (páginas interiores: serviços, portfólio,
   projeto, sobre, contactos). Carrega depois de base.css.
   ============================================================ */

/* layout de página de serviço: prosa + coluna de spec */
.svc { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(1.5rem,5vw,3.5rem); align-items: start; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } }
.spec { border: 1px solid var(--line); position: sticky; top: calc(var(--nav-h) + 1rem); }
@media (max-width: 900px) { .spec { position: static; } }
.spec .row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .95rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; }
.spec .row:first-child { border-top: 0; }
.spec .row .k { color: var(--graphite); text-transform: uppercase; letter-spacing: .05em; }
.spec .row .v { color: var(--ink); text-align: right; }
.spec .cta { padding: 1rem .95rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }

/* grelha de capacidades numa página de serviço */
.caps { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.5rem; }
@media (max-width: 620px) { .caps { grid-template-columns: 1fr; } }
.caps .cap-i { background: var(--paper); padding: 1.1rem 1.2rem; }
.caps .cap-i b { font-family: var(--f-display); font-size: 1rem; display: block; margin-bottom: .3rem; }
.caps .cap-i span { font-size: .9rem; color: var(--graphite); }

/* pares serviço <-> outros serviços */
.svc-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 720px) { .svc-nav { grid-template-columns: 1fr 1fr; } }
.svc-nav a { background: var(--paper); padding: 1.1rem 1rem; font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--graphite); }
.svc-nav a:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--hivis); }
.svc-nav a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }

/* portfólio */
.pf-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.pf-filters button {
  font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .5rem .9rem; border: 1px solid var(--line); background: var(--paper); color: var(--graphite);
}
.pf-filters button[aria-pressed="true"], .pf-filters button:hover { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-ink); }
.pf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-item { display: block; border: 1px solid var(--line); background: var(--paper); position: relative; }
.pf-item .img { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; background:
  repeating-linear-gradient(135deg, var(--blueprint-soft) 0 8px, transparent 8px 16px),
  linear-gradient(160deg, var(--paper-2), var(--paper)); }
.pf-item .cap { padding: .8rem 1rem 1rem; }
.pf-item .cap b { font-family: var(--f-display); font-size: 1rem; display: block; }
.pf-item .cap span { font-family: var(--f-mono); font-size: .64rem; color: var(--graphite); text-transform: uppercase; letter-spacing: .05em; }
.pf-item .tape { position: absolute; top: .7rem; left: .7rem; font-family: var(--f-mono); font-size: .56rem; letter-spacing: .1em; background: var(--hivis); color: var(--hivis-ink); padding: .15rem .45rem; text-transform: uppercase; }
.pf-item:hover .cap b { color: var(--hivis); }
.pf-note { margin-top: 2rem; font-size: .9rem; color: var(--graphite); }
.pf-note a { box-shadow: inset 0 -1px 0 var(--hivis); }

/* projeto (detalhe) */
.pj-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.4rem; }
.pj-meta li { font-family: var(--f-mono); font-size: .78rem; color: var(--graphite); }
.pj-block { max-width: 68ch; margin-top: 2rem; }
.pj-block h2 { font-size: var(--t-2); margin-bottom: .5rem; text-transform: uppercase; }
.pj-block p { color: var(--graphite); }
.pj-hi { border: 1px solid var(--line); border-left: 3px solid var(--hivis); padding: 1.3rem 1.5rem; margin-top: 2rem; }
.pj-hi h3 { font-size: 1rem; margin-bottom: .6rem; }
.pj-hi li { padding: .35rem 0; font-size: .93rem; color: var(--graphite); }
.pj-hi li::before { content: "\2713 "; color: var(--hivis); }
.pj-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; margin-top: 2rem; }
.pj-gal img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border: 1px solid var(--line); }

/* sobre */
.about-lead { font-size: clamp(1.15rem,2.4vw,1.6rem); font-family: var(--f-display); font-weight: 700; max-width: 30ch; line-height: 1.2; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 1.5rem; }
@media (max-width: 820px) { .about-cols { grid-template-columns: 1fr; gap: 1.5rem; } }
.about-cols p { color: var(--graphite); }
.vlist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2rem; }
@media (max-width: 620px) { .vlist { grid-template-columns: 1fr; } }
.vlist div { background: var(--paper); padding: 1rem 1.2rem; }
.vlist b { font-family: var(--f-mono); color: var(--hivis); font-size: .7rem; letter-spacing: .05em; display: block; margin-bottom: .3rem; }
.vlist span { font-size: .92rem; color: var(--graphite); }

/* contactos */
.ct-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.5rem,5vw,3.5rem); align-items: start; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }
.ct-card { border: 1px solid var(--line); }
.ct-card .row { padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.ct-card .row:first-child { border-top: 0; }
.ct-card .row b { font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--graphite); display: block; margin-bottom: .3rem; }
.ct-card .row a, .ct-card .row p { font-size: 1rem; }
.ct-card .row a:hover { color: var(--hivis); }