/* FONTS, self-hosted 29/10 (PageSpeed: Google Fonts CSS was render-blocking). Archivo variable + IBM Plex Mono, latin + latin-ext, OFL. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-300-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-300-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arquitectocaracas.com, v3 (29/10): the August palette (carbón, crema, beige, taupe) and the August layout
   (dark hero, pillar strip, alternating light and dark bands, numbered process), with brand v3's logo and type. */
:root {
  --carbon:#191918; --carbon-2:#26241F; --crema:#F8F5F0; --lino:#EFEAE2; --beige:#D0AA7E; --beige-dk:#BE9668;
  --taupe:#9E8A76; --cuero:#7D6B59; --ink:#191918; --muted:#5E554C; --rule:#E2DCD2; --rule-dk:#3A3631;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px); --top:76px;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--crema); color:var(--ink); font-family:var(--display); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
img, video, svg { display:block; max-width:100%; }
a { color:inherit; }
h1, h2, h3 { margin:0; text-wrap:balance; letter-spacing:-.01em; }
h2 { font-size:clamp(1.9rem,1.1rem + 2.6vw,3.2rem); line-height:1.02; font-weight:780; font-variation-settings:"wdth" 112; text-transform:uppercase; }
h3 { font-size:1.25rem; line-height:1.2; font-weight:700; }
p { margin:0 0 1rem; }
.wrap { max-width:76rem; margin:0 auto; padding:0 var(--gutter); }
.narrow { max-width:52rem; }
.label { display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cuero); margin-bottom:1rem; }
.small { font-size:.85rem; color:var(--muted); }
.line { font-size:clamp(1.1rem,1rem + .5vw,1.3rem); line-height:1.55; color:var(--muted); }
.more { font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.25rem; }

/* logo (OT "Líneas de plano") on the carbón header */
.logo { width:clamp(12rem,18vw,15rem); height:auto; --mk:var(--beige); --gd:var(--carbon); }
.logo .wm, .logo-foot .wm { font-family:var(--display); font-weight:750; font-variation-settings:"wdth" 112; fill:var(--crema); }
.logo .rl, .logo-foot .rl { fill:var(--beige); }
.logo .ds, .logo-foot .ds { font-family:var(--mono); font-weight:500; fill:var(--taupe); }
.logo-sm { display:none; width:2.6rem; height:auto; --mk:var(--beige); --gd:var(--carbon); }

.top { position:sticky; top:0; z-index:10; background:var(--carbon); border-bottom:1px solid var(--rule-dk); }
.top-in { display:flex; align-items:center; gap:2rem; height:var(--top); padding:0 var(--gutter); max-width:90rem; margin:0 auto; }
.home { display:block; text-decoration:none; }
.top nav { display:flex; gap:2rem; margin-left:auto; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
.top nav a { color:var(--crema); text-decoration:none; padding:.4rem 0; border-bottom:1px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { border-color:var(--beige); color:var(--beige); }

.btn { display:inline-block; background:var(--beige); color:var(--carbon); font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; padding:1.05rem 1.6rem; text-decoration:none; transition:background .2s; }
.btn:hover { background:var(--beige-dk); }
.btn-sm { padding:.75rem 1.1rem; font-size:.72rem; }

/* hero: the film full-bleed under a carbón veil, text bottom-left (the August opener) */
.hero { position:relative; isolation:isolate; overflow:hidden; background:var(--carbon); color:var(--crema); min-height:min(88svh,52rem); display:flex; align-items:flex-end; }
.hero-media { position:absolute; inset:0; z-index:-1; }
.hero-media video, .hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(25,25,24,.94) 8%, rgba(25,25,24,.55) 50%, rgba(25,25,24,.3)); }
.v-tall { display:none; }
.hero-text { width:100%; max-width:90rem; margin:0 auto; padding:clamp(6rem,14vh,10rem) var(--gutter) clamp(3rem,7vw,5.5rem); }
.hero .label { color:var(--beige); }
.hero h1 { font-size:clamp(2.6rem,1.2rem + 4.8vw,5.6rem); line-height:.96; font-weight:800; font-variation-settings:"wdth" 116; text-transform:uppercase; max-width:15ch; }
.hero h1 span { display:block; }
.hero h1 .b { color:var(--beige); font-weight:500; font-variation-settings:"wdth" 90; text-transform:none; letter-spacing:0; margin-top:.12em; font-size:.62em; }
.hero .line { color:#D9D2C7; max-width:34rem; margin:1.6rem 0 2rem; }
.lines { width:8rem; height:auto; margin-top:1.6rem; }
.lines path { stroke:var(--beige); stroke-width:2; fill:none; }

/* bands */
.band { padding:clamp(4rem,9vw,7.5rem) 0; }
.dark { background:var(--carbon); color:var(--crema); }
.dark .label { color:var(--beige); }
.dark .line, .dark p { color:#CFC7BB; }
.dark .more { color:var(--beige); }
.tinted { background:var(--lino); }
.head2 { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1rem 4rem; align-items:end; margin-bottom:clamp(2rem,5vw,3.5rem); }
.head2 p { margin:0; color:var(--muted); }
.dark .head2 p { color:#CFC7BB; }

/* pillar strip */
.strip { border-bottom:1px solid var(--rule); }
.pillars { display:grid; grid-template-columns:repeat(4,1fr); }
.pillars > div { padding:2.6rem 1.8rem 2.4rem 0; border-right:1px solid var(--rule); margin-right:1.8rem; }
.pillars > div:last-child { border-right:0; margin-right:0; }
.pillars .pillar-t { font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin:.9rem 0 .6rem; }
.pillars p { color:var(--muted); font-size:.95rem; margin:0; }

/* two doors */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); }
.panel { text-decoration:none; display:block; }
.panel img { width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:1.4rem; transition:transform .5s; }
.panel:hover img { transform:translateY(-4px); }
.panel h3 { font-size:clamp(1.4rem,1rem + 1.4vw,2rem); line-height:1.1; font-weight:500; margin:.2rem 0 .8rem; }
.panel h3 span { display:block; color:var(--cuero); }
.panel p { color:var(--muted); max-width:30rem; }

/* split: text on one side, image on the other, edge to edge (the August "Mi especialidad") */
.split-full { display:grid; grid-template-columns:1fr 1fr; background:var(--lino); }
.split-full .txt { padding:clamp(3.5rem,8vw,7rem) var(--gutter); align-self:center; max-width:40rem; justify-self:end; }
.split-full img { width:100%; height:100%; min-height:28rem; object-fit:cover; }
.split-full .txt p { color:var(--muted); }

.rows { list-style:none; padding:0; margin:0 0 2rem; }
.rows li { display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:.4rem 2rem; padding:1.1rem 0; border-top:1px solid var(--rule); }
.rows li:last-child { border-bottom:1px solid var(--rule); }
.dark .rows li { border-color:var(--rule-dk); }
.k { font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cuero); padding-top:.2rem; }
.dark .k { color:var(--beige); }
.split2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem 5rem; align-items:start; }
.huge { font-size:clamp(2rem,1rem + 2.6vw,3.3rem); line-height:1; font-weight:800; font-variation-settings:"wdth" 116; text-transform:uppercase; margin:0; }
.huge span { display:block; color:var(--beige); }
.split-img img { width:100%; aspect-ratio:4/5; object-fit:cover; }

