*{margin:0;padding:0;box-sizing:border-box}
:root{
  --tinta:#2b2724; --tinta-suave:#6f6761; --linea:#e3ddd5;
  --papel:#ffffff; --fondo:#faf7f3; --acento:#b4603a; --acento-claro:#f0e3dc;
  --ancho:1200px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tinta:#ece7e2; --tinta-suave:#a79c94; --linea:#36302b;
    --papel:#1a1715; --fondo:#120f0e; --acento:#d98a62; --acento-claro:#2a211c;
  }
}
:root[data-theme="dark"]{
  --tinta:#ece7e2; --tinta-suave:#a79c94; --linea:#36302b;
  --papel:#1a1715; --fondo:#120f0e; --acento:#d98a62; --acento-claro:#2a211c;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--tinta);
  font:400 17px/1.7 "Source Serif 4",Georgia,"Times New Roman",serif}
.caja{max-width:var(--ancho);margin:0 auto;padding:0 18px}

/* ---------------------------------------------------------------- cabecera */
.cab{background:var(--papel);border-bottom:1px solid var(--linea)}
.cab__fila{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:18px 0}
.marca{font-family:"Source Sans 3",system-ui,sans-serif;font-size:19px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);text-decoration:none}
.marca em{font-style:normal;color:var(--acento)}
.menu{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;
  font-family:"Source Sans 3",system-ui,sans-serif}
.menu a{color:var(--tinta-suave);text-decoration:none;font-size:14px;letter-spacing:.07em;
  text-transform:uppercase;padding-bottom:3px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--tinta)}
.menu a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--acento)}

/* -------------------------------------------------------------------- hero */
.hero{background:var(--papel);border-bottom:1px solid var(--linea)}
.hero__in{padding:52px 0 46px;max-width:780px}
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.18;font-weight:400;
  letter-spacing:-.015em;margin-bottom:18px}
.hero p{font-size:clamp(17px,1.9vw,19.5px);color:var(--tinta-suave);max-width:60ch}
.raya{width:64px;height:3px;background:var(--acento);margin-bottom:24px}

/* ------------------------------------------------------------------ bandera */
/* Оригинальный баннер студии 960x684 с девизом «Xpresamos tus ideas». */
.bandera{background:#0f0d0c;border-bottom:1px solid var(--linea)}
.bandera img{display:block;width:100%;max-width:var(--ancho);margin:0 auto;height:auto}

/* ---------------------------------------------------------------- secciones */
.sec{padding:46px 0}
.sec--papel{background:var(--papel);border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea)}
.sec h2{font-size:clamp(22px,2.7vw,30px);font-weight:400;letter-spacing:-.01em;
  margin-bottom:10px}
.sec h3{font-family:"Source Sans 3",system-ui,sans-serif;font-size:17px;font-weight:600;
  margin-bottom:6px}
.intro{color:var(--tinta-suave);max-width:66ch;margin-bottom:28px}
.sec p+p{margin-top:14px}

/* ------------------------------------------------------------------ rejilla */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:26px}
.ficha{background:var(--papel);border:1px solid var(--linea);display:flex;
  flex-direction:column;overflow:hidden}
.ficha img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--fondo)}
.ficha__txt{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.ficha h3{margin-bottom:7px;line-height:1.35}
.ficha h3 a{color:var(--tinta);text-decoration:none}
.ficha h3 a:hover{color:var(--acento)}
.ficha p{font-size:15px;color:var(--tinta-suave);line-height:1.6}
.ficha__pie{margin-top:auto;padding-top:12px;font-family:"Source Sans 3",sans-serif;
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-suave)}

/* ------------------------------------------------------------------ galeria */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.galeria figure{margin:0;background:var(--papel);border:1px solid var(--linea)}
.galeria img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* ----------------------------------------------------------------- articulo */
.art{background:var(--papel);border-top:1px solid var(--linea)}
.art__in{max-width:760px;margin:0 auto;padding:44px 18px 48px}
.art__in p{margin-bottom:16px}
.art__fecha{font-family:"Source Sans 3",sans-serif;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:22px}
.art__fotos{margin:30px 0}
.art__fotos img{display:block;width:100%;height:auto;margin-bottom:14px;
  border:1px solid var(--linea)}

/* -------------------------------------------------------------------- lista */
.lista{border-top:1px solid var(--linea)}
.lista a{display:grid;grid-template-columns:1fr auto;gap:14px 22px;padding:14px 0;
  border-bottom:1px solid var(--linea);text-decoration:none;align-items:baseline}
.lista a:hover{background:var(--acento-claro)}
.lista__t{color:var(--tinta);font-size:16.5px}
.lista__m{font-family:"Source Sans 3",sans-serif;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);white-space:nowrap}

/* --------------------------------------------------------------------- pie */
.pie{background:var(--papel);border-top:1px solid var(--linea);padding:30px 0 36px;
  margin-top:10px}
.pie__fila{display:flex;gap:24px;flex-wrap:wrap;
  font-family:"Source Sans 3",system-ui,sans-serif}
.pie a{color:var(--tinta-suave);text-decoration:none;font-size:14px}
.pie a:hover{color:var(--tinta)}
.pie__nota{color:var(--tinta-suave);font-size:13.5px;margin-top:16px;max-width:72ch;
  font-family:"Source Sans 3",system-ui,sans-serif}

@media (max-width:640px){
  .sec{padding:34px 0}
  .hero__in{padding:36px 0 32px}
  .menu{gap:14px}
  .rejilla{grid-template-columns:1fr;gap:20px}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .art__in{padding:32px 18px 36px}
}