/* =====================================================================
   JAMES HERRERA · SITE LIBRARY  (site.css)
   One file for every page. Change a token here and every page follows.
   Sections:  1 Fonts · 2 Tokens · 3 Base · 4 Spacing rules · 5 Layout
              6 Type styles · 7 Components · 7b Shop components
              8 Page sections · 9 Responsive
   Rule of thumb: pages never set their own px values. If a page needs a new
   size, colour or space, it is added here as a token first.
   ===================================================================== */

/* ---------- 1 · FONTS (James's library, subset to Latin) ---------- */
@font-face{font-family:"Libre Bodoni";src:url(fonts/librebodoni-regular.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Libre Bodoni";src:url(fonts/librebodoni-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Mesmerize";src:url(fonts/mesmerize-bk.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:"Mesmerize";src:url(fonts/mesmerize-bd.woff2) format("woff2");font-weight:600 900;font-display:swap}

/* ---------- 2 · TOKENS ---------- */
:root{
  color-scheme:dark;
  /* Colour — contrast measured against --c-ground (and the darkest surface it sits on) */
  --c-ground:#0F1012;      /* page background */
  --c-surface:#17181B;     /* alternate section background */
  --c-raised:#1E1F23;      /* cards that float over images */
  --c-line:#2A2B2F;        /* dividers */
  --c-line-strong:#36373C; /* card borders, dividers inside cards */
  --c-text:#E8E2D4;        /* main text            14.7:1 */
  --c-muted:#C4BEB2;       /* secondary text       10.3:1 (8.9:1 on --c-raised) */
  --c-accent:#C9A44C;      /* gold: labels, prices, actions, outlines   8.1:1 (7.0:1 on --c-raised) */
  --c-on-accent:#111214;   /* text on a gold button                   8.1:1 */
  --c-overlay:rgba(8,9,10,.9); /* bottom of photo gradients, behind text */
  --tap:44px;              /* minimum touch target */
  --h-btn:56px;            /* button height, border included */

  /* Font families — three roles, never more */
  --f-logo:var(--f-display);   /* wordmark: Bodoni capitals (James, 6 Oct: option D on one line) */
  --f-display:"Libre Bodoni","Didot","Bodoni 72",Georgia,serif;  /* headings, artwork names, big numbers, statements */
  --f-text:"Mesmerize","Gill Sans","Trebuchet MS",system-ui,sans-serif; /* everything else: body, menu, labels, buttons, meta */

  /* GRID RULE (3 Oct 2026): every size, space and line-height is a multiple of 4px.
     Font sizes may step by 2px (14, 16, 18, 22, 26 …); nothing under 12px. No fluid clamp()/vw
     values: sizes change in steps at the breakpoints in section 9, so every rendered value is on the grid. */

  /* Type scale — font-size / line-height pairs */
  --t-label:14px;    --lh-label:20px;   /* uppercase labels, eyebrows, legal line */
  --t-ui:14px;       --lh-ui:20px;      /* menu, buttons, arrow links */
  --t-control:16px;  --lh-control:24px; /* mixed-case pill controls: Filtrar, sort, filter chips (14 was hard to read, James 5 Oct) */
  --t-meta:16px;     --lh-meta:24px;    /* card details, notes, captions */
  --t-body:18px;     --lh-body:28px;    /* paragraphs */
  --t-h4:24px;       --lh-h4:32px;      /* small titles (terms); 24 not 22: Bodoni's hairlines thin out on dark below this (James, 5 Oct) */
  --t-price:22px;    --lh-price:28px;   /* prices on cards */
  --t-h3:26px;       --lh-h3:32px;      /* artwork names, step titles */
  --t-logo:28px;     --lh-logo:28px;    /* wordmark: HERRERA */
  --t-logo-sub:20px; --lh-logo-sub:20px; /* wordmark: STUDIO, in gold */
  --t-figure:34px;   --lh-figure:40px;  /* sizes in the format chart */
  --t-price-lg:40px; --lh-price-lg:44px;/* price on the artwork page */
  --t-statement:32px;--lh-statement:40px; /* one-paragraph statements */
  --t-h2:44px;       --lh-h2:52px;      /* section titles */
  --t-h2-feature:64px; --lh-h2-feature:68px; /* series titles in feature bands */
  --t-display:88px;  --lh-display:88px; /* hero line, one per page */
  --ls-label:.12em;  /* letter-spacing for uppercase labels */

  /* Space — 4px grid */
  --s-3xs:4px;
  --s-2xs:8px;
  --s-xs:12px;   /* eyebrow → title */
  --s-s:20px;    /* title → text, text → text */
  --s-m:28px;
  --s-l:40px;    /* text → button; card grid gap */
  --s-xl:64px;   /* section heading → section content */
  --s-2xl:88px;  /* big column gaps */
  --s-3xl:128px;
  --s-section:128px;  /* top/bottom of every section (96–160 by breakpoint) */
  --gutter:48px;      /* page side margin (20–56 by breakpoint) */
  --container:1904px; /* widest the content gets, gutters included */
  --edge:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter))); /* viewport edge → content edge, for full-bleed sections */
  --header-h:96px;
  --s-band:88px;      /* photo → copy in the series bands (64–128 by breakpoint) */

  /* Fixed heights (by breakpoint in section 9) */
  --h-band:640px;     /* series band photos */
  --h-film:720px;     /* studio video band */
  --h-gallery:720px;  /* artwork page main image frame */
  --k:3.6px;          /* format chart: px per cm, the largest scale allowed (a multiple of .4 keeps every box on the 4px grid) */

  /* Lines, motion */
  --border:1px solid var(--c-line);
  --dur:.6s; --ease:cubic-bezier(.2,.6,.2,1); --d-drawer:.36s;
}

/* ---------- 3 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--c-ground);color:var(--c-text);font:400 var(--t-body)/var(--lh-body) var(--f-text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;font-size:var(--t-meta);line-height:var(--lh-meta)}

/* ---------- 4 · SPACING RULES (vertical rhythm inside any text block) ----------
   Put class="copy" on a block. Its children get spacing by what follows what:
     eyebrow → title  ........ --s-xs  (12)
     title   → text   ........ --s-s   (20)
     text    → text   ........ --s-s   (20)
     anything → .actions ..... --s-l   (40)                                  */
.copy > * + *{margin-top:var(--s-s)}
.copy > .eyebrow + *,.copy > .crumbs + *{margin-top:var(--s-xs)}
.copy > * + .actions{margin-top:var(--s-l)}

