/* Dahir Soriano — overrides sobre el design system del estudio.
   Solo lo que el portfolio personal necesita encima de site.css. */

/* casos: imagen real en vez del placeholder punteado */
.csimg.has-img { border:0; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* strip de stats de la bio (home) */
.ds-stats { display:flex; flex-wrap:wrap; gap:48px; padding:40px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:8px; }
.ds-stat .big { font-family:var(--sans); font-weight:700; font-size:clamp(34px,4.4vw,56px); color:var(--acc); letter-spacing:-0.03em; line-height:1; }
.ds-stat .lab { font-family:var(--mono); font-size:11px; color:var(--fg-mute); letter-spacing:0.06em; margin-top:9px; text-transform:uppercase; }

/* tira de clientes / marcas */
.ds-clients { display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:34px; }
.ds-clients span { font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-faint); }

/* sitio personal: scroll lineal — el hero no se fija/desliza como en el estudio */
.scroll-content .hero-panel { position:relative; top:auto; height:auto; }

/* home: aire entre el texto y los botones, aunque crezca la altura de la sección */
.hero.page.hero-home { padding-top:148px; padding-bottom:112px; }
.hero-home .lead { margin-top:34px; }
.hero-home .cta { margin-top:52px; }

/* botón "Ver detalle" en cada tarjeta de caso — botón primario (caja lima) */
.cs-detail { margin-top:26px; }

/* ====== página de detalle de proyecto ====== */
/* imagen del proyecto sin recorte — el diseño se ve completo */
.pj-hero-img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.pj-imgsec { padding-top:0; }
.pj-galhead { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--acc); margin:0 0 26px; }
.pj-gimg { display:block; width:100%; height:auto; border:1px solid var(--line); margin-bottom:22px; }
.pj-gimg:last-child { margin-bottom:0; }

.pj-role { padding:0 0 34px; }
.pj-role h6 { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--acc); margin:0 0 10px; }
.pj-role p { font-size:17px; line-height:1.5; color:var(--fg); margin:0; max-width:70ch; }

.pj-block { padding:44px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:0.5fr 1.5fr; gap:44px; align-items:start; }
.pj-block h2 { font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.4vw,32px); letter-spacing:-0.02em; line-height:1.05; margin:0; color:var(--fg); }
.pj-block p { font-size:17px; line-height:1.66; color:var(--fg-mute); margin:0; max-width:72ch; }

/* prev / siguiente proyecto */
.pj-nav { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pj-navlink { display:flex; flex-direction:column; gap:11px; padding:26px; border:1px solid var(--line); transition:border-color .25s, background .25s; }
.pj-navlink:hover { border-color:var(--acc); background:rgba(198,241,53,0.04); }
.pj-navlink.next { text-align:right; align-items:flex-end; }
.pj-navlink .dir { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-faint); }
.pj-navlink:hover .dir { color:var(--acc); }
.pj-navlink .nm { font-family:var(--sans); font-weight:700; font-size:clamp(18px,2vw,24px); letter-spacing:-0.02em; line-height:1.05; color:var(--fg); }

@media (max-width:860px) {
  .pj-block { grid-template-columns:1fr; gap:14px; padding:32px 0; }
  .pj-nav { grid-template-columns:1fr; }
  .pj-navlink.next { text-align:left; align-items:flex-start; }
}

/* footers sin marquee (home/work/contact): aire bajo el © legal */
footer:not(:has(.foot-marquee)) { padding-bottom:56px; }

/* crédito sutil al estudio en el footer */
.studio-credit { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--fg-faint); }
.studio-credit a { color:var(--fg-mute); border-bottom:1px solid var(--line); transition:color .25s, border-color .25s; }
.studio-credit a:hover { color:var(--acc); border-color:var(--acc); }