:root { --red:#b51612; --text:#161616; --muted:#5a5a5a; --line:#e9e9e9; --page:960px;
        /* PROVISIONAL: Archivo (Google Fonts, libre) imita el caracter de
           Aktiv Grotesk Ex, que es la del sitio actual pero tiene licencia de
           Adobe Fonts y no se puede auto-hospedar. Cuando llegue el kit de
           Adobe, basta cambiar el primer nombre de esta lista. */
        --texto:'Archivo','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--text); font-family:Arial,Helvetica,sans-serif; }
img { display:block; max-width:100%; height:auto; }

.page-nav { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:16px clamp(18px,3vw,28px); }
.page-nav a { color:var(--red); text-decoration:none; font-weight:700; font-size:12px; letter-spacing:.1em; }
.page-nav a:hover { text-decoration:underline; }


.page { font-stretch:110%; width:min(100% - 36px,var(--page)); margin:0 auto; padding:clamp(40px,6vw,80px) 0 clamp(70px,9vw,120px); }

.page h1 { font-family:var(--texto); font-weight:600; font-size:clamp(28px,3.9vw,46px); line-height:1.1; letter-spacing:-.005em; margin:0 0 clamp(34px,5vw,56px); }

.page__label { font-family:var(--texto); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--red);
  margin:clamp(44px,6vw,76px) 0 clamp(18px,2.4vw,28px); padding-bottom:10px; border-bottom:1px solid var(--line); }
.page h1 + .page__label { margin-top:0; }

.page p { font-family:var(--texto); font-weight:300; font-size:clamp(15px,1.2vw,17px); line-height:1.75; color:#242424; margin:0 0 1.15em; }
.page__closing { font-weight:400; color:var(--muted); }

.page__figure { width:100%; margin:clamp(34px,5vw,56px) 0; }
.page__figure--hero { margin:0 0 clamp(30px,4vw,48px); }

.clients { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(26px,3.4vw,48px); }
.clients__group h3 { font-family:var(--texto); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.clients__group ul { list-style:none; margin:0; padding:0; }
.clients__group li { font-family:var(--texto); font-weight:300; font-size:15px; line-height:1.68; color:#333; }

.gallery { margin-top:clamp(44px,6vw,76px); columns:3; column-gap:10px; }
.gallery img { width:100%; margin-bottom:10px; break-inside:avoid; }

/* Los cortes estan puestos para que ninguna foto se muestre mas ancha que su
   tamano real: parra17 es de solo 345 px y es la que manda. */
@media (max-width:700px) { .gallery { columns:2; } }
@media (max-width:480px) { .gallery { columns:1; } }


@media (max-width:700px) {
  .page { width:calc(100% - 36px); }
}