/* ==========================================================================
   SAK Gallery — stylesheet
   Replace every element with class starting "placeholder-" or "ph-" with a
   real <img> once photography/artwork assets are ready. Search "REEMPLAZAR"
   to find every spot that needs real content.
   ========================================================================== */

:root{
  --teal-900:#1a3733;
  --teal-800:#1e3d3a;
  --teal-700:#24463f;
  --teal-600:#2b4f45;
  --teal-200:#a9c9bd;
  --teal-100:#cfe0d8;
  /* "Muro de museo": UN solo color de fondo y UN color de texto para todo
     el sitio (editables desde admin.html, con override opcional por
     colección). common.js pone los valores reales como propiedades en
     línea sobre <html> (o sobre un bloque puntual, en el home); los de
     aquí son solo el respaldo antes de que corra el JS. */
  --wall:#3a555b;
  --wall-text:#ffffff;
  --wall-text-muted:rgba(255,255,255,0.72);
  --wall-text-faint:rgba(255,255,255,0.5);
  --wall-line:rgba(255,255,255,0.18);

  /* El resto del sitio hereda del muro — así un solo cambio en admin.html
     tiñe todo: encabezado, home, colecciones, artistas, pie de página. */
  --ink:var(--wall-text);
  --ink-soft:var(--wall-text-muted);
  --ink-faint:var(--wall-text-faint);
  --paper:var(--wall);
  --line:var(--wall-line);
  --teal-800:var(--wall);
  --teal-900:var(--wall);

  /* Color fijo y oscuro para las pocas superficies que SIEMPRE deben verse
     claras sin importar el muro elegido: el menú desplegable de Colecciones
     y los campos del formulario de contacto. */
  --fixed-ink:#1c211f;

  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --max-width:1320px;
  --gutter:64px;
}

/* Walking from one room to another: the wall colors glide (0.5 s) when the
   previous page had a different one (common.js adds .wall-fade). Registered
   as colors so that everything painted with them fades together. */
@property --wall{ syntax:'<color>'; inherits:true; initial-value:#3a555b; }
@property --wall-text{ syntax:'<color>'; inherits:true; initial-value:#ffffff; }
@property --wall-text-muted{ syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,0.72); }
@property --wall-text-faint{ syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,0.5); }
@property --wall-line{ syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,0.18); }
html.wall-fade{
  transition:--wall .5s ease, --wall-text .5s ease, --wall-text-muted .5s ease,
             --wall-text-faint .5s ease, --wall-line .5s ease;
}
@media (prefers-reduced-motion: reduce){ html.wall-fade{ transition:none; } }

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.cap, .eyebrow, .category-label, .section-title span:first-child,
.view-all, .view-details, .btn{
  text-transform:uppercase;
  letter-spacing:0.12em;
}

/* ---------- Header ---------- */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:10;
  padding-block:20px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  color:var(--wall-text);
  letter-spacing:0.04em;
}
.logo span{
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--wall-text-muted);
  margin-left:6px;
  font-weight:500;
}
.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  position:relative; padding-block:4px;
  font-size:12px; color:var(--wall-text); font-weight:500;
  text-transform:uppercase; letter-spacing:0.12em; white-space:nowrap;
}
/* Current page / hover: a thin underline, like a gallery label. */
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }
/* Separates the collections from Artistas / Nosotros / Contacto. */
.nav-sep{ width:1px; height:14px; background:var(--wall-text-muted); opacity:.6; }
@media (max-width: 1180px) and (min-width: 861px){
  .main-nav{ gap:20px; }
  .main-nav a{ font-size:11.5px; letter-spacing:0.08em; }
}
.header-actions{ display:flex; align-items:center; gap:16px; }

/* Solid variant: for pages with no dark hero behind the header
   (Contacto, Nosotros) so the white nav text stays legible. */
.site-header.solid{
  position:relative;
  background:var(--teal-800);
  padding-block:20px;
}

.lang-toggle{
  white-space:nowrap;
  background:transparent; border:1px solid var(--wall-text-muted); color:var(--wall-text);
  font-size:11px; font-weight:600; letter-spacing:0.08em; padding:6px 10px;
  border-radius:2px;
}
.lang-toggle:hover{ background:var(--wall-line); }
.icon-btn{
  background:none; border:none; color:var(--wall-text);
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px;
}
.menu-toggle{ display:none; }

/* Side-panel menu (☰): on phones, and on any screen where the one-line
   menu doesn't fit (common.js adds .compact to the header in that case). */