/* ---------- 5 · LAYOUT ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-section)}
.section--surface{background:var(--c-surface);border-block:var(--border)}
.section--flush-top{padding-top:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-l);margin-bottom:var(--s-xl)}
.section-head > .copy{max-width:none}
.section-head > p{max-width:44ch;color:var(--c-muted)}
.mt-section{margin-top:var(--s-section)}
.pb-section{padding-bottom:var(--s-section)}   /* end of a page that has no closing section */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-l)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-l)}

/* ---------- 6 · TYPE STYLES ---------- */
.eyebrow{display:block;font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-accent)}
.label{font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-muted)}
.display{font:400 var(--t-display)/var(--lh-display) var(--f-display);letter-spacing:-.01em}
.display em,.h2 em,.statement em{font-style:italic;color:var(--c-accent)}
.h2{font:400 var(--t-h2)/var(--lh-h2) var(--f-display)}
.h2-feature{font:400 var(--t-h2-feature)/var(--lh-h2-feature) var(--f-display)}
.h3{font:400 var(--t-h3)/var(--lh-h3) var(--f-display)}
.h4{font:400 var(--t-h4)/var(--lh-h4) var(--f-display);letter-spacing:.01em}
.statement{font:400 var(--t-statement)/var(--lh-statement) var(--f-display);max-width:62ch;text-wrap:balance}
.text{font-size:var(--t-body);line-height:var(--lh-body);color:var(--c-muted);max-width:44ch}
.meta{font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--c-muted)}
.price{font:600 var(--t-price)/var(--lh-price) var(--f-text);color:var(--c-text);white-space:nowrap}

/* ---------- 7 · COMPONENTS ---------- */
/* Buttons and links */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-xs) var(--s-m)}   /* a text link beside a button sits on its centre line, not stretched to its height */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-btn);padding:0 var(--s-l);font:600 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--c-accent);color:var(--c-accent);background:transparent;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
@media (hover:hover){.btn:hover{background:var(--c-accent);color:var(--c-on-accent)}}   /* hover only where there is a mouse */
.btn--solid{background:var(--c-accent);color:var(--c-on-accent)}
@media (hover:hover){.btn--solid:hover{background:transparent;color:var(--c-accent)}}   /* touch screens keep :hover after a tap, which made the button look unfilled */
.link-arrow{font:600 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--c-accent);border-bottom:1px solid currentColor;padding-bottom:var(--s-3xs);white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:30;isolation:isolate}  /* stays at the top while the page scrolls */
/* Frosted glass after the portfolio's recipe (portfoliojfh.com) in this site's near-black: 45% tint, a hairline edge,
   an inset highlight and a soft drop shadow. Blur 12px / saturate 140% (the portfolio uses 20px / 180%): at 20px thin
   lines like the size-chart outlines vanish while busy paintings smear, so the glass looked uneven from section to
   section; 12px reads the same over outlines, paintings and video. The pane sits on ::before so it can fade in and out. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgb(15 16 18 / .45);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid rgb(232 226 212 / .1);box-shadow:inset 0 1px 0 rgb(232 226 212 / .07),0 8px 32px rgb(0 0 0 / .35);
  transition:opacity var(--d-drawer) var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header::before{background:rgb(15 16 18 / .96)}}
.site-header--over{position:fixed;inset:0 0 auto 0;color:#fff}  /* homepage: clear over the hero video, glass once you scroll */
.site-header--over::before{opacity:0}
.site-header--over.is-scrolled::before{opacity:1}
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-m))}  /* anchors land below the fixed header */
.site-header .container{display:flex;align-items:center;gap:var(--s-l);height:var(--header-h)}
.wordmark{text-decoration:none;white-space:nowrap}
.wordmark{display:inline-flex;align-items:baseline;gap:var(--s-xs)}
.wordmark b{display:block;font:400 var(--t-logo)/var(--lh-logo) var(--f-logo);letter-spacing:.14em;text-transform:uppercase}
.wordmark i{display:block;font:500 var(--t-logo-sub)/var(--lh-logo-sub) var(--f-text);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--c-accent)}
.wordmark small{display:block;margin-top:var(--s-3xs);font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.site-header--over .wordmark small{color:rgba(255,255,255,.85)}
.nav{margin-left:auto;display:flex;gap:var(--s-l);font:500 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;padding-block:var(--s-2xs);border-bottom:1px solid transparent}
.nav a:hover{color:var(--c-accent);border-color:var(--c-accent)}
.util{display:flex;gap:var(--s-m);font:500 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.nav__head,.nav__lang,.nav-scrim{display:none}   /* drawer parts: phone and tablet only */
.nav__links{display:contents}
/* The header's glass, reused by the menu and filter drawers so all three panes match */
.nav,.filters__panel{--glass-bg:rgb(15 16 18 / .45);--glass-fx:blur(12px) saturate(140%)}

/* Work card: image with a dark card stacked on its foot */
.work{display:block;text-decoration:none}
.work__img{aspect-ratio:3/4;overflow:hidden;background:#000}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.work:hover .work__img img{transform:scale(1.04)}
.work__card{position:relative;margin:calc(var(--s-l) * -1) var(--s-xs) 0;padding:var(--s-s) var(--s-m);background:var(--c-raised);border:1px solid var(--c-line-strong);box-shadow:0 16px 32px -16px #000;transition:border-color var(--dur) var(--ease)}
.work:hover .work__card{border-color:var(--c-accent)}
.work__top{display:flex;justify-content:space-between;gap:var(--s-2xs);padding-bottom:var(--s-2xs);border-bottom:1px solid var(--c-line-strong)}
.work__top .label:first-child{color:var(--c-accent)}
.work__name{margin-top:var(--s-xs)}
.work__row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-xs);margin-top:var(--s-2xs)}

/* Format chart: outlines at true relative scale, tops aligned, labels above */
.formats{--fgap:var(--s-l);--u:min(calc((100% - (var(--n) - 1) * var(--fgap)) / var(--wsum)),var(--k));  /* px per cm: --k, or less if the row would not fit */
  display:grid;grid-template-columns:var(--cols);justify-content:space-between;gap:var(--s-xl) var(--fgap)}  /* laptop: columns = box widths, equal gaps */
.format{display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0;min-width:0}  /* min-width:0: a wide size label may hang into the gap, the column stays the box's width */  /* subgrid: every label block in a row is as tall as the tallest, so box tops line up */
.format__tag{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-3xs);padding-bottom:var(--s-s)}
.format__size{font:400 var(--t-figure)/var(--lh-figure) var(--f-display)}
.format__size i{font-size:var(--t-h4);font-style:normal;color:var(--c-muted);padding-inline:var(--s-3xs)}
.format__tag .label + .label{color:var(--c-accent)}
.format__size,.format__tag .label{white-space:nowrap}  /* labels are always two set lines (built with a <br>), so every block in a row is the same height */
.format__box{width:100%;aspect-ratio:var(--w) / var(--h);border:1px solid var(--c-accent);background:linear-gradient(rgba(201,164,76,.05),transparent 60%)}
.note-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-s);margin-top:var(--s-l)}
.note-stack{display:flex;flex-direction:column;gap:var(--s-3xs)}   /* VAT line + insurance line */
.note-link{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:1px;text-underline-offset:var(--s-3xs)}   /* the commission line leads to Encargos */
.note-link:hover{color:var(--c-accent)}

