/* =====================================================================
   MASKAY GALLERY
   Grilla del mockup: 1440 de ancho, márgenes de 120, contenido 1200,
   12 columnas de 78px con gutters de 24px. Baseline de 12px.
   ===================================================================== */

:root{
  --blue:   #0000A6;
  --cream:  #F2F1EC;
  --white:  #FFFFFF;

  --ink:    var(--white);   /* color de texto de la página */
  --paper:  var(--blue);    /* fondo de la página */
  --bar:    var(--blue);    /* fondo de la barrita de nombre */
  --bar-ink:var(--white);

  /* logo: alto fijo, ancho derivado del ratio del archivo (125.83 / 70) */
  --logo-h: 70px;
  --logo-ratio: 1.7976;

  --gutter: 24px;
  --margin: 120px;
  --max:    1200px;

  --fs:     12px;
  --fs-lg:  24px;
  --lh:     1.4;
}

/* Páginas claras: exhibición, textos, about */
.paper-light{
  --paper: var(--cream);
  --ink:   var(--blue);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Space Mono", ui-monospace, "Courier New", monospace;
  font-weight:700;
  font-size:var(--fs);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; width:100%; height:100%; object-fit:cover; }

a{ color:inherit; text-decoration:none; }
a:focus-visible,
button:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

h1,h2,h3,p{ margin:0; }

/* ---------- estructura ---------------------------------------------- */

.wrap{
  width:100%;
  max-width:calc(var(--max) + var(--margin) * 2);
  margin:0 auto;
  padding:0 var(--margin);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
}

/* bloque de texto: entra una columna por cada lado (996px @1440) */
.measure{ grid-column:2 / span 10; }
.full{ grid-column:1 / -1; }

/* ---------- tipografía ---------------------------------------------- */

.title{ font-size:var(--fs-lg); line-height:1.05; letter-spacing:-0.01em; }
.subtitle{ font-size:var(--fs); line-height:1.4; margin-top:6px; }

.prose p{ max-width:none; }        /* el ancho lo da la grilla (996px @1440) */
.prose p + p{ margin-top:calc(var(--fs) * var(--lh)); }

.quote{
  font-style:italic;
  text-align:right;
  margin-left:auto;
  max-width:46ch;
}

/* ---------- logo ----------------------------------------------------- */

.logo{
  display:block;
  height:var(--logo-h);
  width:calc(var(--logo-h) * var(--logo-ratio));
  background-color:currentColor;          /* blanco sobre azul, azul sobre crema */
  -webkit-mask:url(../img/logo.svg) no-repeat left center / contain;
  mask:url(../img/logo.svg) no-repeat left center / contain;
}
.site-head .wrap,
.site-foot .wrap{ position:relative; }

.site-head .logo,
.site-foot .logo{
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
}

/* ---------- header --------------------------------------------------- */

.site-head{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
}
.site-head .grid{ align-items:center; min-height:80px; }

.nav{
  grid-column:2 / span 9;
  display:flex;
  gap:var(--gutter);
  flex-wrap:wrap;
}
.nav a{
  min-width:78px;
  padding:2px 0;
}
.nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:4px; }
@media (hover:hover){ .nav a:hover{ text-decoration:underline; text-underline-offset:4px; } }

.lang{
  grid-column:11 / span 2;
  justify-self:start;
  background:none; border:0; padding:2px 0;
  font:inherit; color:inherit; cursor:pointer;
}
.lang b{ font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.lang span{ opacity:.55; }

/* ---------- cabecera de página --------------------------------------- */

.page-head{ padding-top:12px; padding-bottom:24px; }
.page-head .measure{ grid-column:2 / span 10; }

/* ---------- secciones ------------------------------------------------ */

section{ margin-bottom:60px; }
.hero{ margin-bottom:24px; }

.band{
  grid-column:1 / -1;
  aspect-ratio:1200 / 588;
  background:var(--white);
  overflow:hidden;
}

/* ---------- tiles ---------------------------------------------------- */

.tile{
  position:relative;
  display:block;
  background:var(--white);
  overflow:hidden;
  aspect-ratio:1 / 1;
  cursor:pointer;
  border:0; padding:0; margin:0;
  font:inherit; color:inherit;
  text-align:left;
  width:100%;
}
.tile--s{ grid-column:span 2; }   /* 180px @1440 */
.tile--l{ grid-column:span 4; }   /* 384px @1440 */

.tile__name{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--bar);
  color:var(--bar-ink);
  font-size:var(--fs);
  line-height:1;
  padding:2px 2px 3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transition:opacity .1s linear;
}
@media (prefers-reduced-motion:reduce){ .tile__name{ transition:none; } }

@media (hover:hover){
  .tile:hover .tile__name,
  .tile:focus-visible .tile__name{ opacity:1; }
}
.tile.is-revealed .tile__name,
.tile.is-active .tile__name,
.tile:focus-visible .tile__name{ opacity:1; }

.tile.is-active{ outline:2px solid var(--ink); outline-offset:-2px; }

.tile__empty{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:var(--blue); opacity:.25;
  font-size:var(--fs);
}

/* ---------- exhibición: panel de obra -------------------------------- */

.work{ align-items:start; }

.work__media{ grid-column:1 / span 4; }
.work__info{ grid-column:5 / span 7; }   /* 690px @1440, alineado con el bloque de texto */