.site-header.compact .main-nav,
.site-header.compact-m .main-nav{
  position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(320px, 80vw);
  background:var(--wall); flex-direction:column; align-items:flex-start; justify-content:center;
  gap:28px; padding:40px; transform:translateX(100%); z-index:40;
  /* closed: no shadow over the page and not reachable with the keyboard */
  visibility:hidden; box-shadow:none;
  transition:transform .3s ease, visibility 0s linear .3s, box-shadow .3s ease;
}
.site-header.compact .main-nav.open,
.site-header.compact-m .main-nav.open{
  transform:translateX(0); visibility:visible;
  box-shadow:-20px 0 60px rgba(0,0,0,0.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.site-header.compact .main-nav a,
.site-header.compact-m .main-nav a{ font-size:14px; }
.site-header.compact .menu-toggle,
.site-header.compact-m .menu-toggle{ display:inline-flex; }
.site-header.compact .nav-sep,
.site-header.compact-m .nav-sep{ width:40px; height:1px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:0;
  background:var(--wall);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  width:100%;
  /* the header floats over the hero: leave room for the logo (admin: its height) */
  padding-block:calc(var(--logo-h, 88px) + 56px) 48px;
}
.hero-text{ display:flex; flex-direction:column; gap:20px; max-width:800px; }
.eyebrow{ font-size:13px; color:var(--wall-text-muted); font-weight:500; }
.hero-text h1{
  font-size:clamp(38px, 5.5vw, 62px);
  line-height:1.08;
  color:var(--wall-text);
  font-weight:500;
}
.btn{
  align-self:flex-start;
  margin-top:6px;
  border:1px solid var(--wall-text-muted);
  color:var(--wall-text);
  padding:14px 26px;
  font-size:12px;
  background:transparent;
  transition:background .2s ease, color .2s ease;
}
.btn-outline:hover{ background:var(--wall-text); color:var(--fixed-ink); }

.hero-visual{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}
/* Whatever width admin sets, the icon never grows taller than ~62% of the
   screen, so the collections below always start close to the fold. */
.hero-visual img{ max-height:62vh; object-fit:contain; }
.hero-icon-spin{
  animation:hero-icon-spin 9s linear infinite;
  transform-style:preserve-3d;
  backface-visibility:visible;
}
@keyframes hero-icon-spin{
  from{ transform:rotateY(0deg); }
  to{ transform:rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-icon-spin{ animation:none; }
}
/* Line under the headline («Galería virtual · …», editable in admin). */
.hero-note{
  margin:0; flex:0 0 auto; max-width:300px; padding-left:22px;
  border-left:1px solid var(--wall-text-muted);
  font-size:15px; line-height:1.6; color:var(--wall-text-muted); letter-spacing:0.02em;
}
.hero-note a{ color:var(--wall-text); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

/* «Vitrina» on the home page: three works under the headline, each whole and
   framed, resting on one line like pieces hung on a wall. With it, the
   image beside the headline (the logo) is shown smaller. */
.hero.has-strip{ flex-direction:column; align-items:stretch; }
.hero.has-strip .hero-inner{ padding-block:calc(var(--logo-h, 88px) + 56px) 0; }
.hero.has-strip .hero-visual img{ max-height:min(26vh, 240px); }
.hero-strip{
  --strip-h:clamp(170px, 30vh, 260px); --mat:10px;
  display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:40px;
  width:100%; max-width:min(var(--max-width), calc(var(--n, 3) * 420px + 2 * var(--gutter)));
  padding-block:40px 72px;
}
.hero-strip[hidden]{ display:none; }
.strip-card{ display:block; min-width:0; text-align:center; }
.strip-card.no-mat{ --mat:0px; }
.strip-media{ display:flex; align-items:flex-end; justify-content:center; height:var(--strip-h); container-type:size; }
.strip-frame{
  display:block; background:#fdfcf9; padding:var(--mat);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  transition:transform .5s ease; transform-origin:bottom center;
}
.strip-card.no-mat .strip-frame{ background:none; }
.strip-frame .art-img{ display:block; width:auto; height:auto; max-width:calc(100cqw - 2 * var(--mat)); max-height:calc(100cqh - 2 * var(--mat)); }
.strip-frame .art-img[style*="--iw"]{
  width:min(calc(var(--iw) * 1px), calc(100cqw - 2 * var(--mat)), calc((100cqh - 2 * var(--mat)) * var(--iw) / var(--ih)));
}
.strip-card:hover .strip-frame{ transform:translateY(-4px); }
.strip-title{ display:block; margin-top:16px; font-size:14.5px; font-weight:600; color:var(--wall-text); overflow-wrap:break-word; }
.strip-artist{ display:block; margin-top:2px; font-size:12.5px; color:var(--wall-text-muted); overflow-wrap:break-word; }
@media (prefers-reduced-motion: reduce){ .strip-frame{ transition:none; } }

.placeholder-shape{
  /* REEMPLAZAR: sustituir por <img src="obra-escultura.jpg" alt="..."> */
  width:220px; height:440px;
  border-radius:130px 130px 130px 40px / 220px 220px 60px 220px;
  background:linear-gradient(160deg,#c9b48a,#8f7654 60%,#6b5a3d);
  box-shadow:0 40px 80px rgba(0,0,0,0.35);
}

/* ---------- Per-category block (Home) ----------
   One block per category (up to 6): big title, a single "Obras Destacadas"
   label, a teaser grid of featured artworks (photo + title + artist only —
   mark artworks featured:true in content.js/admin.html to control which
   ones show, e.g. per marketing season), and a link into the full
   collection page. */
.category-block{
  /* each room reads its own text color (not the page's): re-derive the shortcuts here */
  --ink:var(--wall-text); --ink-soft:var(--wall-text-muted); --ink-faint:var(--wall-text-faint); --line:var(--wall-line);
  padding:64px 0;
  background:var(--wall);
  border-bottom:1px solid var(--line);
}
.category-block:first-child{ padding-top:64px; }
.category-block:last-child{ border-bottom:none; padding-bottom:88px; }

/* On PC, the collections sit side by side in one row (one column per
   collection) instead of stacked — the "muro de museo" reads left to
   right, like rooms along a hallway. On mobile they stay stacked, one
   under another, which is friendlier for a narrow screen. */
@media (min-width:861px){
  #collections{
    display:flex;
    align-items:stretch;
  }
  .category-block{
    flex:1 1 0;
    min-width:0;
    padding:64px 0;
    border-bottom:none;
    border-left:1px solid var(--line);
  }
  .category-block:first-child{ border-left:none; padding-top:64px; }
  .category-block:last-child{ padding-bottom:64px; }
  .category-block .container{
    max-width:none;
    padding-inline:28px;
  }
  .category-block-grid{ flex-direction:column; align-items:center; }
}
/* «Disciplinas en sala» title, between the hero and the discipline columns */
.disciplines-heading{
  background:var(--wall);
  text-align:center;
  padding:44px var(--gutter) 28px;
}
/* Size and color can be changed in admin (Datos del sitio): --disc-title-s
   is a multiplier of the normal size, --disc-title-c a chosen color. */
.disciplines-heading h2{
  font-family:var(--font-display);
  font-size:calc(clamp(28px, 3.4vw, 44px) * var(--disc-title-s, 1));
  font-weight:500;
  color:var(--disc-title-c, var(--wall-text));
  letter-spacing:0.01em;
}
.disciplines-heading h2::after{
  content:""; display:block; width:56px; height:1px; margin:18px auto 0;
  background:var(--disc-title-c, var(--wall-text-muted));
}

/* Each discipline's column: everything centered in its space */
.category-block .container{ text-align:center; }

.category-block-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 3.2vw, 40px);
  font-weight:600;
  color:var(--ink);
}
/* «Artistas destacados»: text, size and color editable in admin */
.category-block-sub{
  display:block;
  margin-top:8px;
  font-size:calc(12px * var(--featured-s, 1)); font-family:var(--featured-f, inherit); font-weight:600; color:var(--featured-c, var(--ink-faint));
  text-transform:uppercase; letter-spacing:0.12em;
}
/* Works of a discipline, centered. Each work's size can be enlarged in
   admin (--s, 100%–160% of the normal size), but never beyond the width of
   its discipline's column (or of the phone screen). */
.category-block-grid{
  --teaser-base:220px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  margin-top:36px;
}
.empty-note{ color:var(--ink-faint); font-size:13px; }
.teaser-card{ display:block; width:min(100%, calc(var(--teaser-base) * var(--s, 1))); }
/* Thumbnails: every photo sits WHOLE (never cropped) inside a square
   space, resting on a common baseline like pieces hung on one wall —
   horizontal and vertical works line up and their titles stay aligned. */
/* The photo is as wide as the card allows, and at most as tall as the
   card's (possibly enlarged) size. Photos rest on a common bottom line: the
   page script makes the photo spaces of the same row equally tall, so the
   titles under them stay aligned across disciplines. */
.teaser-media{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.teaser-media .art-img{
  display:block; width:auto; height:auto; max-width:100%;
  max-height:calc(var(--teaser-base) * var(--s, 1));
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
}
.teaser-media .art-placeholder{ height:calc(var(--teaser-base) * var(--s, 1)); aspect-ratio:4 / 5; max-width:100%; }
.artist-card-media .art-img{
  display:block; width:auto; height:auto; max-width:100%; max-height:100%;
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
}
.artist-card-media .art-placeholder{ height:100%; aspect-ratio:4 / 5; max-width:100%; }
.teaser-media img{ transition:transform .5s ease; transform-origin:bottom center; }
.teaser-card:hover .teaser-media img{ transform:scale(1.03); }
.teaser-text{ display:block; }
.teaser-title{
  display:block; margin-top:14px; font-size:14.5px; font-weight:600; color:var(--ink);
}
.teaser-artist{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.category-block-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:32px;
  font-size:calc(11px * var(--explore-s, 1)); font-family:var(--explore-f, inherit); font-weight:600; color:var(--explore-c, var(--wall-text));
  text-transform:uppercase; letter-spacing:0.1em;
}
.arrow{ font-size:15px; transition:transform .2s ease; }
.category-block-link .arrow{ font-size:calc(15px * var(--explore-s, 1)); }
.category-block-link:hover .arrow{ transform:translateX(3px); }

/* ---------- Artist / people cards (category page, up to 4 per category) ---------- */
.artist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:28px;
}
.artist-card{ display:block; }
.artist-card-media{
  height:360px;
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.artist-card-name{
  margin-top:16px; font-size:18px; font-weight:600; color:var(--ink);
}
.artist-card-cta{ font-size:12px; color:var(--ink-soft); margin-top:2px; display:block;
  text-transform:uppercase; letter-spacing:0.1em; }

/* ---------- Page intro (Artistas, and any simple text-header page) ---------- */
.page-intro{
  padding:160px var(--gutter) 24px;
  max-width:720px;
}
.page-intro h1{ font-size:clamp(30px,4vw,44px); }
.page-intro p{ margin-top:14px; font-size:15px; color:var(--ink-soft); }

/* ---------- Legal pages (Privacidad, Términos) ---------- */
.legal-page{ padding:160px var(--gutter) 96px; max-width:720px; margin:0 auto; }
.legal-page h1{ font-size:clamp(30px,4vw,42px); }
.legal-page h3{
  margin-top:36px; font-size:18px; font-weight:600; color:var(--ink);
}
.legal-page p{ margin-top:12px; font-size:15px; line-height:1.7; color:var(--ink-soft); }

/* ---------- All-artists list (Artistas) ---------- */
.artist-list{ display:flex; flex-direction:column; gap:64px; }
.artist-list-card{
  display:grid;
  grid-template-columns:min(calc(280px * var(--ps, 1)), 45%) 1fr;
  gap:36px;
  align-items:start;
  padding-bottom:64px;
  border-bottom:1px solid var(--line);
}
.artist-list-card:last-child{ border-bottom:none; padding-bottom:0; }
.artist-list-card{ scroll-margin-top:24px; }
/* Artist photo shown whole — portrait, landscape or a logo, never cropped. */
.artist-list-media{ display:block; }
.artist-list-media .art-img{ display:block; width:100%; height:auto; }
.artist-list-media .art-placeholder{ aspect-ratio:4 / 5; }
.artist-list-cat{
  font-size:11px; font-weight:600; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.12em;
}
.artist-list-content h2{
  font-size:clamp(22px,2.6vw,30px); font-weight:600; margin-top:6px;
}
.artist-list-bio{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:560px; }
.artist-list-bio p + p{ margin-top:12px; }
.achievements-label{
  display:block; margin-top:20px; font-size:11px; font-weight:600; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.1em;
}
.achievements-list{ margin:8px 0 0; padding-left:18px; }
.achievements-list li{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
.artist-list-content .view-details{
  display:inline-block; margin-top:20px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--wall-text);
}

/* ---------- Artist page ----------
   The whole page — breadcrumb, name header, every work, and the closing
   bio — shares ONE flat background color (site.gallery.wallColor) and ONE
   text color (site.gallery.textColor), both set from content.js/admin.html
   as CSS custom properties (see the inline <style> common.js injects).
   No photos or gradients here — a consistent gallery wall throughout. */
.breadcrumb{
  display:block; padding:24px var(--gutter) 0; font-size:12px;
  background:var(--wall); color:var(--wall-text-muted);
  text-transform:uppercase; letter-spacing:0.1em;
}
.breadcrumb:hover{ color:var(--wall-text); }
.artist-hero{
  display:flex; align-items:center;
  background:var(--wall);
  padding:40px 0 8px;
}
.artist-hero-content{ padding:0 var(--gutter); max-width:760px; }
.artist-hero-content h1{ font-size:clamp(32px,4.5vw,52px); color:var(--wall-text); font-weight:500; }
/* Short presentation (only when written in admin): the artist's photo, whole,
   beside their name and one line. */
.artist-hero-content.with-intro{ display:flex; align-items:center; gap:24px; max-width:860px; }
.artist-intro-photo[hidden]{ display:none; }
.artist-intro-photo{ flex:none; width:112px; height:112px; display:flex; align-items:center; justify-content:center; container-type:size; }
.artist-intro-photo .art-img{ display:block; width:auto; height:auto; max-width:100cqw; max-height:100cqh; box-shadow:0 10px 24px rgba(0,0,0,0.3); }
.artist-intro-photo .art-img[style*="--iw"]{ width:min(100cqw, calc(100cqh * var(--iw) / var(--ih))); }
.artist-intro-text{ min-width:0; }
.artist-intro{ margin:10px 0 0; max-width:60ch; font-size:16px; line-height:1.6; color:var(--wall-text-muted); }
.intro-bio{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--wall-text);
  text-transform:uppercase; letter-spacing:0.12em;
  border-bottom:1px solid var(--wall-text-muted); padding-bottom:2px;
}
.intro-bio:hover{ border-bottom-color:var(--wall-text); }

/* Each work opens in the «vista ampliada» (same look on the page). */
.zoom-link{ display:block; cursor:zoom-in; }
.zoom-link:focus-visible{ outline:2px solid var(--wall-text); outline-offset:6px; }

/* ---------- Vista ampliada (artist page) ---------- */
html.lb-open{ overflow:hidden; }
.lb{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column;
  background:#0d0f0f; color:#f3f1ec;
}
.lb[hidden]{ display:none; }
.lb-stage{
  flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
  display:flex; align-items:center; justify-content:center;
  padding:calc(60px + env(safe-area-inset-top, 0px)) 72px 8px;
}
.lb-stage img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:zoom-in; }
.lb.zoomed .lb-stage{ display:block; padding:0; }
.lb.zoomed .lb-stage img{ max-width:none; max-height:none; margin:auto; cursor:zoom-out; }
.lb-bar{ padding:10px 72px calc(16px + env(safe-area-inset-bottom, 0px)); text-align:center; }
.lb-cap{ margin:0; font-size:13.5px; line-height:1.5; color:rgba(243,241,236,0.82); }
.lb-cap b{ font-family:var(--font-display); font-size:19px; font-weight:600; color:#f3f1ec; }
.lb-count{ margin-left:8px; font-size:11.5px; letter-spacing:0.1em; color:rgba(243,241,236,0.7); }
.lb-hint{ margin:4px 0 0; font-size:11.5px; color:rgba(243,241,236,0.62); }
.lb.zoomed .lb-hint{ visibility:hidden; }
.lb-btn{
  position:absolute; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; padding:0;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); color:#f3f1ec;
  font-size:26px; line-height:1;
}
.lb-btn:hover{ background:rgba(255,255,255,0.18); }
.lb-btn:focus-visible{ outline:2px solid #f3f1ec; outline-offset:2px; }
.lb-btn[hidden]{ display:none; }
.lb-close{ top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; }
.lb-prev{ left:14px; top:50%; transform:translateY(-50%); }
.lb-next{ right:14px; top:50%; transform:translateY(-50%); }
.lb.zoomed .lb-prev, .lb.zoomed .lb-next{ display:none; }
@media (max-width: 380px){
  .hero.has-strip .hero-visual img{ max-height:110px; }
  .hero-strip{ --strip-h:120px; }
}
@media (max-width: 600px){
  .lb-stage{ padding:calc(62px + env(safe-area-inset-top, 0px)) 8px 4px; }
  .lb-prev, .lb-next{ top:auto; transform:none; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lb-bar{ padding-inline:66px; }
}

/* Bio + achievements repeated at the end of the artist's works scroll
   (gallery standard: a closing note after the full body of work). */
.artist-bio-outro{
  padding:40px var(--gutter) 96px;
  background:var(--wall);
}
.artist-bio-outro .container{ max-width:720px; }
.artist-bio-outro h2{
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,32px);
  font-weight:600; color:var(--wall-text);
}
.artist-bio-outro p{ margin-top:16px; font-size:16px; line-height:1.7; color:var(--wall-text-muted); }
.artist-bio-outro .achievements-list{ margin-top:20px; }
.artist-bio-outro .achievements-list li{ color:var(--wall-text-muted); }
.artist-bio-outro .container{ text-align:center; }
.bio-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--wall-text);
  text-transform:uppercase; letter-spacing:0.12em;
  padding-bottom:4px; border-bottom:1px solid var(--wall-text-muted);
}
.bio-link:hover{ border-bottom-color:var(--wall-text); }
.bio-link[hidden]{ display:none; }
.bio-link:hover .arrow{ transform:translateX(3px); }
/* «Ver biografía» and «Cómo comprar» side by side, centered (one under
   the other on phones). */