/* projects and doors */
.trip { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1.2rem; }
.trip img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.proj { text-decoration:none; display:block; }
.cap { display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.8rem; color:var(--taupe); }
.doors { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2rem); }
.doors a { text-decoration:none; }
.doors img { width:100%; aspect-ratio:3/4; object-fit:cover; margin-bottom:1rem; transition:transform .5s; }
.doors a:hover img { transform:translateY(-4px); }
.doors h3 { text-transform:uppercase; font-variation-settings:"wdth" 112; }
.doors p { color:var(--muted); }

/* numbered process (the August "Así trabajamos") */
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:2rem; counter-reset:s; }
.steps li { border-top:1px solid var(--rule); padding-top:1.4rem; counter-increment:s; }
.steps li::before { content:counter(s, decimal-leading-zero); display:block; font-size:clamp(2.4rem,1.4rem + 2.4vw,3.6rem); font-weight:300; line-height:1; color:var(--taupe); margin-bottom:1.2rem; }
.steps h3 { font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:.6rem; }
.steps p { color:var(--muted); font-size:.98rem; margin:0; }
.dark .steps li { border-color:var(--rule-dk); }

.sheet { border:1px solid var(--rule); background:#fff; margin:0 0 1.5rem; font-family:var(--mono); font-size:.86rem; }
.sheet div { display:flex; justify-content:space-between; gap:1rem; padding:.95rem 1.2rem; border-top:1px solid var(--rule); }
.sheet div:first-child { border-top:0; }
.sheet span { text-transform:uppercase; letter-spacing:.08em; }
.sheet i { flex:0 0 7rem; border-bottom:1px dashed var(--taupe); margin-bottom:.35rem; }
.sheet .verdict { background:var(--beige); color:var(--carbon); font-weight:500; }

.quote { font-size:clamp(1.5rem,1rem + 2vw,2.3rem); line-height:1.2; font-weight:400; margin:0; }
.prose p { font-size:1.1rem; }
.faq details { border-top:1px solid var(--rule); padding:1.1rem 0; }
.faq details:last-child { border-bottom:1px solid var(--rule); }
.faq summary { cursor:pointer; font-weight:650; font-size:1.1rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); color:var(--cuero); }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:.8rem 0 0; color:var(--muted); }
.gallery { columns:3 18rem; column-gap:.8rem; }
.gallery img { width:100%; margin:0 0 .8rem; break-inside:avoid; }
.page-h1 { font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem); text-transform:uppercase; font-variation-settings:"wdth" 116; margin-bottom:1.5rem; }
.facts { list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem 2rem; color:#D9D2C7; }
.cross { text-align:center; padding:2.4rem var(--gutter); background:var(--lino); }
.cross a { font-weight:650; }

/* close */
.close { background:var(--carbon); color:var(--crema); padding:clamp(4.5rem,10vw,8rem) 0; }
.close-mark { width:3.6rem; height:auto; --mk:var(--beige); --gd:var(--carbon); margin-bottom:2rem; }
.signoff { font-size:clamp(2.2rem,1rem + 4.5vw,4.6rem); line-height:1; font-weight:800; font-variation-settings:"wdth" 116; text-transform:uppercase; margin:0 0 1.2rem; }
.close p:not(.signoff) { font-size:1.15rem; max-width:34rem; margin-bottom:2rem; color:#CFC7BB; }

.foot { background:var(--carbon); color:var(--crema); border-top:1px solid var(--rule-dk); padding:3.5rem 0 2.5rem; }
.foot-in { display:grid; gap:1.5rem; }
.logo-foot { width:min(16rem,70%); height:auto; --mk:var(--beige); --gd:var(--carbon); }
.foot-links { display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.foot-links a { text-decoration:none; color:var(--crema); }
.foot .small { color:var(--taupe); }

/* axis bubbles: every section label is a structural grid axis, lettered down the page */
body { counter-reset:axis; }
.label.ax { display:flex; align-items:center; gap:.9rem; counter-increment:axis; }
.label.ax::before { content:counter(axis, upper-alpha); flex:0 0 auto; width:2rem; height:2rem; border:1px solid currentColor; border-radius:50%;
  display:grid; place-items:center; font-size:.78rem; letter-spacing:0; }
.label.ax::after { content:""; flex:1; height:0; border-top:1px dashed currentColor; opacity:.45; max-width:14rem; }

/* registration ticks on the two doors: a print pinned to the board */
.panel { position:relative; }
.panel::before, .panel::after { content:""; position:absolute; width:22px; height:22px; border:1.5px solid var(--cuero); pointer-events:none; }
.panel::before { top:-8px; left:-8px; border-right:0; border-bottom:0; }
.panel::after { top:calc((100% - 0px) * 0 + -8px); right:-8px; border-left:0; border-bottom:0; }

/* RECORRIDO: the walk-through and the room list that follows it */
.tour-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,22rem); gap:0 clamp(3rem,8vw,7rem); align-items:end; }
.tour-head { grid-column:1; }
.tour-list { grid-column:1; }
.tour-film { grid-column:2; grid-row:1/3; align-self:center; }
.tour h2 span { display:block; color:var(--beige); }
.tour .line { margin:1.4rem 0 2rem; }
.rooms { list-style:none; padding:0; margin:0 0 2.2rem; counter-reset:r; }
.rooms li { list-style:none; }
.rooms button { all:unset; box-sizing:border-box; width:100%; display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; border-top:1px solid var(--rule-dk); cursor:pointer; counter-increment:r; color:#8E857A; transition:color .3s; }
.rooms li:last-child button { border-bottom:1px solid var(--rule-dk); }
.rooms button::before { content:counter(r, decimal-leading-zero); font:500 .72rem/1 var(--mono); letter-spacing:.1em; color:var(--taupe); width:1.6rem; }
.rooms button span { font-size:clamp(1.15rem,1rem + .6vw,1.5rem); font-weight:650; text-transform:uppercase; font-variation-settings:"wdth" 112; position:relative; }
.rooms button span::after { content:""; position:absolute; left:0; right:0; bottom:-.2rem; height:2px; background:var(--beige); transform:scaleX(0); transform-origin:left; transition:transform .5s; }
.rooms button em { margin-left:auto; font:500 .66rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; font-style:normal; color:var(--taupe); }
.rooms button.on, .rooms button:hover, .rooms button:focus-visible { color:var(--crema); }
.rooms button.on span::after { transform:none; }
.rooms button.on em { color:var(--beige); }
.tour-film { margin:0; position:relative; padding:14px; }
.tour-film video { width:100%; aspect-ratio:9/16; object-fit:cover; }
.tour-film::before, .tour-film::after { content:""; position:absolute; width:34px; height:34px; border:1.5px solid var(--beige); }
.tour-film::before { top:0; left:0; border-right:0; border-bottom:0; }
.tour-film::after { bottom:0; right:0; border-left:0; border-top:0; }

/* before / after: the same section line, dragged */
.ba { position:relative; aspect-ratio:4/3; max-width:56rem; margin:0 auto; overflow:hidden; background:var(--carbon); touch-action:pan-y; }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-cut { position:absolute; top:0; bottom:0; left:var(--pos); border-left:1.5px solid var(--crema); pointer-events:none; }
.ba-cut::before { content:""; position:absolute; top:50%; left:-14px; width:26px; height:26px; margin-top:-13px; border:1.5px solid var(--crema); border-radius:50%; background:rgba(25,25,24,.55); }
.ba-cut b { position:absolute; top:1rem; font:500 .66rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; padding:.35rem .5rem; white-space:nowrap; }
.ba-cut b:first-child { right:.7rem; background:var(--carbon); color:var(--crema); }
.ba-cut b:last-child { left:.7rem; background:var(--beige); color:var(--carbon); }
.ba input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.ba:focus-within { outline:2px solid var(--beige); outline-offset:3px; }
.head2 h2 span { display:block; color:var(--cuero); }
.dark .head2 h2 span { color:var(--beige); }
/* short clips from the works */
.clip { width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--carbon-2); }
.clips { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.duo-clip { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,17rem); gap:2rem clamp(3rem,8vw,7rem); align-items:center; }
.clip-frame { margin:0; }
.clip-frame figcaption, .split-img figcaption { font:500 .68rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin-top:.7rem; }

/* footer as a sheet's title block (cajetín) */
.cajetin { display:grid; grid-template-columns:1.5fr repeat(4,1fr); border:1px solid var(--rule-dk); }
.cajetin > div { padding:1.1rem 1.2rem; border-left:1px solid var(--rule-dk); font-size:.95rem; }
.cajetin > div:first-child { border-left:0; display:flex; align-items:center; }
.cajetin span { display:block; font:500 .64rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--taupe); margin-bottom:.6rem; }
.cajetin .cj-links { grid-column:1/-1; border-left:0; border-top:1px solid var(--rule-dk); display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:baseline; font:500 .74rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.cajetin .cj-links span { margin:0 1rem 0 0; }
.cajetin a { color:var(--crema); text-decoration:none; }
.cajetin a:hover { color:var(--beige); }
.cajetin .logo-foot { width:100%; max-width:15rem; }

@media (max-width:980px) {
  .duo-clip { grid-template-columns:minmax(0,1fr) minmax(0,40%); gap:1.2rem; }
  .clips { gap:.5rem; }
  .tour-in { grid-template-columns:minmax(0,1fr) minmax(0,38%); gap:0 1.2rem; align-items:start; }
  .tour-head { grid-column:1/-1; } .tour-list { grid-column:1; grid-row:2; } .tour-film { grid-column:2; grid-row:2; padding:8px; }
  .cajetin { grid-template-columns:1fr 1fr; }
  .cajetin > div:first-child { grid-column:1/-1; border-bottom:1px solid var(--rule-dk); }
  .cajetin > div:nth-child(2), .cajetin > div:nth-child(4) { border-left:0; }
  .cajetin > div:nth-child(n+4) { border-top:1px solid var(--rule-dk); }
}
@media (max-width:640px) {
  .hero h1 { font-size:clamp(1.7rem,8.2vw,2.4rem); font-variation-settings:"wdth" 106; }
  .duo-clip { grid-template-columns:1fr !important; gap:1.6rem !important; }
  h2 { overflow-wrap:break-word; }
  .rooms button em { display:none; }
  .rooms button span { font-size:1rem; }
  .rooms button { gap:.6rem; padding:.7rem 0; }
  .tour-film::before, .tour-film::after { width:20px; height:20px; }
}

@media (max-width:980px) {
  .v-tall { display:block; } .v-wide { display:none; }
  .duo, .split2, .head2, .split-full { grid-template-columns:1fr; }
  .split-full .txt { justify-self:start; }
  .split-full img { min-height:20rem; max-height:28rem; }
  .pillars { grid-template-columns:1fr 1fr; }
  .pillars > div { border-right:0; margin-right:0; padding-right:1rem; border-bottom:1px solid var(--rule); }
  .steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .logo { display:none; } .logo-sm { display:block; }
  .rows li { grid-template-columns:1fr; }
  .pillars > div { padding:1.6rem 1rem 1.4rem 0; }
  .doors { grid-template-columns:1fr; }
  .doors img { aspect-ratio:4/3; }
  .trip { grid-template-columns:1fr 1fr; } .trip img:last-child { display:none; }
  .steps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .panel img, .doors img { transition:none; }
}


/* ===================== 29/10 polish: one idea per hero, an icon on every block, a menu on the phone ===================== */

/* icons: Lucide line drawings at a drafting weight, in the brand's beige-brown; three sizes only */
.ic { width:2.25rem; height:2.25rem; color:var(--cuero); display:block; flex:none; }
.ic-l { width:3rem; height:3rem; }
.dark .ic, .close .ic { color:var(--beige); }
.ic-btn { width:1.15rem; height:1.15rem; display:inline-block; vertical-align:-.22em; margin-right:.6rem; stroke-width:1.8; }
.btn { display:inline-flex; align-items:center; }

.pillars > div > .ic { margin-bottom:1.1rem; }
.pillars .pillar-t { margin-top:0; }

/* rows: icon · label · line, on one baseline */
.rows li { grid-template-columns:2.25rem minmax(0,13rem) minmax(0,1fr); align-items:start; column-gap:1.4rem; padding:1.25rem 0; }
.rows li:not(:has(.ic)) { grid-template-columns:minmax(0,14rem) minmax(0,1fr); }
.rows li .ic { width:1.75rem; height:1.75rem; margin-top:-.15rem; }
.rows .k { padding-top:.3rem; }

/* cards: things that are not a sequence (no numbers), icon over title over line */
.cards { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem); }
.cards li { border-top:1px solid var(--rule); padding-top:1.6rem; }
.dark .cards li { border-color:var(--rule-dk); }
.cards .ic { margin-bottom:1.2rem; }
.cards h3 { font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:.6rem; }
.cards p { color:var(--muted); font-size:.98rem; margin:0; max-width:30ch; }
.head2 h2 span, .cards-head h2 span { display:block; color:var(--cuero); }
.dark .head2 h2 span { color:var(--beige); }
.away .ic { margin-bottom:1.4rem; }