.slides{
  position:relative;
  aspect-ratio:1 / 1;
  background:var(--white);
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.slides::-webkit-scrollbar{ display:none; }
.slides.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.slide{ flex:0 0 100%; scroll-snap-align:start; position:relative; }

.dots:empty,
.dots.is-single{ display:none; }
.dots{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px;
  margin-top:24px;
}
.dots button{
  width:14px; height:14px; padding:0;
  border:0; border-radius:50%;
  background:var(--blue); opacity:.3;
  cursor:pointer;
  transition:opacity .1s linear;
}
.dots button[aria-current="true"]{ opacity:1; }
@media (hover:hover){ .dots button:hover{ opacity:.7; } }

.work__links{
  display:flex; gap:12px;
  margin-top:24px;
}
.work__links a{
  display:grid; place-items:center;
  width:25px; height:25px;
  color:var(--ink);
  font-size:10px; line-height:1;
}
.work__links svg{ width:20px; height:20px; display:block; }

.work__quote{ margin-top:48px; }

/* ---------- botón de consulta ---------------------------------------- */

.sale{
  display:inline-block;
  margin-top:calc(var(--fs) * var(--lh));
  padding:3px 5px 4px;
  background:var(--ink); color:var(--paper);
  border:0; font:inherit; line-height:1.2;
  cursor:pointer; text-align:left;
}
@media (hover:hover){ .sale:hover{ opacity:.85; } }

/* ---------- about ---------------------------------------------------- */

.meta{ margin-top:24px; }
.meta div + div{ margin-top:4px; }
.meta span{ opacity:.7; }

/* ---------- textos --------------------------------------------------- */

.text-item + .text-item{
  margin-top:60px;
  padding-top:60px;
  border-top:1px solid rgba(0,0,166,.25);
}

/* ---------- footer --------------------------------------------------- */

.site-foot{ padding:24px 0 60px; }
.site-foot .grid{ align-items:center; }
.site-foot .email{ grid-column:2 / span 3; }
.site-foot .social{
  grid-column:5 / span 3;
  display:flex; gap:12px;
}
.site-foot .social a{
  display:grid; place-items:center;
  width:25px; height:25px;
  color:var(--ink);
  font-size:10px; line-height:1;
}
.site-foot .social svg{ width:20px; height:20px; display:block; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width:1100px){
  :root{ --margin:48px; }
}

@media (max-width:860px){
  :root{ --margin:24px; --gutter:16px; }

  .grid{ grid-template-columns:repeat(6,1fr); }
  .site-head .grid{ grid-template-columns:auto 1fr auto; padding:16px 0; min-height:0; }
  .nav{ grid-column:2; gap:16px; }
  .nav a{ min-width:0; }
  .lang{ grid-column:3; justify-self:end; }

  .site-head .logo,
  .site-foot .logo{ position:static; transform:none; --logo-h:40px; }
  .site-head .logo{ grid-column:1; margin-right:16px; }
  .site-foot .logo{ grid-column:1 / -1; margin-bottom:16px; }
  .measure, .page-head .measure{ grid-column:1 / -1; }

  .tile--s{ grid-column:span 2; }   /* 3 por fila */
  .tile--l{ grid-column:span 3; }   /* 2 por fila */

  .work__media{ grid-column:1 / -1; }
  .work__info { grid-column:1 / -1; margin-top:24px; }
  .work__quote{ margin-top:24px; }
  .quote{ text-align:left; margin-left:0; }

  .site-foot .email{ grid-column:1 / -1; }
  .site-foot .social{ grid-column:1 / -1; margin-top:16px; }

  .band{ aspect-ratio:4 / 3; }
  section{ margin-bottom:40px; }
}

@media (max-width:560px){
  .grid{ grid-template-columns:repeat(4,1fr); }
  .site-head .logo{ --logo-h:34px; margin-right:12px; }
  .nav{ gap:12px; }
  .tile--s{ grid-column:span 2; }   /* 2 por fila */
  .tile--l{ grid-column:span 4; }   /* 1 por fila */
}

@media print{
  .site-head{ position:static; }
  .tile__name{ opacity:1; }
}

.shot{ grid-column:span 12; aspect-ratio:3/2; background:var(--white); overflow:hidden; }
.shot--1{ grid-column:span 12; aspect-ratio:1200/588; }
.shot--2{ grid-column:span 6; }
.shot--3{ grid-column:span 4; }
.shot--4{ grid-column:span 3; }
.links{ margin-top:1.4em; }
.links a{ display:block; text-decoration:underline; text-underline-offset:3px; margin-top:4px; word-break:break-all; }
@media (max-width:860px){
  .shot--2, .shot--4{ grid-column:span 3; }
  .shot--3{ grid-column:span 2; }
  .shot--1{ grid-column:span 6; }
}
@media (max-width:560px){
  .shot--2{ grid-column:span 4; }
  .shot--3, .shot--4{ grid-column:span 2; }
  .shot--1{ grid-column:span 4; }
}

/* ---------- slider sin recorte (exhibiciones con `fit: true`) --------- */

.slides--fit{ background:transparent; }
.slides--fit img{ object-fit:contain; }

.divided{ border-top:1px solid currentColor; padding-top:20px; }

/* en touch los nombres siempre se ven */
@media (hover:none){
  .tile__name{ opacity:1; }
}