.outro-links .bio-link{ margin-inline:18px; }
@media (max-width: 480px){
  .outro-links .bio-link + .bio-link:not([hidden]){ display:flex; width:fit-content; margin:20px auto 0; }
}

/* Sale status (admin: Disponible / Reservada / Vendida): a small mark next
   to the price, the way galleries mark works on the wall — a red dot for
   sold, a ring for reserved. */
.slide-status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--wall-text);
  text-transform:uppercase; letter-spacing:0.08em;
}
.slide-status::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; background:#d64541; }
.slide-status.reserved::before{ background:transparent; box-shadow:inset 0 0 0 2px currentColor; }

/* ---------- Artist page: one full-screen slide per work ----------
   Gallery-standard presentation: the whole piece framed (never cropped —
   object-fit:contain), title, price, a WhatsApp inquiry link, and the full
   ficha (técnica · medidas · año). Scroll to move between works; each
   section is a full viewport on both desktop and mobile. */
.artwork-slide{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:56px var(--gutter) 72px;
  background:var(--wall);
}
/* The white mat hugs each work at its own proportions: a horizontal piece
   gets a wide frame, a vertical one a tall frame — never cropped, never
   floating in empty white bands. The caption takes the frame's width. */
.artwork-piece{
  margin:0;
  width:fit-content; max-width:100%; min-width:min(100%, 340px);
  display:flex; flex-direction:column; gap:26px;
}
.artwork-frame .art-img{
  display:block; width:auto; height:auto;
  max-width:min(1000px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px)));
  max-height:min(72vh, 700px);
}
.artwork-frame.is-placeholder{ width:min(720px, calc(100vw - 2 * var(--gutter))); height:min(60vh, 560px); }
/* Size chosen per work in admin: Grande (default, the max above), Mediano, Pequeño */
.artwork-frame.size-m .art-img{ max-width:min(780px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px))); max-height:min(58vh, 560px); }
.artwork-frame.size-s .art-img{ max-width:min(560px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px))); max-height:min(44vh, 420px); }
/* Without the white mat (for photos that already have their own frame/background) */
.artwork-frame.no-mat{ padding:0; background:none; }
.artwork-frame.is-placeholder .art-placeholder{ width:100%; height:100%; }
.artwork-frame{
  width:fit-content;
  max-width:100%;
  background:#fdfcf9;
  padding:20px;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
.artwork-slide-caption{ width:0; min-width:100%; color:var(--wall-text); }
.artwork-slide-caption h2{ font-size:clamp(22px, 2.6vw, 30px); color:var(--wall-text); font-weight:500; }
.artwork-slide-row{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:14px;
}
.slide-ask{
  display:inline-flex; align-items:center; gap:6px;
  padding-block:13px; margin-block:-13px;      /* bigger touch area, same look */
  font-size:12.5px; font-weight:600; color:var(--wall-text-muted);
  text-decoration:underline; text-underline-offset:3px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.slide-ask:hover{ color:var(--wall-text); }
.slide-price{ font-size:15px; font-weight:600; color:var(--wall-text); }
.artwork-slide-meta{ margin-top:8px; font-size:12.5px; color:var(--wall-text-muted); }
.artwork-slide-count{ display:block; margin-top:22px; font-size:11px; color:var(--wall-text-muted); letter-spacing:0.1em; }

/* ---------- Artist page, «una obra a la vez» (admin: Datos del sitio → Página del
   artista, or per artist) ----------
   No scrolling through the works: the works share ONE space (stacked in the
   same grid cell), the current one fades out slowly and the next fades in,
   with a «Ver siguiente obra» button underneath. The photo's maximum height
   (--fit-mh) is measured by the page so frame + caption + button always fit
   the screen. Seconds of each fade: --wf (admin). */
.is-single .artist-hero{ padding:6px 0 0; }
.is-single .artist-hero-content,
.is-single .artist-hero-content.with-intro{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px; max-width:none; }
.is-single .artist-hero-content h1{ font-size:clamp(22px,2.4vw,30px); }
.is-single .artist-intro-photo, .is-single .artist-intro{ display:none; }
.is-single .artist-intro-text{ display:contents; }
.is-single .breadcrumb{ padding-top:10px; }
.hero-bio{
  font-size:11.5px; font-weight:600; color:var(--wall-text-muted);
  text-transform:uppercase; letter-spacing:0.1em; white-space:nowrap;
}
.hero-bio:hover{ color:var(--wall-text); }
.hero-bio[hidden]{ display:none; }
.works-stage{ display:grid; background:var(--wall); }
.works-stage > .artwork-slide{
  grid-area:1/1; padding:10px var(--gutter) 0; gap:14px;
  opacity:0; visibility:hidden; pointer-events:none;
}
.works-stage > .artwork-slide.is-on{ opacity:1; visibility:visible; pointer-events:auto; }
.works-stage .artwork-piece{ gap:16px; }
.works-stage .artwork-slide-count{ display:none; }
.works-stage .artwork-slide-caption h2{ font-size:clamp(20px, 2.2vw, 26px); }
.works-stage .artwork-slide-row{ margin-top:8px; }
.works-stage .artwork-slide-meta{ margin-top:8px; }
.works-stage .artwork-frame{ --mh:var(--fit-mh, 62vh); padding:16px; }
.works-stage .artwork-frame.size-m{ --mh:calc(var(--fit-mh, 62vh) * 0.8); }
.works-stage .artwork-frame.size-s{ --mh:calc(var(--fit-mh, 62vh) * 0.64); }
.works-stage .artwork-frame .art-img,
.works-stage .artwork-frame.size-m .art-img,
.works-stage .artwork-frame.size-s .art-img{ max-height:var(--mh); }
.works-stage .artwork-frame.is-placeholder{ height:var(--mh); }
.works-nav{
  background:var(--wall); display:flex; align-items:center; justify-content:center; gap:18px;
  padding:14px var(--gutter) 18px;
}
.works-next, .works-prev{
  font:inherit; cursor:pointer; color:var(--wall-text); background:none;
  border:1px solid var(--wall-text-muted); border-radius:2px;
}
.works-next{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 22px;
  font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;
}
.works-prev{ min-width:44px; min-height:44px; font-size:18px; line-height:1; }
.works-next:hover, .works-prev:hover, .works-next:focus-visible, .works-prev:focus-visible{ border-color:var(--wall-text); }
.works-next[aria-disabled="true"], .works-prev[aria-disabled="true"]{ cursor:progress; }
.works-count{ font-size:11px; color:var(--wall-text-muted); letter-spacing:0.1em; min-width:44px; text-align:center; }
@media (max-width: 860px){
  .works-stage > .artwork-slide{ padding:8px 24px 0; gap:10px; }
  .works-stage .artwork-frame{ padding:10px; }
  .works-nav{ gap:12px; padding:10px 24px 14px; }
  .works-next{ padding:0 16px; font-size:12px; }
}
@media (prefers-reduced-motion: reduce){ .works-stage > .artwork-slide{ transition:none; } }

/* ---------- Per-artwork WhatsApp CTA ---------- */
.whatsapp-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:#fff;
  background:#1e3d3a; padding:8px 12px; border-radius:2px; margin-top:8px;
  text-transform:uppercase; letter-spacing:0.08em; align-self:flex-start;
}
.whatsapp-btn:hover{ background:#274a63; }
.whatsapp-btn svg{ flex-shrink:0; }

/* ---------- Featured artworks ---------- */
.featured{ padding-block:72px 96px; }
.section-heading{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:40px;
}
.section-title{ display:flex; align-items:center; gap:14px; }
.section-title span:first-child{ font-size:13px; font-weight:600; }
.rule{ width:36px; height:1px; background:var(--ink); display:inline-block; }
.view-all{ font-size:12px; color:var(--ink-soft); }

.artwork-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:28px;
}
.artwork-card{ display:flex; flex-direction:column; gap:14px; }
.artwork-image{
  /* REEMPLAZAR: sustituir por <img src="obra.jpg" alt="..."> */
  height:230px;
}
.artwork-card h3{ font-size:16px; font-weight:600; color:var(--ink); }
.artist{ margin:0; font-size:13px; color:var(--ink-soft); }
.meta{ margin:0; font-size:12px; color:var(--ink-faint); }
.view-details{ font-size:11px; margin-top:2px; }

.ph-1{ background:linear-gradient(155deg,#5b7fa6,#dfead9 50%,#c98b3a); }
.ph-2{ background:linear-gradient(180deg,#8d9598,#3c4547 55%,#1c2224); }
.ph-3{ background:linear-gradient(155deg,#2b4a63,#c98b3a 45%,#e7d9a9); }
.ph-dark{
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.small-shape{
  width:100px; height:160px;
  border-radius:60px 60px 60px 16px / 100px 100px 26px 100px;
  background:linear-gradient(150deg,#f2efe8,#c9c4b6);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--teal-800); }
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-block:48px;
}
.footer-logo{ color:var(--wall-text); }
.logo > img{ filter:var(--logo-filter, none); }
/* Header logo: height from admin (--logo-h); optional slow turn on its axis. */
.site-header .logo{ display:block; perspective:900px; }
.site-header .logo img{ height:var(--logo-h, 88px); width:auto; display:block; }
.logo-spin{ animation:hero-icon-spin 9s linear infinite; transform-style:preserve-3d; }
@media (max-width:860px){ .site-header .logo img{ height:min(var(--logo-h, 88px), 72px); } }
@media (prefers-reduced-motion: reduce){ .logo-spin{ animation:none; } }
.tagline{ margin:0; font-size:13px; color:var(--wall-text-muted); font-style:italic; }
.footer-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
/* Social icons: a bit larger, with a clearer ring (still quieter than the page). */
.footer-icon-btn{
  width:52px; height:52px;
  border:1px solid var(--wall-text-muted);
  border-radius:50%;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-icon-btn svg{ width:28px; height:28px; }
.footer-icon-btn:hover{ background:var(--wall-line); border-color:var(--wall-text); transform:translateY(-1px); }

.newsletter-form{ display:flex; align-items:center; gap:10px; }
.newsletter-form input{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--wall-text-faint);
  color:var(--wall-text);
  font-size:12px;
  padding:4px 2px;
  width:120px;
}
.newsletter-form input::placeholder{ color:var(--wall-text-muted); }
.newsletter-form button{
  background:none; border:none;
  font-size:11px; color:var(--wall-text-muted);
  text-transform:uppercase; letter-spacing:0.1em;
  border-bottom:1px solid var(--wall-text-faint);
  padding-bottom:2px;
}

.footer-bottom{
  background:var(--teal-900);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px 24px;
  padding-block:18px;
  font-size:12.5px; color:var(--wall-text-muted);
}
/* Cómo comprar · Privacidad · Términos: easy to find and read, in the site's
   text color with a fine underline, but small and calm (no buttons). */
.legal-links{ display:flex; gap:28px; }
.legal-links a{
  display:inline-flex; align-items:center; min-height:36px;
  font-size:14px; font-weight:500; letter-spacing:0.02em; color:var(--wall-text);
  text-decoration:underline; text-decoration-color:var(--wall-text-faint); text-decoration-thickness:1px; text-underline-offset:5px;
  transition:text-decoration-color .2s ease;
}
.legal-links a:hover, .legal-links a:focus-visible{ text-decoration-color:currentColor; }
/* With «Cómo comprar» there are three links: they wrap whole, never
   breaking a name in two. */
.legal-links.three{ flex-wrap:wrap; gap:4px 28px; }
.legal-links.three a{ white-space:nowrap; }

/* ---------- Contact page ---------- */
.contact-section{ padding:140px var(--gutter) 96px; max-width:640px; margin-inline:auto; }
.contact-section h1{ font-size:clamp(30px,4vw,44px); margin-bottom:32px; }
.contact-alt{ margin:-16px 0 32px; font-size:14px; }
.contact-alt a{ color:var(--wall-text); text-decoration:underline; text-underline-offset:3px; }
.contact-alt .arrow{ text-decoration:none; display:inline-block; }
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.contact-form label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); display:block; margin-bottom:6px; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; border:1px solid rgba(0,0,0,0.15); padding:12px 14px; font-family:inherit; font-size:14px;
  border-radius:2px; background:#fff; color:var(--fixed-ink);
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form button{
  align-self:flex-start; background:var(--fixed-ink); color:#fff; border:none;
  padding:14px 28px; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; border-radius:2px;
}
.contact-form button:hover{ background:var(--teal-700); }
.form-status{ font-size:13px; margin-top:8px; }
.form-status.success{ color:#1e6b3a; }
.form-status.error{ color:#a3382c; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px){
  :root{ --gutter:40px; }
  .artwork-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
}

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


  .hero-inner{ flex-direction:column; align-items:flex-start; gap:14px; padding-block:calc(min(var(--logo-h, 88px), 72px) + 44px) 36px; }
  .hero-note{ max-width:none; padding-left:0; border-left:none; font-size:13.5px; }
  .hero-visual{ width:100%; margin-top:-8px; }
  .placeholder-shape{ width:150px; height:300px; margin-inline:auto; }
  .hero-text{ max-width:100%; }
  .hero.has-strip .hero-inner{ padding-block:calc(min(var(--logo-h, 88px), 72px) + 44px) 0; }
  .hero.has-strip .hero-visual img{ max-height:150px; }
  .hero-strip{ --strip-h:150px; --mat:5px; gap:14px; padding-block:28px 48px; }
  .strip-title{ font-size:12.5px; margin-top:10px; }
  .strip-artist{ font-size:11.5px; }

  .category-block{ padding:44px 0; }
  .category-block:first-child{ padding-top:44px; }
  .category-block:last-child{ padding-bottom:64px; }
  .category-block-grid{ --teaser-base:160px; gap:16px; }

  .artwork-grid{ grid-template-columns:1fr; gap:32px; }
  .artist-grid{ grid-template-columns:1fr; }
  .artist-hero{ padding:28px 0 0; }
  .artist-hero-content.with-intro{ gap:16px; align-items:flex-start; }
  .artist-intro-photo{ width:76px; height:76px; margin-top:4px; }
  .artist-intro{ font-size:15px; }
  .artwork-slide{ padding:32px 24px 48px; gap:20px; }
  .artwork-frame{ padding:12px; }
  .artwork-frame .art-img{ max-width:calc(100vw - 48px - 24px); max-height:62vh; }
  .artwork-frame.size-m .art-img{ max-width:calc(100vw - 48px - 24px); max-height:50vh; }
  .artwork-frame.size-s .art-img{ max-width:calc(80vw - 24px); max-height:40vh; }
  .artwork-frame.is-placeholder{ height:min(48vh, 420px); }
  .artist-card-media{ height:auto; aspect-ratio:1 / 1; }
  .artwork-slide-row{ gap:16px; }
  .contact-section{ padding-top:110px; }
  .page-intro{ padding-top:110px; }
  .artist-list-card{ grid-template-columns:1fr; }
  .artist-list-media{ max-width:min(100%, calc(220px * var(--ps, 1))); }

  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; padding-block:20px 24px; }
  .legal-links, .legal-links.three{ gap:2px 22px; }
  .legal-links a{ min-height:44px; font-size:15px; }
}

/* ---------- Long names never overflow the screen ---------- */
.artist-hero-content h1, .artwork-slide-caption h2, .teaser-title, .teaser-artist,
.artist-card-name, .artist-list-content h2, .category-block-title{ overflow-wrap:break-word; }

/* ---------- Photos with a known size (measured by admin) ----------
   The browser reserves their exact space before they download, so the page
   never jumps while loading. Each rule reproduces the size the photo gets
   today once loaded (whole, never cropped, within the same limits). */
.art-img[style*="--iw"]{ aspect-ratio:var(--iw) / var(--ih); height:auto; }
.teaser-media .art-img[style*="--iw"]{
  width:min(calc(var(--iw) * 1px), 100%, calc(var(--teaser-base) * var(--s, 1) * var(--iw) / var(--ih)));
}
.artist-card-media{ container-type:size; }
.artist-card-media .art-img[style*="--iw"]{
  width:min(100cqw, calc(100cqh * var(--iw) / var(--ih)));
}
.artwork-frame{ --mw:min(1000px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px))); --mh:min(72vh, 700px); }
.artwork-frame.size-m{ --mw:min(780px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px))); --mh:min(58vh, 560px); }
.artwork-frame.size-s{ --mw:min(560px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px))); --mh:min(44vh, 420px); }
.artwork-frame .art-img[style*="--iw"]{
  width:min(calc(var(--iw) * 1px), var(--mw), calc(var(--mh) * var(--iw) / var(--ih)));
}
@media (max-width: 860px){
  .artwork-frame{ --mw:calc(100vw - 48px - 24px); --mh:62vh; }
  .artwork-frame.size-m{ --mw:calc(100vw - 48px - 24px); --mh:50vh; }
  .artwork-frame.size-s{ --mw:calc(80vw - 24px); --mh:40vh; }
}

/* «← Inicio» strip under the header on every inner page */
.home-bar{ background:var(--wall,var(--teal-800)); padding:0 0 10px; }
.home-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; letter-spacing:.04em; color:var(--wall-text); opacity:.85; padding:8px 0; min-height:36px; }
.home-link:hover,.home-link:focus-visible{ opacity:1; text-decoration:underline; }