/* every hero: photograph on the right two thirds, words on carbón to the left */
@media (min-width:981px) {
  .hero-media { left:34%; width:66%; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 38%); mask-image:linear-gradient(to right, transparent 0, #000 38%); }
  .hero-media::after { background:linear-gradient(to top, rgba(25,25,24,.55), transparent 45%); }
}
.hero-media img { transform-origin:50% 50%; }

/* MEASURED heroes: the room is dimensioned on the photograph, then the photograph comes up */
.cotas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
.cotas line { stroke:var(--beige); stroke-linecap:square; vector-effect:non-scaling-stroke; }
.cotas text { font-family:var(--mono); font-weight:500; letter-spacing:.12em; text-transform:uppercase; fill:var(--beige);
  paint-order:stroke; stroke:rgba(25,25,24,.8); stroke-width:.4em; stroke-linejoin:round; }

/* SKETCH hero (home): drafting paper, the kitchen drawn in pencil, then washed into the photograph */
.hero.sketch { background:var(--lino); color:var(--carbon); align-items:center; }
.hero.sketch::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(125,107,89,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(125,107,89,.10) 1px, transparent 1px);
  background-size:2rem 2rem; }
.hero.sketch .line { color:var(--muted); }
.hero.sketch h1 .b { color:var(--cuero); }
.sheet-stage { position:absolute; z-index:-1; overflow:hidden; background:var(--lino); }
.sheet-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.js:not(.still) .sketch[data-sketch] .sheet-stage > img { opacity:0; }
.sheet-stage svg { position:absolute; inset:0; width:100%; height:100%; }
.sheet-stage .hand { font-family:"Architects Daughter","Segoe Print","Bradley Hand",cursive; fill:#2F2E2B; }
@media (min-width:981px) {
  .sheet-stage { top:clamp(1.5rem,3vw,2.5rem); bottom:clamp(1.5rem,3vw,2.5rem); right:clamp(1.5rem,3vw,2.5rem); left:45%; border:1px solid var(--rule); }
  .hero.sketch .hero-text { padding-top:clamp(4rem,10vh,7rem); padding-bottom:clamp(4rem,10vh,7rem); }
  .hero.sketch .hero-text > * { max-width:min(38%, 32rem); }
  .hero.sketch h1 { font-size:clamp(2.2rem,.6rem + 3.1vw,4rem); }
}
@media (max-width:980px) {
  .hero.sketch { flex-direction:column; align-items:stretch; min-height:0; }
  .sheet-stage { position:relative; inset:auto; width:100%; aspect-ratio:4/3.2; z-index:0; }
  .hero.sketch .hero-text { padding-top:1.8rem; padding-bottom:3rem; }
}

/* reveal on scroll: visible without JS; with JS, blocks rise once when they arrive */
.js [data-rise] > * { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js [data-rise].in > * { opacity:1; transform:none; }
.js [data-rise].in > *:nth-child(2) { transition-delay:.08s; } .js [data-rise].in > *:nth-child(3) { transition-delay:.16s; }
.js [data-rise].in > *:nth-child(4) { transition-delay:.24s; } .js [data-rise].in > *:nth-child(5) { transition-delay:.32s; }
.js [data-rise].in > *:nth-child(n+6) { transition-delay:.4s; }

/* the phone menu: a burger in the bar, a full panel under it */
.burger { display:none; }
@media (max-width:980px) {
  .top-in { gap:1rem; }
  .btn-sm { margin-left:auto; }
  .burger { display:grid; place-items:center; width:44px; height:44px; background:none; border:1px solid var(--rule-dk); color:var(--crema); cursor:pointer; padding:0; }
  .burger svg { width:22px; height:22px; }
  .burger .x { display:none; }
  .menu-open .burger .x { display:block; } .menu-open .burger .bars { display:none; }
  .top nav { position:fixed; left:0; right:0; top:var(--top); bottom:0; background:var(--carbon); flex-direction:column; gap:0;
    padding:1rem var(--gutter) 2rem; transform:translateY(-110%); visibility:hidden; transition:transform .45s cubic-bezier(.16,1,.3,1), visibility 0s .45s; overflow:auto; }
  .menu-open .top nav { transform:none; visibility:visible; transition:transform .45s cubic-bezier(.16,1,.3,1); }
  .top nav a { font-size:1.05rem; padding:1.15rem 0; border-bottom:1px solid var(--rule-dk); display:flex; justify-content:space-between; align-items:center; }
  .top nav a::after { content:"→"; color:var(--beige); }
  html:not(.js) .top nav { position:static; transform:none; visibility:visible; flex-direction:row; flex-wrap:wrap; padding:0; }
  html:not(.js) .burger { display:none; }
  .menu-open { overflow:hidden; }
  .cards { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .rows li, .rows li:not(:has(.ic)) { grid-template-columns:1.75rem minmax(0,1fr); row-gap:.35rem; }
  .rows li:not(:has(.ic)) { grid-template-columns:1fr; }
  .rows li > span:last-child { grid-column:2; }
  .rows li:not(:has(.ic)) > span:last-child { grid-column:1; }
  .ic { width:2rem; height:2rem; }
}
@media (prefers-reduced-motion:reduce) {
  .js [data-rise] > * { opacity:1; transform:none; transition:none; }
  .top nav { transition:none !important; }
}


/* ===================== v18 (29/10 night): Oscar's own icons, a dark home, both before/afters, the credit ===================== */

/* icons are images now (iconografia-oscar, gold): three sizes, never in a circle */
img.ic { width:4rem; height:4rem; display:block; object-fit:contain; }
img.ic-l { width:5.5rem; height:5.5rem; }
img.ic-btn { width:1.25rem; height:1.25rem; display:inline-block; margin-right:.6rem; flex:none; }
.pillars > div > img.ic { margin-bottom:1.1rem; }
.rows li img.ic { width:2.6rem; height:2.6rem; margin-top:-.35rem; }
.rows li { grid-template-columns:2.6rem minmax(0,13rem) minmax(0,1fr); }
.rows li:not(:has(.ic)) { grid-template-columns:minmax(0,14rem) minmax(0,1fr); }
.split2 > div > img.ic-l, .narrow > img.ic-l { margin-bottom:1.4rem; }
.cards img.ic { margin-bottom:1.2rem; }
.steps li > img.ic { width:3.5rem; height:3.5rem; margin-bottom:1rem; }
.steps li:has(> img.ic)::before { font-size:clamp(1.6rem,1rem + 1.4vw,2.2rem); margin-bottom:.8rem; }
/* the walk-through: a room icon where the number was */
.rooms button { align-items:center; }
.rooms button::before { content:none; }
.rooms img.ic-room { width:2.2rem; height:2.2rem; opacity:.85; transition:opacity .3s, transform .3s; }
.rooms button.on img.ic-room, .rooms button:hover img.ic-room { opacity:1; transform:scale(1.08); }

/* the home opener: measured on the kitchen, then the property in photographs, each with a slow push-in */
.hero.cycle .hero-media img.next { opacity:0; transition:opacity 1.4s ease; }
.hero.cycle .hero-media img.next.on { opacity:1; }
.hero-media img.next { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.still .hero.cycle .hero-media img.next { display:none; }

/* before and after: kitchen and bathroom side by side, stacked on a phone */
.ba-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.2rem); }
.ba-item { margin:0; }
.ba-pair .ba { max-width:none; aspect-ratio:1600/975; }
.ba-item figcaption { margin-top:.9rem; font:500 .74rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cuero); }

/* the credit, as on Nico's site: a cell of the title block */
.cajetin { grid-template-columns:1.5fr repeat(5,1fr); }
.cajetin .cj-credit a { display:inline-flex; }
.cajetin .cj-credit img { height:1.7rem; width:auto; opacity:.9; transition:opacity .3s; }
.cajetin .cj-credit a:hover img { opacity:1; }

/* the bar leaves as you read down and comes back as soon as you scroll up */
.top { transition:transform .45s cubic-bezier(.16,1,.3,1); }
.top.away { transform:translateY(-100%); }
.menu-open .top.away { transform:none; }

@media (max-width:980px) {
  .ba-pair { grid-template-columns:1fr; }
  .cajetin { grid-template-columns:1fr 1fr; }
  .cajetin .cj-credit { grid-column:1/-1; border-left:0; border-top:1px solid var(--rule-dk); }
}
@media (max-width:640px) {
  img.ic { width:3.25rem; height:3.25rem; }
  img.ic-l { width:4.5rem; height:4.5rem; }
  .rows li, .rows li:not(:has(.ic)) { grid-template-columns:2.2rem minmax(0,1fr); }
  .rows li:not(:has(.ic)) { grid-template-columns:1fr; }
  .rows li img.ic { width:2.2rem; height:2.2rem; }
}
@media (prefers-reduced-motion:reduce) { .top { transition:none; } .top.away { transform:none; } }

/* icons on cream need size to read (HagoDigital rule): cards and pillars 88px, steps 72px, rows 48px */
img.ic { width:5.5rem; height:5.5rem; }
img.ic-l { width:6.5rem; height:6.5rem; }
.steps li > img.ic { width:4.5rem; height:4.5rem; }
.rows li { grid-template-columns:3rem minmax(0,13rem) minmax(0,1fr); }
.rows li img.ic { width:3rem; height:3rem; margin-top:-.5rem; }
.rooms img.ic-room { width:2.6rem; height:2.6rem; }
@media (max-width:640px) {
  img.ic { width:4.5rem; height:4.5rem; }
  img.ic-l { width:5rem; height:5rem; }
  .rows li { grid-template-columns:2.6rem minmax(0,1fr); }
  .rows li img.ic { width:2.6rem; height:2.6rem; }
}

/* JP 29/10: the icons read too big; one step down everywhere */
img.ic { width:3.5rem; height:3.5rem; }
img.ic-l { width:4.25rem; height:4.25rem; }
.steps li > img.ic { width:3rem; height:3rem; }
.rows li { grid-template-columns:2.25rem minmax(0,13rem) minmax(0,1fr); }
.rows li img.ic { width:2.25rem; height:2.25rem; margin-top:-.3rem; }
.rooms img.ic-room { width:2rem; height:2rem; }
@media (max-width:640px) {
  img.ic { width:3rem; height:3rem; }
  img.ic-l { width:3.5rem; height:3.5rem; }
  .rows li { grid-template-columns:2rem minmax(0,1fr); }
  .rows li img.ic { width:2rem; height:2rem; }
}

/* JP 29/10: the icon is the marker; no numbers on the steps */
.steps li:has(> img.ic)::before { content:none; }

/* the real WhatsApp mark in the buttons (JP 29/10) */
svg.ic-btn { width:1.2rem; height:1.2rem; display:inline-block; margin-right:.6rem; flex:none; vertical-align:-.2em; }

/* CLOSE: on Inicio a simple plan draws itself, holds, lets go and draws again (JP 30/10, lab option A) */
.close { position:relative; overflow:hidden; isolation:isolate; }
.close .wrap { position:relative; z-index:2; }
.close::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, var(--carbon) 30%, rgba(25,25,24,.55) 48%, transparent 66%); }
.plan-bg { position:absolute; right:-1%; top:50%; transform:translateY(-50%); width:min(64%,900px); height:auto; z-index:0; pointer-events:none; opacity:.55; }
.plan-bg path { fill:none; stroke:var(--beige); vector-effect:non-scaling-stroke; stroke-linecap:square; stroke-linejoin:miter; }
.plan-bg text { font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--beige); }
.js:not(.still) .plan-bg .pl { stroke-dasharray:1; stroke-dashoffset:1; animation:plan-draw 16s cubic-bezier(.55,.05,.3,1) infinite; animation-delay:var(--d); }
.js:not(.still) .plan-bg text { opacity:0; animation:plan-text 16s ease infinite; animation-delay:var(--d); }
@keyframes plan-draw { 0% { stroke-dashoffset:1; opacity:1 } 9% { stroke-dashoffset:0; opacity:1 } 72% { stroke-dashoffset:0; opacity:1 } 84% { stroke-dashoffset:0; opacity:0 } 100% { stroke-dashoffset:1; opacity:0 } }
@keyframes plan-text { 0%, 6% { opacity:0 } 12%, 72% { opacity:.9 } 84%, 100% { opacity:0 } }
@media (max-width:980px) { .plan-bg { width:120%; right:-38%; opacity:.3; } .close::after { background:linear-gradient(90deg, var(--carbon) 10%, rgba(25,25,24,.6) 60%, rgba(25,25,24,.35)); } }
.close .signoff { max-width:11ch; }