/* Feature band: photo + copy, alternating */
.band{display:grid;grid-template-columns:1.25fr 1fr;align-items:center}
.band + .band{margin-top:var(--s-section)}
.band--rev{grid-template-columns:1fr 1.25fr}
.band--rev .band__img{order:2}
.band__img{height:var(--h-band);overflow:hidden}
.band__img img,.band__img video{display:block;width:100%;height:100%;object-fit:cover}
/* Chrome on macOS hands an unfiltered <video> to the graphics hardware as an "overlay", which the header's
   backdrop-filter cannot see, so the glass blurred the text over it but not the video (James, series band).
   The hero and film videos already carry a brightness filter and blurred correctly; a near-identity filter on
   every other video keeps it in the normal compositing path too. */
video{filter:brightness(.999)}
.band__copy{padding-inline:var(--s-band) var(--edge)}
.band--rev .band__copy{padding-inline:var(--edge) var(--s-band)}

/* Row: label column + content (used for "coming soon" and statements) */
.row-3{display:grid;grid-template-columns:260px 1fr 1.1fr;gap:var(--s-xl);align-items:baseline}
.row-2{display:grid;grid-template-columns:260px 1fr;gap:var(--s-xl);align-items:baseline}
.ruled{border-block:var(--border);padding-block:var(--s-xl)}

/* Step */
.step__img{aspect-ratio:4/5;overflow:hidden;background:#000}
.step__img img{width:100%;height:100%;object-fit:cover}
.obj-low{object-position:50% 82%}
.step .copy{margin-top:var(--s-m)}
.step__n{color:var(--c-accent)}  /* step number in gold */
/* Sobre mí: photo beside his own words */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-2xl);align-items:center}
.about__img{aspect-ratio:4/5;overflow:hidden;background:#000}
.about__img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* Encargos (James, 5 Oct) */
a.step__img{display:block}
a.step__img img{transition:transform 1s var(--ease)}
a.step__img:hover img{transform:scale(1.03)}
.techs{list-style:none;margin:0;padding:0}
.ministeps{list-style:none;margin:var(--s-m) 0 0;padding:0;border-top:var(--border)}   /* homepage: the five commission steps by name */
.ministeps li{display:flex;align-items:baseline;gap:var(--s-m);padding-block:var(--s-s);border-bottom:var(--border);font:400 var(--t-h3)/var(--lh-h3) var(--f-display)}
.ministeps__n{flex:none;min-width:var(--s-l);font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);color:var(--c-accent)}
.acc.faq summary{gap:var(--s-m);padding-block:var(--s-s);font:400 var(--t-body)/var(--lh-body) var(--f-text);letter-spacing:0;text-transform:none;color:var(--c-text)}   /* questions read as sentences, not labels */
.acc.faq details > p{max-width:62ch}
.faq{border-top:var(--border)}
.cta{padding-block:var(--s-section);border-top:var(--border)}

/* Split call-to-action: two columns divided by a rule */
.split{display:grid;grid-template-columns:1fr 1fr;border-block:var(--border)}
.split > *{padding-block:var(--s-section)}
.split > :first-child{padding-right:var(--s-2xl)}
.split > :last-child{padding-left:var(--s-2xl);border-left:var(--border)}

/* Terms strip */
.terms{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--border)}
.terms > *{padding:var(--s-l) var(--s-l) var(--s-l) 0}
.terms > * + *{padding-left:var(--s-l);border-left:var(--border)}

/* Footer */
.site-footer{padding-block:var(--s-2xl) var(--s-xl);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--c-muted)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-xl)}
.site-footer ul{display:grid;gap:var(--s-2xs);margin-top:var(--s-s)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--c-accent)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-xs);margin-top:var(--s-xl);padding-top:var(--s-m);border-top:var(--border)}

/* ---------- 7b · SHOP COMPONENTS (catalogue, artwork page, forms, text pages) ---------- */
/* Header on inner pages, current page, skip link, mobile menu */
.nav a[aria-current="page"]{color:var(--c-accent);border-color:var(--c-accent)}
.lang{display:inline-flex;align-items:center;gap:var(--s-2xs)}   /* current language gold, the other one a white link (same rule as the breadcrumbs) */
.lang a{color:var(--c-text);text-decoration:none}
.lang a:hover{color:var(--c-accent)}
.lang__cur{color:var(--c-accent)}
.lang__sep{color:var(--c-muted)}
.skip{position:absolute;left:var(--s-s);top:-200px;z-index:60;padding:var(--s-2xs) var(--s-s);background:var(--c-accent);color:var(--c-on-accent);font:600 var(--t-ui)/var(--lh-ui) var(--f-text)}
.skip:focus{top:var(--s-s)}
.menu-btn{min-height:var(--tap);font:500 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.12em;text-transform:uppercase}

/* Inner page head + breadcrumb */
.page-head{padding-block:var(--s-2xl) var(--s-xl)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2xs);font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-muted)}
.crumbs a{color:var(--c-text);text-decoration:none}   /* pages you can go back to: white */
.crumbs a:hover{color:var(--c-accent)}
.crumbs [aria-current]{color:var(--c-accent)}   /* the page you are on: gold */