/* Seal of the discipline beside the gallery logo (top left), with a hairline divider. */
.logo-group{ display:flex; align-items:center; gap:18px; min-width:0; }
.cat-seal{ display:flex; align-items:center; padding-left:18px; position:relative; }
.cat-seal::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:var(--wall-text); opacity:.3; }
.cat-seal a{ display:flex; }
.cat-seal img{ display:block; width:var(--seal-w,76px); height:auto; max-height:84px; object-fit:contain; }
.cat-logo-spin{ animation:cat-logo-turn 1.8s cubic-bezier(.45,.05,.25,1) .3s 1 both; transform-style:preserve-3d; }
@keyframes cat-logo-turn{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
@media (max-width:860px){ .logo-group{ gap:12px; } .cat-seal{ padding-left:12px; } .cat-seal img{ width:min(var(--seal-w,76px),52px); } }
@media (prefers-reduced-motion: reduce){ .cat-logo-spin{ animation:none; } }


/* ---------- «Simular obras en un espacio» ---------- */
.slide-sim{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  padding-block:13px; margin-block:-13px;      /* bigger touch area, same look */
  font-size:12.5px; font-weight:600; color:var(--wall-text-muted);
  text-decoration:underline; text-underline-offset:3px;
  text-transform:uppercase; letter-spacing:0.06em; text-align:right;
}
.slide-sim:hover{ color:var(--wall-text); }
.slide-sim:focus-visible{ outline:2px solid var(--wall-text); outline-offset:4px; }
.sim-tile.is-target .sim-img{ box-shadow:0 0 0 3px var(--ink-soft); }
.sim-head, .sim-wrap{ max-width:var(--max-width); margin-inline:auto; padding-inline:var(--gutter); }
.sim-head{ padding-block:28px 8px; }
.sim-eyebrow{ margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.sim-head h1{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4.4vw,52px); line-height:1.08; }
.sim-note{ margin:10px 0 0; max-width:60ch; color:var(--ink-soft); font-size:15px; }
.sim-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:36px 24px; align-items:start; padding-block:28px 72px; }
.sim-tile{ position:relative; display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:zoom-in; min-width:0; }
.sim-img{ position:relative; display:block; background:rgba(0,0,0,0.12); }
.sim-img .art-img{ display:block; width:100%; height:auto; }
.sim-tile:hover .sim-img{ box-shadow:0 10px 26px rgba(0,0,0,0.3); }
.sim-tile:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.sim-cap{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; color:var(--ink-soft); }
.sim-cap b{ font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); }
.sim-count{ position:absolute; right:8px; top:8px; padding:3px 9px; font-size:12px; font-weight:600; color:#f3f1ec; background:rgba(13,15,15,0.72); border-radius:2px; }
.lb-links{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:8px; font-size:13.5px; }
.lb-links a{ color:#f3f1ec; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1000px){ .sim-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px 18px; } }
@media (max-width:640px){
  .sim-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 12px; }
  .sim-cap b{ font-size:16px; }
}

.lb.kb .lb-stage{ overflow:hidden; }
.lb.kb .lb-stage img{ cursor:zoom-out; }

/* ---------- «Carpeta del artista» ----------
   Card among the works on the artist's page (cover + name + packages +
   button) and the folder page: package pills, grid of photos to pick, and
   a bar fixed at the bottom with the count and the WhatsApp button. */
.folder-cover{ position:relative; display:block; }
.folder-badge{
  position:absolute; left:10px; bottom:10px; padding:5px 10px;
  font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:#f3f1ec; background:rgba(13,15,15,0.72); border-radius:2px;
}
.folder-open{ text-decoration:none; border:1px solid currentColor; padding:11px 16px; margin-block:0; }
.folder-open:hover{ background:var(--wall-line); }

.folder-page{ padding-bottom:24px; }
.folder-sub{ margin:10px 0 0; max-width:60ch; font-size:16px; line-height:1.55; color:var(--ink); }
.folder-packs{ margin-top:22px; }
.folder-packs[hidden]{ display:none; }
.folder-packs-label{ margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.folder-pack-list{ display:flex; flex-wrap:wrap; gap:10px; }
.folder-pack{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:48px;
  padding:9px 16px; border:1px solid var(--wall-text-muted); border-radius:2px;
  background:transparent; color:var(--ink); font:inherit; text-align:left;
}
.folder-pack b{ font-size:14px; font-weight:600; }
.folder-pack span{ font-size:12.5px; color:var(--ink-soft); }
.folder-pack[aria-checked="true"]{ background:var(--wall-text); border-color:var(--wall-text); color:var(--wall); }
.folder-pack[aria-checked="true"] span{ color:var(--wall); opacity:.8; }
.folder-pack:focus-visible{ outline:2px solid var(--wall-text); outline-offset:3px; }

.folder-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:26px 20px; padding-block:24px 40px; }
.folder-tile{ position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; }
.folder-pick{
  position:relative; display:block; width:100%; padding:0; border:0; background:none; color:inherit; cursor:pointer;
}
.folder-img{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:rgba(0,0,0,0.10); overflow:hidden; }
.folder-img .art-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .3s ease; }
.folder-pick:hover .art-img{ transform:scale(1.02); }
.folder-pick:focus-visible{ outline:2px solid var(--wall-text); outline-offset:4px; }
.folder-mark{
  position:absolute; left:8px; top:8px; width:30px; height:30px; display:grid; place-items:center;
  border:2px solid #f3f1ec; border-radius:50%; background:rgba(13,15,15,0.35);
  color:#0d0f0f; font-size:16px; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,0.35);
}
.folder-tile.is-picked .folder-img{ box-shadow:0 0 0 3px var(--wall-text); }
.folder-tile.is-picked .folder-mark{ background:#f3f1ec; }
.folder-zoom{
  position:absolute; right:6px; top:6px; width:44px; height:44px; display:grid; place-items:center;
  padding:0; border:0; border-radius:50%; background:rgba(13,15,15,0.55); color:#f3f1ec; cursor:zoom-in;
}
.folder-zoom:hover{ background:rgba(13,15,15,0.75); }
.folder-zoom:focus-visible{ outline:2px solid #f3f1ec; outline-offset:2px; }
.folder-cap{ font-size:13px; color:var(--ink-soft); overflow-wrap:break-word; }
.folder-cap b{ color:var(--ink); font-weight:600; }

.folder-bar{
  position:sticky; bottom:0; z-index:5; background:var(--wall);
  border-top:1px solid var(--wall-line); box-shadow:0 -10px 30px rgba(0,0,0,0.12);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
}
.folder-bar-in{ max-width:calc(var(--max-width) - 2 * var(--gutter)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.folder-count{ margin:0; font-size:14px; color:var(--ink-soft); }
.folder-count b{ color:var(--ink); font-weight:600; }
.folder-buy{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 20px;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--wall-text); color:var(--wall); border-radius:2px;
}
.folder-buy.is-off{ opacity:.45; cursor:not-allowed; }
.folder-buy:focus-visible{ outline:2px solid var(--wall-text); outline-offset:3px; }
.folder-msg{ max-width:calc(var(--max-width) - 2 * var(--gutter)); margin:8px auto 0; font-size:13.5px; color:var(--ink); }
.folder-msg[hidden]{ display:none; }
.lb-pick{
  min-height:44px; padding:0 18px; border:1px solid rgba(243,241,236,0.7); border-radius:2px;
  background:transparent; color:#f3f1ec; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
}
.lb-pick.is-on{ background:#f3f1ec; color:#0d0f0f; }
@media (max-width:640px){
  .folder-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 12px; }
  .folder-bar-in{ justify-content:center; text-align:center; }
  .folder-buy{ width:100%; justify-content:center; }
  .folder-sub{ font-size:15px; }
}
/* Price of each photo of the folder, right after its name. */
.folder-unit{ margin:8px 0 0; font-size:17px; font-weight:600; color:var(--wall-text); letter-spacing:0.01em; }
.folder-unit[hidden]{ display:none; }
.folder-total{ white-space:nowrap; }
.folder-min{ font-weight:500; color:var(--ink-soft); }

/* ---------- «Otras medidas» under a work ---------- */
.alt-sizes{ flex-basis:100%; margin-top:2px; color:var(--wall-text); }
.alt-sizes > summary{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none;
  font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--wall-text-muted);
}
.alt-sizes > summary::-webkit-details-marker{ display:none; }
.alt-sizes > summary::before{ content:"+"; display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; border-radius:50%; font-size:14px; line-height:1; }
.alt-sizes[open] > summary::before{ content:"−"; }
.alt-sizes > summary:hover{ color:var(--wall-text); }
.alt-sizes > summary:focus-visible{ outline:2px solid var(--wall-text); outline-offset:3px; }
.alt-list{ display:flex; flex-direction:column; gap:2px; max-width:460px; border-top:1px solid var(--wall-line); }
.alt-opt{ display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 2px; border-bottom:1px solid var(--wall-line); cursor:pointer; font-size:14.5px; }
.alt-opt input{ width:20px; height:20px; flex:none; accent-color:var(--wall-text); }
.alt-size{ flex:1; }
.alt-price{ font-weight:600; white-space:nowrap; }
.alt-note{ margin:8px 0 0; font-size:12.5px; color:var(--wall-text-muted); }

/* ---------- «Carpeta del artista» on the artist's page ----------
   Phones and narrow screens: a horizontal card (cover left, text right) after
   the works (or before, admin). Wide screens (≥1280px): a column at the left
   of the works, sticky while scrolling, with an equal empty column at the
   right so each work stays centered on the page. */
.works-layout{ display:flex; flex-direction:column; }
.works-layout .works-main{ order:1; min-width:0; }
.works-layout .folder-aside{ order:2; padding:12px var(--gutter) 40px; }
.works-layout.pos-first .folder-aside{ order:0; padding:24px var(--gutter) 8px; }
.is-single .works-layout .folder-aside{ order:2; padding-top:18px; }
.folder-card{
  display:grid; grid-template-columns:minmax(110px, 38%) minmax(0, 1fr); gap:16px; align-items:center;
  max-width:560px; margin-inline:auto; padding:14px;
  background:rgba(0,0,0,0.14); border:1px solid var(--wall-line); border-radius:3px;
  color:var(--wall-text);
}
.folder-card-img{ position:relative; display:block; background:#fdfcf9; padding:6px; box-shadow:0 10px 26px rgba(0,0,0,0.32); }
.folder-card-img .art-img{ display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; }
.folder-card-img .folder-badge{ left:6px; right:6px; bottom:6px; text-align:center; font-size:10px; padding:4px 6px; }
.folder-card-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.folder-card-title{ margin:0; font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.15; text-transform:uppercase; letter-spacing:0.02em; overflow-wrap:break-word; }
.folder-card-title a{ color:inherit; }
.folder-card-price{ margin:0; font-size:14px; font-weight:600; }
.folder-card-sub{ margin:0; font-size:12.5px; line-height:1.45; color:var(--wall-text-muted); }
.folder-card-packs{ margin:0; font-size:11.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--wall-text-muted); }
.folder-card-btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:42px; margin-top:4px; padding:0 14px;
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--wall-text); color:var(--wall); border-radius:2px;
}
.folder-card-btn:hover{ opacity:.9; }
.folder-card-btn:focus-visible, .folder-card-title a:focus-visible{ outline:2px solid var(--wall-text); outline-offset:3px; }
@media (min-width:1280px){
  .works-layout.has-folder{
    --aside-col:240px; --aside-w:calc(2 * var(--aside-col) + 80px);
    display:grid; grid-template-columns:var(--aside-col) minmax(0, 1fr) var(--aside-col);
    padding-inline:var(--gutter);
  }
  .works-layout.has-folder .works-main{ grid-column:2; grid-row:1; }
  .works-layout.has-folder .folder-aside,
  .works-layout.has-folder.pos-first .folder-aside,
  .is-single .works-layout.has-folder .folder-aside{
    grid-column:1; grid-row:1; align-self:start; position:sticky; top:24px; padding:56px 0 0;
  }
  .is-single .works-layout.has-folder .folder-aside{ padding-top:10px; }
  .works-layout.has-folder .artwork-slide, .works-layout.has-folder .works-nav{ padding-inline:40px; }
  .folder-card{ grid-template-columns:1fr; gap:14px; padding:14px 14px 16px; max-width:none; }
  .folder-card-img .art-img{ aspect-ratio:4 / 5; }
  .folder-card-btn{ align-self:stretch; justify-content:center; }
}
@media (max-width:860px){
  .works-nav .works-next{ white-space:nowrap; font-size:clamp(11px, 3.2vw, 13px) !important; letter-spacing:0.06em; padding:0 14px; }
  .folder-card{ padding:12px; gap:14px; }
  .folder-card-title{ font-size:17px; }
  .folder-card-btn{ align-self:stretch; justify-content:center; padding:0 10px; font-size:11px; }
}