/* GUIDES (/guias): the site's drawing language. Dark hero with the short answer in a cajetín, sticky index,
   cotas-style range chart, one framed table, Oscar's band, sources by kind. */
.ghero { background:var(--carbon); color:var(--crema); position:relative; overflow:hidden; isolation:isolate; }
.ghero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(208,170,126,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(208,170,126,.10) 1px,transparent 1px),
  linear-gradient(rgba(208,170,126,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(208,170,126,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px; mask-image:linear-gradient(90deg,transparent 0,#000 55%); }
.ghero-in { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:end; padding-top:clamp(3.5rem,8vw,6.5rem); padding-bottom:clamp(3rem,6vw,5rem); }
.ghero h1 { font-size:clamp(2.3rem,1.3rem + 3.6vw,4.4rem); line-height:1.02; text-transform:uppercase; font-variation-settings:"wdth" 116; margin:1.2rem 0 1.6rem; max-width:15ch; }
.ghero .gans { font-size:clamp(1.12rem,1rem + .45vw,1.35rem); line-height:1.55; color:#DCD3C7; max-width:40rem; margin:0 0 2rem; }
.ghero .gans b { color:var(--crema); }
.crumbs { font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin:0; }
.crumbs a { color:inherit; text-decoration:none; } .crumbs a:hover { color:var(--beige); }
.byline { display:flex; align-items:center; gap:1rem; margin:0; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); line-height:1.7; }
.byline a { color:var(--crema); }
.by-mark { width:2.6rem; height:auto; flex:none; --mk:var(--beige); --gd:var(--carbon); }
.ficha { border:1px solid var(--beige); background:rgba(25,25,24,.82); }
.ficha-t { margin:0; padding:.8rem 1.1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--carbon); background:var(--beige); }
.ficha div { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline; padding:.95rem 1.1rem; border-top:1px solid rgba(208,170,126,.35); }
.ficha span { font-size:.95rem; color:#CFC7BB; }
.ficha b { font-family:var(--display); font-weight:750; font-variation-settings:"wdth" 108; font-size:1.15rem; color:var(--crema); white-space:nowrap; }
.ficha-s { margin:0; padding:.8rem 1.1rem; border-top:1px solid rgba(208,170,126,.35); font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--taupe); }
.gbody { display:grid; grid-template-columns:15rem minmax(0,46rem); gap:clamp(2rem,5vw,5rem); justify-content:center; padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:clamp(3rem,6vw,5rem); }
.gtoc { position:sticky; top:calc(var(--top) + 1.5rem); align-self:start; }
.gtoc p { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cuero); margin:0 0 1rem; }
.gtoc ol { list-style:none; margin:0 0 1.6rem; padding:0; counter-reset:t; border-left:1px solid var(--rule); }
.gtoc li { counter-increment:t; }
.gtoc ol a { display:block; padding:.5rem 0 .5rem 1rem; margin-left:-1px; border-left:2px solid transparent; font-size:.92rem; line-height:1.35; color:var(--muted); text-decoration:none; }
.gtoc ol a::before { content:counter(t,decimal-leading-zero) "  "; font-family:var(--mono); font-size:.7rem; color:var(--taupe); }
.gtoc ol a:hover, .gtoc ol a.on { color:var(--ink); border-left-color:var(--beige); }
.guide h2 { font-size:clamp(1.45rem,1.1rem + 1.1vw,2rem); line-height:1.15; margin:0 0 1.1rem; text-transform:none; font-variation-settings:"wdth" 100; }
.gsec { padding-top:2.8rem; scroll-margin-top:calc(var(--top) + 1rem); }
.guide p, .guide li { font-size:1.08rem; line-height:1.68; }
.guide ul { padding-left:1.15rem; } .guide li { margin-bottom:.35rem; }
.guide li::marker { color:var(--cuero); }
.guide .how, .guide .about { background:var(--lino); border-left:3px solid var(--beige); padding:1.1rem 1.3rem; font-size:.98rem; line-height:1.6; margin:0; }
.guide .about { margin:2.4rem 0 3rem; }
.guide sup a, .guide a.ref { font-family:var(--mono); font-size:.72em; text-decoration:none; color:var(--cuero); }
.guide .call { font-size:1.18rem; line-height:1.55; font-weight:600; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); padding:1.1rem 0; margin:1.8rem 0; }
/* the range chart: each row a dimension line, ticks at both ends, values over the ends */
.cotas-chart { background:var(--carbon); color:var(--crema); margin:1.8rem 0; padding:1.3rem 1.4rem 1.1rem; }
.cotas-chart figcaption { font-weight:650; font-size:1.02rem; margin-bottom:1.3rem; }
.cotas-chart .cc-row { display:grid; grid-template-columns:11rem 1fr; gap:1rem; align-items:center; padding:.85rem 0; border-top:1px solid rgba(208,170,126,.18); }
.cotas-chart .cc-l { font-size:.95rem; line-height:1.3; } .cotas-chart .cc-l small { display:block; color:var(--taupe); font-size:.78rem; }
.cotas-chart .cc-t { position:relative; height:2.6rem; }
.cotas-chart .cc-t i { position:absolute; bottom:.45rem; height:0; border-top:1.5px solid var(--beige); }
.cotas-chart .cc-t i::before, .cotas-chart .cc-t i::after { content:""; position:absolute; top:-7px; width:1.5px; height:12px; background:var(--beige); transform:rotate(35deg); }
.cotas-chart .cc-t i::before { left:-1px; } .cotas-chart .cc-t i::after { right:-1px; }
.cotas-chart .cc-t em { position:absolute; bottom:.9rem; font-style:normal; font-family:var(--mono); font-size:.72rem; color:var(--crema); white-space:nowrap; }
.cotas-chart .cc-t em { max-width:none; }
.cotas-chart .cc-axis { display:grid; grid-template-columns:11rem 1fr; gap:1rem; border-top:1px solid rgba(208,170,126,.4); padding-top:.5rem; }
.cotas-chart .cc-axis div { position:relative; height:1rem; }
.cotas-chart .cc-axis b { position:absolute; transform:translateX(-50%); font-weight:400; font-family:var(--mono); font-size:.66rem; color:var(--taupe); }
.cotas-chart .cc-s { margin:.9rem 0 0; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--taupe); line-height:1.5; }
.doc-frame { border:1px solid var(--ink); margin:1.8rem 0; overflow-x:auto; background:#fff; }
.doc-frame table { width:100%; border-collapse:collapse; font-size:.98rem; }
.doc-frame caption { text-align:left; padding:.85rem 1rem; font-weight:650; border-bottom:1px solid var(--ink); background:var(--crema); }
.doc-frame th { background:var(--carbon); color:var(--crema); text-align:left; font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.7rem 1rem; white-space:nowrap; }
.doc-frame td { padding:.68rem 1rem; border-top:1px solid var(--rule); vertical-align:top; line-height:1.45; }
.doc-frame tbody tr:nth-child(even) td { background:var(--lino); }
.doc-frame td.n { white-space:nowrap; font-variant-numeric:tabular-nums; }
.doc-frame td.s { color:var(--muted); font-family:var(--mono); font-size:.74rem; }
.doc-frame .share { display:block; height:4px; margin-top:.45rem; background:var(--beige); }
.doc-frame tfoot td { font-weight:650; border-top:1px solid var(--ink); }
.doc-foot { margin:-1.2rem 0 1.8rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--muted); }
.gos-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.gos figure { margin:0; } .gos figure img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.gos figcaption { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); margin-top:.7rem; }
.gos h2 { font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem); text-transform:uppercase; font-variation-settings:"wdth" 116; line-height:1.04; margin-bottom:1.4rem; }
.gos p { font-size:1.12rem; line-height:1.65; color:#DCD3C7; }
.gos .sig { display:flex; align-items:center; gap:.8rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--beige); margin:1.6rem 0 2rem; }
.guide .sources h3 { font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cuero); margin:1.8rem 0 .6rem; }
.guide .sources ol { padding-left:1.6rem; margin:0; }
.guide .sources li { font-size:.9rem; line-height:1.5; color:var(--muted); margin-bottom:.45rem; word-break:break-word; }
.guide .sources li::marker { font-family:var(--mono); font-size:.8em; }
.guide-list { list-style:none; padding:0; margin-top:2rem; }
.guide-list li { border-top:1px solid var(--rule); padding:1.3rem 0; display:flex; flex-direction:column; gap:.35rem; }
.guide-list li:last-child { border-bottom:1px solid var(--rule); }
.guide-list a { font-weight:700; font-size:1.25rem; color:var(--ink); text-decoration:none; } .guide-list a:hover { color:var(--cuero); }
.guide-list p { margin:0; color:var(--muted); }
.guide-list span { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); }
@media (max-width:980px) {
  .ghero-in, .gos-in { grid-template-columns:1fr; }
  .gbody { grid-template-columns:minmax(0,1fr); }
  .gtoc { position:static; border:1px solid var(--rule); padding:1.1rem 1.2rem; }
  .gtoc ol { margin-bottom:1.2rem; }
  .gos figure img { aspect-ratio:4/3; }
  .cotas-chart .cc-row, .cotas-chart .cc-axis { grid-template-columns:1fr; gap:.3rem; }
  .cotas-chart .cc-axis > span { display:none; }
}
.gcol, .gtoc { min-width:0; }
.guide .sources a, .guide .ref { overflow-wrap:anywhere; }
@media (max-width:600px) { .doc-frame td.n { white-space:normal; } .doc-frame th { white-space:normal; } .doc-frame td, .doc-frame th { padding:.6rem .7rem; } }
.guide .doc-foot { font-size:.7rem; line-height:1.5; }
.gtoc .btn { width:100%; justify-content:center; }
.guide .more-guides { padding-left:1.1rem; margin-bottom:2.4rem; } .guide .more-guides a { font-weight:650; color:var(--ink); }
/* TAP TARGETS (site-check 29/10, mobile-check): every link a thumb can hit is at least 24px tall, the main ones 44px.
   Padding with an equal negative margin grows the hit area without moving the text. */