/* Catalogue: filters + grid */
.filters{padding-block:var(--s-m);border-block:var(--border)}
.filters__bar{display:flex;align-items:center;gap:var(--s-m)}
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2xs)}
.filter > .label{margin-right:var(--s-2xs)}
.chip{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-s);border:1px solid var(--c-line-strong);border-radius:999px;background:transparent;color:var(--c-text);font:500 var(--t-control)/var(--lh-control) var(--f-text);cursor:pointer}
.chip:hover{border-color:var(--c-accent)}
.chip[aria-pressed="true"]{border-color:var(--c-accent);color:var(--c-accent)}
.filters__end{display:flex;align-items:center;margin-left:auto}  /* sort, right-aligned */
.filters__toggle{display:inline-flex;align-items:center;gap:var(--s-2xs);min-height:var(--tap);padding:0 var(--s-s);border:1px solid var(--c-line-strong);border-radius:999px;background:transparent;
  color:var(--c-text);font:500 var(--t-control)/var(--lh-control) var(--f-text);cursor:pointer;white-space:nowrap}
.filters__toggle:hover,.filters__toggle[aria-expanded="true"]{border-color:var(--c-accent)}
.filters__toggle svg{color:var(--c-accent);flex:none}
.filters__n{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 var(--s-2xs);border:1px solid var(--c-accent);border-radius:999px;background:transparent;color:var(--c-accent);font:600 var(--t-control)/24px var(--f-text)}  /* gold number on dark: a dark digit inside a filled gold dot got lost (James, 5 Oct) */
.cat-count{margin:var(--s-m) 0 var(--s-xl)}  /* "21 obras", under the bar's bottom rule, on the page's left edge */
/* Filter drawer: slides in from the left over a dimmed page, and back out on Cerrar / Ver N obras / Esc / a click outside */
.filters__scrim{position:fixed;inset:0;z-index:55;background:rgb(8 9 10 / .4);opacity:0;visibility:hidden;transition:opacity var(--d-drawer) var(--ease),visibility 0s linear var(--d-drawer)}
.filters__panel{position:fixed;top:0;bottom:0;left:0;z-index:60;display:flex;flex-direction:column;width:min(448px,calc(100vw - var(--s-xl)));
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);
  border-right:1px solid rgb(232 226 212 / .1);box-shadow:inset -1px 0 0 rgb(232 226 212 / .07),8px 0 32px rgb(0 0 0 / .35);
  transform:translateX(-100%);visibility:hidden;transition:transform var(--d-drawer) var(--ease),visibility 0s linear var(--d-drawer)}
.filters.is-open .filters__scrim{opacity:1;visibility:visible;transition:opacity var(--d-drawer) var(--ease),visibility 0s}
.filters.is-open .filters__panel{transform:none;visibility:visible;transition:transform var(--d-drawer) var(--ease),visibility 0s}
.filters__panel:focus{outline:none}
.filters__head{display:flex;flex:none;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 var(--s-l);border-bottom:var(--border)}
.filters__groups{flex:1;overflow-y:auto;padding:0 var(--s-l)}
.filters__groups .filter{flex-wrap:wrap;overflow:visible;max-width:none;padding-block:var(--s-m);border-bottom:var(--border)}
.filters__groups .filter:last-child{border-bottom:0}
.filters__groups .filter > .label{flex-basis:100%;margin:0 0 var(--s-xs)}
.filters__foot{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--s-m);padding:var(--s-s) var(--s-l);border-top:var(--border)}
.filters__foot .btn{flex:1;padding:0 var(--s-m);white-space:nowrap}
.sort{display:flex;align-items:center;gap:var(--s-xs)}
.sort select{appearance:none;-webkit-appearance:none;min-height:var(--tap);padding:0 calc(var(--s-s) + 12px + var(--s-2xs)) 0 var(--s-s);border:1px solid var(--c-line-strong);border-radius:999px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C9A44C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right var(--s-s) center / 12px 8px;
  color:var(--c-text);font:500 var(--t-control)/var(--lh-control) var(--f-text);cursor:pointer}  /* same pill as the filter chips, gold chevron */
.sort select:hover{border-color:var(--c-accent)}
.sort select:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.sort option{background:var(--c-surface);color:var(--c-text)}
.grid-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2xl) var(--s-l)}  /* 3 across on laptops; 4 from 1600 px */
.grid-cat > [hidden],.empty[hidden]{display:none}
.empty{padding-block:var(--s-2xl)}
.work__status{color:var(--c-accent)}

/* Artwork page: gallery + details */
/* Artwork page (Sklum-style): media column scrolls past, the info column stays in view and scrolls on its own if taller than the screen */
.pdp{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(384px,1fr);column-gap:var(--s-2xl);align-items:start}
.pdp__media{grid-column:1;display:flex;flex-direction:column;gap:var(--s-3xs)}
.pdp__info{grid-column:2;grid-row:1;align-self:stretch}
.pdp__dots{display:none}
.pdp__sticky{position:sticky;top:calc(var(--header-h) + var(--s-l));max-height:calc(100vh - var(--header-h) - 2 * var(--s-l));overflow-y:auto;padding-right:var(--s-2xs);scrollbar-width:thin;scrollbar-color:var(--c-line-strong) transparent}
.pdp__info .h1{font:400 var(--t-h2)/var(--lh-h2) var(--f-display)}
.pdp__sticky.has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}  /* fades the bottom edge while more info is hidden below */
.zoom{display:block;cursor:zoom-in}
.pdp__lead .zoom{display:flex;justify-content:center;align-items:center;height:var(--h-gallery);padding:var(--s-xl);background:var(--c-surface);border:var(--border)}
.pdp__lead img{width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:0 24px 48px -24px #000}
.pdp__video{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:#000}
.pdp__video video{display:block;width:100%;height:100%;object-fit:cover}
.pdp__video .label{position:absolute;left:var(--s-s);bottom:var(--s-s);padding:var(--s-3xs) var(--s-2xs);background:rgba(8,9,10,.6);color:var(--c-text)}
.pdp__mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3xs)}
.pdp__mosaic .m-1{grid-column:span 6}
.pdp__mosaic .m-2{grid-column:span 3}
.pdp__mosaic .m-3{grid-column:span 2}
.pdp__mosaic .zoom{aspect-ratio:4 / 5;overflow:hidden;background:#000}
.pdp__mosaic .m-1 .zoom{aspect-ratio:3 / 2;background:var(--c-surface)}
.pdp__mosaic .m-1 img{object-fit:contain}  /* a single leftover photo is shown whole, never cropped */
.pdp__mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pdp__mosaic .zoom:hover img{transform:scale(1.03)}
.pdp__mosaic .m-1 .zoom:hover img{transform:none}
/* Photo viewer (opens from any photo on the artwork page) */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--s-2xl);border:0;background:rgba(8,9,10,.96);color:var(--c-text)}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:rgba(8,9,10,.8)}
.lb img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;cursor:pointer}
.lb .lb__prev,.lb .lb__next{top:50%;display:inline-flex;align-items:center;justify-content:center;width:var(--h-btn);height:var(--h-btn);margin-top:calc(var(--h-btn) / -2);padding:0;border:1px solid var(--c-accent);background:rgba(8,9,10,.6);color:var(--c-accent);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}  /* same look as .btn */
.lb .lb__prev:hover,.lb .lb__next:hover{background:var(--c-accent);color:var(--c-on-accent)}
.lb .lb__close{top:var(--s-m);right:var(--s-m);background:none;border-top:0;border-inline:0}
.lb__prev{left:var(--s-m)}
.lb__next{right:var(--s-m)}
.lb__count{position:absolute;bottom:var(--s-s);left:0;right:0;text-align:center}
.price-lg{font:400 var(--t-price-lg)/var(--lh-price-lg) var(--f-display);color:var(--c-text)}
.specs{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-xs) var(--s-l);padding-block:var(--s-m);border-block:var(--border)}
.specs dd{font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--c-text)}
.acc details{border-bottom:var(--border)}
.acc summary{display:flex;justify-content:space-between;align-items:center;min-height:var(--tap);padding-block:var(--s-xs);list-style:none;cursor:pointer;font:500 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.12em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:var(--s-xs);height:var(--s-xs);color:var(--c-accent);  /* a drawn 12px cross: sits exactly on the right edge, unlike a "+" character */
  background:linear-gradient(currentColor,currentColor) center / 100% 1px no-repeat,linear-gradient(currentColor,currentColor) center / 1px 100% no-repeat}