/* ---------- PC (≥1280 px): works larger ----------
   Higher size limits on big screens. In «una obra a la vez» the ficha
   (title, technique, price…), the ← 1/4 → buttons and the collection-box
   card go in a column at the right of the work (like a museum label), so the
   photo uses almost all the screen height. Phones and tablets: unchanged. */
@media (min-width:1280px){
  .artwork-frame{ --mw:min(1400px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px) - var(--cap-w, 0px))); --mh:min(84vh, 1100px); }
  .artwork-frame.size-m{ --mw:min(1100px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px) - var(--cap-w, 0px))); --mh:min(68vh, 860px); }
  .artwork-frame.size-s{ --mw:min(800px, calc(100vw - 2 * var(--gutter) - 40px - var(--aside-w, 0px) - var(--cap-w, 0px))); --mh:min(52vh, 640px); }
  .artwork-frame .art-img, .artwork-frame.size-m .art-img, .artwork-frame.size-s .art-img{ max-width:var(--mw); max-height:var(--mh); }

  body:has(.is-single) .home-bar{ display:none; }
  .is-single{ --cap-w:330px; }
  .is-single #works-list{ position:relative; }
  .works-stage > .artwork-slide{ padding-top:14px; }
  .works-stage .artwork-piece{ flex-direction:row; align-items:flex-start; gap:40px; width:auto; }
  .works-stage .artwork-slide-caption{ width:290px; min-width:0; flex:none; padding-top:4px; }
  .works-stage .artwork-slide-caption h2{ font-size:clamp(24px, 2vw, 32px); }
  .works-stage .artwork-slide-row{ flex-direction:column; align-items:flex-start; gap:14px; }
  .works-stage .slide-sim{ margin-left:0; text-align:left; }
  .is-single .works-nav{ position:absolute; width:290px; padding:0; gap:10px 12px; flex-wrap:wrap; justify-content:flex-start; background:none; }
  .is-single .works-nav .works-next{ order:-1; flex:1 1 100%; min-width:0; justify-content:space-between; padding:8px 16px; white-space:normal; text-align:left; line-height:1.3; }
  .is-single .works-nav .works-count{ min-width:0; }

  /* collection box: compact card in the same column, under the buttons */
  .is-single .works-layout.has-folder{ display:block; --aside-w:0px; padding-inline:0; }
  .is-single .works-layout.has-folder .folder-aside{ position:absolute; width:290px; padding:0; }
  .is-single .works-layout.has-folder .artwork-slide{ padding-inline:var(--gutter); }
  .is-single .works-layout.has-folder .works-nav{ padding:0; }
  .is-single .folder-card{ grid-template-columns:96px minmax(0, 1fr); gap:12px; padding:10px; align-items:start; }
  .is-single .folder-card-title{ font-size:15px; }
  .is-single .folder-card-sub{ display:none; }
  .is-single .folder-card-btn{ font-size:10.5px; padding:0 10px; min-height:36px; }
  .is-single .folder-card-img .folder-badge{ font-size:9px; padding:3px 4px; }
}