.btn-sm { min-height:44px; display:inline-flex; align-items:center; }
.top .home { display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.cajetin .cj-links a { display:inline-flex; align-items:center; min-height:44px; }
.guide a.ref { display:inline-block; padding:.45rem .2rem; margin:-.45rem 0; }
.guide .sources a, .faq p a, .guide .about a, .guide .crumbs a, .ghero .crumbs a, .byline a { display:inline-block; padding:.4rem 0; margin:-.4rem 0; }
.ghero .crumbs a { padding:.55rem 0; }
a.ref { display:inline-block; padding:.45rem .2rem; margin:-.45rem 0; }
.cross a, a.more { display:inline-block; padding:.6rem 0; margin:-.6rem 0; }
a.ref + a.ref { margin-left:.35rem; }
/* CONTRAST (site-check 29/10, contrast-check): small mono labels on light grounds use the muted ink (AA 4.5:1) */
.k { color:var(--muted); }
.dark .k, .facts .k { color:var(--beige); }
.split-img figcaption, .ba-item figcaption, .guide-list span { color:var(--muted); }
/* READABILITY (site-check 29/10): running text >= 18px on desktop, lines <= ~75 characters */
@media (min-width:981px) { .gbody { grid-template-columns:15rem minmax(0,38rem); } }
.guide p, .guide li { font-size:1.15rem; }
.prose p { font-size:1.15rem; max-width:38rem; }
@media (max-width:600px) { .guide p, .guide li, .prose p { font-size:1.05rem; } }
/* inline, not inline-block: an atomic inline box can wrap alone (lastword_check). Vertical padding on an inline
   link grows the tap area without touching the line height. */
a.ref, .guide .about a, .faq p a { display:inline; margin:0; padding-top:.5rem; padding-bottom:.5rem; }
/* the guide column is 38rem: tables tighten so five columns fit without scrolling */
.doc-frame table { font-size:.88rem; }
.doc-frame th, .doc-frame td { padding:.6rem .65rem; }
.doc-frame th { letter-spacing:.06em; }
a.ref { padding-left:0; padding-right:0; }
@media (max-width:600px) { .doc-frame table { font-size:.8rem; } .doc-frame th, .doc-frame td { padding:.55rem .45rem; } }