.acc details[open] summary::after{background:linear-gradient(currentColor,currentColor) center / 100% 1px no-repeat}
.acc details > p{padding-bottom:var(--s-s)}
.formats--compare .format:not(.format--this) .format__box{border-color:var(--c-line-strong);background:none}
.formats--compare .format--this .format__box{border-width:2px;background:var(--img) center/cover}

/* Making-of videos */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2xl) var(--s-l);align-items:start}
.vids--2{grid-template-columns:repeat(2,1fr)}
.vid video{display:block;width:100%;height:auto;background:#000}
.vid figcaption{margin-top:var(--s-s)}
/* Proceso: a lead statement beside four numbered steps, then the studio videos as an even grid */
.process{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-2xl);align-items:start;padding-bottom:var(--s-section)}
.process__lead{position:sticky;top:calc(var(--header-h) + var(--s-xl))}
.process__note{margin-top:var(--s-xl);padding-top:var(--s-l);border-top:var(--border);max-width:44ch}
.process__steps{list-style:none;margin:0;padding:0;border-top:var(--border)}
.process__step{display:grid;grid-template-columns:var(--s-3xl) minmax(0,1fr);gap:var(--s-l);align-items:baseline;padding-block:var(--s-xl);border-bottom:var(--border)}
.process__n{font:400 var(--t-h2-feature)/var(--lh-h2-feature) var(--f-display);color:var(--c-accent)}
.process__step .text{max-width:52ch}
/* Proceso: one set of steps per technique. The tab row sits on the steps' top rule; the gold bar marks the open one */
.ptabs__list{display:flex;gap:var(--s-l);overflow-x:auto;scrollbar-width:none}
.ptabs__list[hidden]{display:none}
.ptabs__tab{position:relative;z-index:1;flex:none;height:var(--h-btn);padding:0;border:0;background:none;cursor:pointer;
  font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-muted);transition:color var(--dur) var(--ease)}