/* ---------- Disciplina en PC: obras con más protagonismo ----------
   On screens 1280 px or wider each artist's work is shown large (up to
   640 px tall, 70% of the screen), side by side while they fit and on the
   next row when they don't. Laptops under 1280 px, tablets and phones keep
   the layout they had. */
@media (min-width:1280px){
  .artist-grid{
    --card-h:min(70vh, 640px);
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:64px 56px;
  }
  .artist-card{ flex:0 1 calc(var(--card-h) * var(--ar, 0.8)); max-width:100%; min-width:260px; }
  .artist-card-media{ height:auto; container-type:normal; display:block; }
  .artist-card-media .art-img,
  .artist-card-media .art-img[style*="--iw"]{ width:100%; height:auto; max-height:none; }
  .artist-card-media .art-placeholder{ width:100%; height:auto; aspect-ratio:4 / 5; }
  .artist-card-name{ margin-top:20px; font-size:21px; }
  .artist-card-cta{ font-size:12.5px; margin-top:4px; }
}

/* ---------- Celular y tablet: menú pequeño y transparente ----------
   Up to 1024 px the header is a slim bar that stays at the top while the
   visitor scrolls: transparent over the page, and once the page moves a
   see-through veil of the wall colour with a soft blur, so the works stay
   visible behind it. Smaller logo, language button and ☰. */
@media (max-width:1024px){
  .site-header,
  .site-header.solid{
    position:fixed; top:0; left:0; right:0; z-index:30;
    padding-block:8px;
    background:transparent;
    transition:background .3s ease, padding .3s ease, transform .35s ease;
  }
  .site-header.hide-up{ transform:translateY(-100%); }
  /* The bar floats over the page: pages that had it above their content keep that room. */
  body:has(.site-header.solid){ padding-top:60px; }
  .site-header.scrolled{
    padding-block:5px;
    background:color-mix(in srgb, var(--wall, #3a555b) var(--mm-bar, 62%), transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  /* With the ☰ panel open, no blur on the bar (it would trap the panel inside it). */
  .site-header:has(.main-nav.open){ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .site-header .logo img{ height:var(--mm-logo, 44px); transition:height .3s ease; }
  .site-header.scrolled .logo img{ height:calc(var(--mm-logo, 44px) * 0.78); }
  .site-header .cat-seal img{ width:min(var(--seal-w,76px), 34px); max-height:34px; }
  .site-header.scrolled .cat-seal img{ width:min(var(--seal-w,76px), 28px); }
  .logo-group{ gap:10px; }
  .cat-seal{ padding-left:10px; }
  .header-actions{ gap:6px; }
  .lang-toggle{ font-size:10px; padding:4px 7px; border-color:color-mix(in srgb, var(--wall-text) 45%, transparent); }
  .menu-toggle svg{ width:18px; height:18px; }
  .hero-inner, .hero.has-strip .hero-inner{ padding-top:88px; }

  /* Disciplinas: each work centred, with its name under it. */
  .artist-card{ text-align:center; }
  .artist-card-media{ justify-content:center; }
}
@media (min-width:1025px) and (max-width:1279px){
  .artist-card{ text-align:center; }
  .artist-card-media{ justify-content:center; }
}

/* ---------- Celular y tablet: el cuadro del menú (☰) ----------
   Like the photographer's site: a narrow, see-through panel that comes in
   from the right, only as tall as its links, so the page and the works stay
   in view around it. The ☰ turns into × over the panel's corner.
   Transparency, text size and logo size are set in admin. */
@media (max-width:1024px){
  .site-header.compact .main-nav,
  .site-header.compact-m .main-nav{
    inset:0 0 auto auto; height:auto; max-height:100svh; overflow-y:auto;
    width:max-content; min-width:min(210px, 58vw); max-width:76vw;
    justify-content:flex-start; align-items:flex-start; gap:0;
    padding:68px 30px 26px;
    background:color-mix(in srgb, var(--wall, #3a555b) var(--mm-panel, 82%), transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s linear .4s, box-shadow .4s ease;
  }
  .site-header.compact .main-nav.open,
  .site-header.compact-m .main-nav.open{
    box-shadow:-18px 18px 40px -24px rgba(0,0,0,.55);
    transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  }
  .site-header.compact .main-nav a,
  .site-header.compact-m .main-nav a{ font-size:var(--mm-font, 12px); letter-spacing:.15em; padding:11px 0; line-height:1.3; }
  .site-header.compact .main-nav a::after,
  .site-header.compact-m .main-nav a::after{ bottom:6px; }
  .site-header.compact .nav-sep,
  .site-header.compact-m .nav-sep{ width:32px; margin:10px 0; }
  /* «English» and ☰ / × stay on top of the open panel, in its corner. */
  .header-actions{ position:relative; z-index:41; }
  .menu-toggle line{ transition:transform .3s ease, opacity .2s ease; transform-box:view-box; transform-origin:12px 12px; }
  .menu-toggle[aria-expanded="true"] line:nth-child(1){ transform:rotate(45deg) translateY(6px); }
  .menu-toggle[aria-expanded="true"] line:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] line:nth-child(3){ transform:rotate(-45deg) translateY(-6px); }
}

/* Small line under each work: private use / no reproduction / see terms. */
.slide-rights{ display:block; margin-top:10px; font-size:11px; letter-spacing:.04em; color:var(--wall-text-muted); opacity:.9; text-decoration:none; }
.slide-rights:hover, .slide-rights:focus-visible{ color:var(--wall-text); text-decoration:underline; text-underline-offset:3px; }