.ptabs__tab:hover,.ptabs__tab[aria-selected="true"]{color:var(--c-text)}
.ptabs__tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-accent)}
.ptabs__tab:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.ptabs__heading{margin-bottom:var(--s-m);color:var(--c-accent)}
.ptabs__panel + .ptabs__panel{margin-top:var(--s-2xl)}   /* no JS: every technique in a row */
.ptabs.is-ready .ptabs__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* tabs show the name; screen readers still get the heading */
.ptabs.is-ready .ptabs__panel{margin-top:0}
.vgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2xl) var(--s-l)}
.vtile figcaption{margin-top:var(--s-s)}
.vtile figcaption .meta{margin-top:var(--s-3xs)}
.vtile figcaption a{text-decoration:none;border-bottom:1px solid var(--c-line-strong)}
.vtile figcaption a:hover{color:var(--c-accent);border-color:var(--c-accent)}
.vtile__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#000}  /* every tile the same shape; the video plays at its own shape in the viewer */
.vtile__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.vtile__media:hover img{transform:scale(1.03)}
.vtile__media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(8,9,10,.72))}
.vtile__play{position:absolute;z-index:1;left:var(--s-s);bottom:var(--s-s);display:flex;align-items:center;gap:var(--s-xs);color:#fff}
.vtile__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--h-btn);height:var(--h-btn);border:1px solid var(--c-accent);border-radius:50%;color:var(--c-accent);padding-left:var(--s-3xs);background:rgba(8,9,10,.4);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.vtile__media:hover .vtile__icon{background:var(--c-accent);color:var(--c-on-accent)}
/* video viewer */
.vlb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:var(--s-xl) var(--gutter);border:0;background:transparent;color:var(--c-text)}
.vlb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-s)}
.vlb::backdrop{background:rgba(8,9,10,.94)}
.vlb video{display:block;max-width:min(100%,1280px);max-height:calc(100vh - 2 * var(--s-xl) - 96px);background:#000}
.vlb__close{position:absolute;top:var(--s-m);right:var(--gutter)}
.vlb__cap{text-align:center}

/* Forms */
.form{display:grid;gap:var(--s-m);max-width:640px}
.field{display:grid;gap:var(--s-2xs)}
.field__req{color:var(--c-accent);margin-left:var(--s-3xs)}   /* required-field mark */
.form__req .field__req{margin:0}
.field > label{font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-muted)}
.field input,.field select,.field textarea{width:100%;min-height:var(--tap);padding:var(--s-xs) var(--s-s);background:var(--c-surface);border:1px solid var(--c-line-strong);color:var(--c-text);font:400 var(--t-body)/var(--lh-body) var(--f-text)}
.field textarea{min-height:176px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c-accent);outline-offset:0}
.field .meta{margin-top:var(--s-3xs)}
.field input[type=file]{padding:var(--s-2xs)}
.field input[type=file]::file-selector-button{margin-right:var(--s-s);padding:var(--s-2xs) var(--s-s);border:1px solid var(--c-accent);background:transparent;color:var(--c-accent);font:600 var(--t-ui)/var(--lh-ui) var(--f-text);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.hp{display:none}

/* Reservation (works like a cart; ends in one reservation form, paid later by bank transfer) */
.res-link{display:inline-flex;align-items:center;gap:var(--s-2xs);text-decoration:none;color:var(--c-accent)}
.res-link[hidden]{display:none}
.res-count{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 var(--s-2xs);border:1px solid var(--c-accent);border-radius:999px;background:transparent;color:var(--c-accent);font:600 var(--t-ui)/24px var(--f-text);letter-spacing:0}   /* same as the filter count: gold on dark reads, dark on a gold dot didn't */
.btn-quiet{background:none;border-top:0;border-inline:0;cursor:pointer;align-self:center}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.res-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-l);padding-block:var(--s-l);margin-bottom:var(--s-xl);border-block:var(--border)}
.res-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-2xl);align-items:start}
.res-items > h2,.res-form > h2{margin-bottom:var(--s-m)}
.res-item{display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;gap:var(--s-m);align-items:center;padding-block:var(--s-s);border-bottom:var(--border)}
.res-item:first-child{border-top:var(--border)}
.res-item__img{display:block;width:96px;aspect-ratio:3/4;overflow:hidden;background:#000}
.res-item__img img{width:100%;height:100%;object-fit:cover}
.res-item__info{display:grid;gap:var(--s-3xs)}
.res-item__info a{text-decoration:none}
.res-item__info a:hover{color:var(--c-accent)}
.receipt{margin-top:var(--s-xl);max-width:720px}
.receipt[hidden]{display:none}
.receipt__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-2xs) var(--s-m);margin-bottom:var(--s-m)}
.receipt__head .label span{color:var(--c-text)}
.receipt > .meta + .meta{margin-top:var(--s-2xs)}
.res-item--rec{grid-template-columns:96px minmax(0,1fr) auto}
.res-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-m);padding-block:var(--s-m) var(--s-2xs)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-m)}
.field-row--street{grid-template-columns:minmax(0,1fr) 120px}   /* street wide, number narrow */
[data-ship-only][hidden],.res-status[hidden]{display:none}
fieldset{margin:0;padding:0;border:0;min-width:0}
/* Delivery: two options as selectable boxes (a native select hid the choice behind a menu) */
.choice{grid-template-columns:1fr 1fr;gap:var(--s-xs)}
.choice > legend{grid-column:1 / -1;margin-bottom:var(--s-2xs);padding:0;font:500 var(--t-label)/var(--lh-label) var(--f-text);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-muted)}
.choice > .choice__opt{position:relative;text-transform:none;letter-spacing:0;display:flex;align-items:center;min-height:var(--tap);padding:var(--s-xs) var(--s-s);border:1px solid var(--c-line-strong);background:var(--c-surface);cursor:pointer;
  font:400 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--c-text);transition:border-color var(--dur) var(--ease)}
.choice__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice__opt span::before{content:"";display:inline-block;box-sizing:border-box;width:16px;height:16px;margin-right:var(--s-2xs);vertical-align:-2px;border:1px solid var(--c-line-strong);border-radius:50%}
.choice__opt:has(input:checked){border-color:var(--c-accent);color:var(--c-accent)}
.choice__opt:has(input:checked) span::before{border-color:var(--c-accent);background:var(--c-accent);box-shadow:inset 0 0 0 3px var(--c-surface)}
.choice__opt:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:2px}
.address{display:grid;gap:var(--s-m)}
.address > legend{margin-bottom:var(--s-m);padding:0;color:var(--c-text)}
/* Artwork page: once the piece is in the reservation, a status line with an undo sits above the buttons */
.res-status{display:flex;align-items:center;gap:var(--s-2xs);font:400 var(--t-meta)/var(--lh-meta) var(--f-text);color:var(--c-text)}
.res-status svg{color:var(--c-accent);flex:none}
.res-status__sep{color:var(--c-muted)}
.res-status__rm{padding:0;background:none;border:0;cursor:pointer;font:inherit;color:var(--c-muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--s-3xs)}
.res-status__rm:hover{color:var(--c-text)}
.copy > .res-status:not([hidden]) + .actions{margin-top:var(--s-s)}
.pdp__actions{display:grid;gap:var(--s-xs);max-width:448px}   /* both buttons full width of the column, stacked, same size */

/* Text pages (shipping, care, legal) */
.prose{max-width:68ch}
.prose > * + *{margin-top:var(--s-s)}
.prose h2{margin-top:var(--s-xl);font:400 var(--t-h3)/var(--lh-h3) var(--f-display)}
.prose p,.prose li{color:var(--c-muted)}
.prose ul{list-style:disc;padding-left:var(--s-m)}
.prose li + li{margin-top:var(--s-2xs)}
.prose a{color:var(--c-accent)}
.draft{padding:var(--s-s) var(--s-m);border:1px dashed var(--c-accent);color:var(--c-accent);font-size:var(--t-meta);line-height:var(--lh-meta)}

/* ---------- 8 · PAGE SECTIONS ---------- */
/* Hero: full-bleed image, title bottom-left, side copy bottom-right */
.hero{position:relative;height:100vh;min-height:640px;max-height:1000px;overflow:hidden;background:#000}
.hero > img,.hero > video{width:100%;height:100%;object-fit:cover;filter:brightness(.74)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.5),transparent 24%,transparent 45%,var(--c-overlay))}
.hero__content{position:absolute;z-index:2;inset:auto 0 var(--s-2xl) 0}
.hero__content .container{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s-xl)}
.hero .display{max-width:11ch}
.hero .copy .text{color:#E1DBCE;max-width:36ch}

/* Feature: "Nueva obra", one new piece shown whole under the hero (switched by FEATURED in build.py) */
.feature__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-2xl);align-items:center}
.feature__img{display:flex;justify-content:center;align-items:center;height:var(--h-gallery);padding:var(--s-xl);background:var(--c-raised);border:1px solid var(--c-line-strong)}
.feature__img img{width:auto;height:auto;max-width:100%;max-height:100%;box-shadow:0 24px 48px -24px #000}
.feature .actions{align-items:center;gap:var(--s-l)}
.feature__copy > .feature__details{margin-top:var(--s-xl)}
.feature__details{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2xs);max-width:432px}
.feature__details a{display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--c-line-strong)}
.feature__details a:hover{border-color:var(--c-accent)}
.feature__details img{width:100%;height:100%;object-fit:cover}

/* Film band: full-bleed studio video behind the copy */
.film{position:relative;display:flex;align-items:flex-end;min-height:var(--h-film);overflow:hidden;background:#000}
.film > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,10,.78),rgba(8,9,10,.18) 55%,transparent),linear-gradient(transparent 55%,rgba(8,9,10,.6))}
.film__content{position:relative;z-index:2;width:100%;padding-block:var(--s-3xl)}
.film .copy{max-width:560px}
.film .text{color:#E1DBCE}
.film .actions{align-items:center;gap:var(--s-l)}

/* ---------- 9 · RESPONSIVE ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (min-width:1600px){
  .grid-cat{grid-template-columns:repeat(4,1fr)}
  :root{--t-display:112px;--lh-display:112px;--t-h2-feature:72px;--lh-h2-feature:76px;--t-h2:48px;--lh-h2:56px;--t-statement:36px;--lh-statement:44px;
        --s-section:160px;--gutter:56px;--s-band:128px;--h-band:800px;--h-film:800px;--h-gallery:880px;--k:4.4px}
}
@media (max-width:1440px){
  .formats--compare{--fgap:var(--s-xl)}  /* 7-size charts on artwork pages: room for labels wider than the smallest box */
  .nav{gap:var(--s-m)}  /* the full menu stays on one line down to 1281px */
}
@media (max-width:1280px){
  :root{--t-h2-feature:56px;--lh-h2-feature:60px;--s-band:64px;--k:3.2px}
  /* header: menu button from here down (the full nav + reservation link no longer fit) */
  .util .lang{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  /* Menu drawer: slides in from the right over a dimmed page, in the header's glass; Close / Esc / a click outside slide it back */
  .nav{position:fixed;top:0;bottom:0;right:0;z-index:60;flex-direction:column;gap:0;margin:0;width:min(360px,calc(100vw - var(--s-xl)));
    padding:0 var(--gutter) var(--s-l);overflow-y:auto;color:var(--c-text);font-size:var(--t-body);
    background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);
    border-left:1px solid rgb(232 226 212 / .1);box-shadow:inset 1px 0 0 rgb(232 226 212 / .07),-8px 0 32px rgb(0 0 0 / .35);
    transform:translateX(100%);visibility:hidden;transition:transform var(--d-drawer) var(--ease),visibility 0s linear var(--d-drawer)}
  .is-open .nav{transform:none;visibility:visible;transition:transform var(--d-drawer) var(--ease),visibility 0s}
  .nav__head{display:flex;flex:none;align-items:center;justify-content:flex-end;height:var(--header-h);border-bottom:1px solid rgb(232 226 212 / .1)}
  .nav__links{display:flex;flex-direction:column;padding-top:var(--s-xs)}
  .nav__links a{padding-block:var(--s-s);border-bottom:1px solid rgb(232 226 212 / .1)}
  .nav__lang{display:flex;flex-direction:column;gap:var(--s-2xs);margin-top:auto;padding-top:var(--s-xl)}   /* language at the foot, apart from the pages */
  .nav__lang .label{color:var(--c-muted)}
  .nav__lang .lang{gap:var(--s-xs)}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgb(8 9 10 / .4);opacity:0;visibility:hidden;transition:opacity var(--d-drawer) var(--ease),visibility 0s linear var(--d-drawer)}
  .is-open .nav-scrim{opacity:1;visibility:visible;transition:opacity var(--d-drawer) var(--ease),visibility 0s}
  body.menu-open{overflow:hidden}
  .util{margin-left:auto}
  .grid-4{grid-template-columns:1fr 1fr;row-gap:var(--s-xl)}
  .grid-cat{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:minmax(0,1.4fr) minmax(352px,1fr);column-gap:var(--s-xl)}
  .vids{grid-template-columns:repeat(2,1fr)}
  .formats{grid-template-columns:repeat(var(--tc,3),minmax(0,1fr));justify-content:normal}  /* tablet: equal columns (4 when the chart has 4 sizes, else 3), 60 cm = a full column */
  .format__box{width:min(calc(var(--w) / 60 * 100%),calc(var(--w) * var(--k)))}
  .band,.band--rev{grid-template-columns:1fr 1fr}
  .terms{grid-template-columns:1fr 1fr}
  .terms > :nth-child(3){padding-left:0;border-left:0}
  .terms > :nth-child(n+3){border-top:var(--border)}
  .site-footer .cols{grid-template-columns:repeat(3,1fr);row-gap:var(--s-l)}
  .site-footer .cols > :first-child{grid-column:1 / -1}
}
@media (max-width:1000px){
  .process{grid-template-columns:1fr;gap:var(--s-xl)}
  .about{grid-template-columns:1fr;gap:var(--s-xl)}
  .process__lead{display:contents}  /* phone/tablet: statement, steps, then the relief note */
  .process__lead.process__lead--block{display:block;position:static}   /* a heading block that must stay one piece on phones */
  .process__note{order:2;margin-top:0}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root{--header-h:88px;--t-display:72px;--lh-display:72px;--t-h2-feature:56px;--lh-h2-feature:60px;--t-h2:36px;--lh-h2:44px;--t-statement:28px;--lh-statement:36px;
        --s-section:112px;--gutter:32px;--h-band:464px;--h-film:640px;--h-gallery:640px;--k:2.4px}
  .pdp{grid-template-columns:minmax(0,1fr)}
  .page-head--work{padding-block:var(--s-s)}
  /* gallery becomes one full-width strip you swipe sideways (Sklum-style), with dots under it */
  .pdp__media{flex-direction:row;gap:var(--s-3xs);margin-inline:calc(var(--gutter) * -1);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .pdp__media::-webkit-scrollbar{display:none}
  .pdp__mosaic{display:contents}
  .pdp__lead,.pdp__video,.pdp__mosaic li{flex:0 0 100%;aspect-ratio:1;scroll-snap-align:center;scroll-snap-stop:always}  /* square on tablets, 4:5 on phones */
  .pdp__lead .zoom{height:100%;border:0}
  .pdp__video{aspect-ratio:1}
  .pdp__mosaic .zoom,.pdp__mosaic .m-1 .zoom{height:100%;aspect-ratio:auto;background:#000}
  .pdp__mosaic .m-1 img{object-fit:cover}
  .pdp__dots:not([hidden]){display:flex;justify-content:center;flex-wrap:wrap;grid-column:1;padding-top:var(--s-xs)}
  .pdp__dots button{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--s-2xs) * 3);height:calc(var(--s-2xs) * 3);padding:0;border:0;background:none;cursor:pointer}
  .pdp__dots button::before{content:"";width:var(--s-2xs);height:var(--s-2xs);border:1px solid var(--c-accent);border-radius:50%;transition:background var(--dur) var(--ease)}
  .pdp__dots button[aria-current="true"]::before{background:var(--c-accent)}
  .pdp__info{grid-column:1;grid-row:auto;margin-top:var(--s-l)}
  .pdp__sticky,.pdp__sticky.has-more{position:static;max-height:none;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}
  .pdp__lead .zoom{padding:var(--s-m)}
  .lb{padding:var(--s-2xl) var(--s-s) calc(var(--h-btn) + var(--s-l))}
  .lb .lb__prev,.lb .lb__next{top:auto;bottom:var(--s-s);margin-top:0}  /* phones: arrows sit under the photo, either side of the counter */
  .lb__prev{left:var(--s-s)}
  .lb__next{right:var(--s-s)}
  .lb__count{bottom:calc(var(--s-s) + (var(--h-btn) - var(--lh-label)) / 2)}  /* centred on the arrows */
  .grid-cat{grid-template-columns:repeat(2,1fr);gap:var(--s-xl) var(--s-m)}
  .res-layout,.res-steps{grid-template-columns:1fr}
  .feature__grid{grid-template-columns:1fr;gap:var(--s-xl)}
  .feature__img{padding:var(--s-m)}
  .res-steps{gap:var(--s-m)}
  .hero__content .container{grid-template-columns:1fr}
  .section-head:has(> p){flex-direction:column;align-items:flex-start}
  .grid-3{grid-template-columns:1fr 1fr}
  .band,.band--rev{grid-template-columns:1fr}
  .band--rev .band__img{order:0}
  .band__copy,.band--rev .band__copy{padding:var(--s-xl) var(--gutter) 0}
  .row-2,.row-3{display:block}
  .row-2 > * + *,.row-3 > * + *{margin-top:var(--s-s)}
  .row-2 > .eyebrow + *,.row-3 > .eyebrow + *{margin-top:var(--s-xs)}
  .split{grid-template-columns:1fr;border-top:0}
  .split > *{padding-block:calc(var(--s-section) / 2)}
  .split > :first-child{padding-right:0;padding-top:0}
  .split > :last-child{padding-left:0;border-left:0;border-top:var(--border)}
}
@media (max-width:560px){
  :root{--header-h:80px;--t-logo:20px;--lh-logo:24px;--t-logo-sub:16px;--lh-logo-sub:16px;--t-display:48px;--lh-display:52px;--t-h2-feature:44px;--lh-h2-feature:48px;--t-h2:32px;--lh-h2:40px;--t-statement:24px;--lh-statement:32px;
        --s-section:96px;--gutter:20px;--h-film:560px;--h-gallery:480px;--k:2px}
  .site-header .container{gap:var(--s-xs)}                 /* phone: logo + counter + menu must fit 360px */
  .wordmark{gap:var(--s-2xs)}
  .wordmark b{letter-spacing:.1em}
  .wordmark i{letter-spacing:.2em}
  .hero__content{bottom:var(--s-xl)}
  .section-head{flex-direction:column;align-items:flex-start}
  .grid-4{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-s);padding-bottom:var(--s-l)}
  .grid-4 > *{scroll-snap-align:start}
  .grid-3{grid-template-columns:1fr;row-gap:var(--s-xl)}
  .formats{grid-template-columns:1fr 1fr;column-gap:var(--s-m)}
  .terms{grid-template-columns:1fr}
  .terms > *{padding-left:0!important;border-left:0!important}
  .terms > * + *{border-top:var(--border)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .grid-cat,.vids,.vids--2{grid-template-columns:1fr}
  .process__step{grid-template-columns:var(--s-2xl) minmax(0,1fr);gap:var(--s-s);padding-block:var(--s-l)}
  .vgrid{grid-template-columns:1fr;gap:var(--s-xl)}
  .pdp__lead .zoom{padding:var(--s-s)}
  .pdp__lead,.pdp__video,.pdp__mosaic li{aspect-ratio:4 / 5}
  .feature__img{padding:var(--s-s)}
  .filter{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:var(--s-3xs)}
  .filters__bar{gap:var(--s-xs)}  /* phone: Filtrar + sort on one row */
  .filters__toggle{padding:0 var(--s-xs)}   /* 12 px sides on phones so the sort label keeps room */
  .filters__end{flex:1;min-width:0}
  .filters__head,.filters__groups,.filters__foot{padding-inline:var(--gutter)}
  .sort{flex:1;min-width:0}
  .sort > .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sort select{flex:1;min-width:0;padding-left:var(--s-xs)}
  .filters__foot{flex-direction:column-reverse;align-items:stretch;gap:var(--s-s)}  /* phone: full-width button, Borrar filtros under it */
  .filters__foot .link-arrow{align-self:center}
  .chip{flex:none}
  .film::after{background:linear-gradient(rgba(8,9,10,.2),rgba(8,9,10,.62) 40%,rgba(8,9,10,.82))}
  .res-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .res-item{grid-template-columns:72px minmax(0,1fr);row-gap:var(--s-2xs)}
  .res-item__img{width:72px;grid-row:span 3}
  .res-item .price,.res-item .btn-quiet{grid-column:2;justify-self:start}
  .field-row{grid-template-columns:1fr}
  .field-row--street{grid-template-columns:minmax(0,1fr) 96px}   /* phone: street and number stay on one row */
  .choice{grid-template-columns:1fr}
}
@media (max-width:359px){   /* the narrowest phones (320px): a smaller wordmark so the menu still fits */
  :root{--t-logo:16px;--lh-logo:20px}
  .wordmark i{letter-spacing:.2em}
}