/* BeHome / photographic editorial refinement, September 2026.
   Cal, sand, warm ink and the approved amber. The horizontal journey is
   progressive enhancement: without JavaScript every section remains readable. */
:root{
 --cal:#F3EFE7;--greige:#C3B6A6;--crema:#F2EFE3;--tinta:#2B2521;--ambar:#FFA231;--ambar-d:var(--ambar);--blanco:#FFFFFF;--ambar-txt:#8A4F0C;--txt-2:#4E463F;--txt-3:#585048;--txt-d2:#BDB5A6;--piedra:#4E463F;
 --display:'Red Hat Display','Helvetica Neue',sans-serif;
 /* NIVEL 2 — UNA RETÍCULA BASE. Antes había ONCE retículas distintas, cada
    sección con su propio grid-template-columns en proporciones inventadas
    (1.1fr 1fr, 1.5fr 1fr, 1fr 1.45fr, repeat(4)...) y ONCE medianiles
    distintos entre 12px y 63.8px. Ninguna era múltiplo de otra, así que nada
    alineaba con nada entre secciones.
    [MEDIDO] Locomotive y Lusion corren 12 columnas; Snøhetta 4 y 3; Koto 8.
    12 permite 2, 3, 4 y 6 sin volver a inventar un número.
    [TEMARIO N2] la retícula no es el layout: es lo que te deja romperla en un
    lugar y que se note como decisión. */
 --cols:12;--gut:clamp(16px,1.9vw,28px);
 --mar:clamp(22px,4vw,64px);--sec:clamp(64px,10vh,112px);--hair:color-mix(in srgb,currentColor 22%,transparent);
 
 /* NIVEL 1 — CUATRO CUERPOS, NO DIEZ. Antes eran siete tokens que rendían diez
    cuerpos distintos, seis de ellos dentro del primer viewport.
    [CANON: disegno] resuelve una PORTADA ENTERA con tres: cabecera enorme,
    subtítulo diminuto y sumario a la mitad de la cabecera.
    Los saltos son 2.53x / 1.86x / 1.33x — cada uno se ve. Antes había pares
    a 1.26x (20.2px contra 16px), que el ojo lee como error, no como jerarquía:
    [TEMARIO N3] la jerarquía se hace con una diferencia enorme, no con tres
    tamaños parecidos. Medidos a 1064px: 75.5 / 29.8 / 16 / 12. */
 --fs-display:clamp(44px,7.1vw,104px);--fs-mid:clamp(26px,2.8vw,38px);--fs-body:clamp(16px,1.15vw,17.5px);--fs-cap:12px;
 /* LA MEDIDA DE LÍNEA, Y LA TRAMPA QUE NOS COSTÓ EL FAQ.
    El `ch` de CSS es el ancho del CERO, no el del carácter medio. Medido en
    este sitio con canvas: en Red Hat Display 400 el cero mide 10.59px y el
    carácter medio 7.12px — factor 1.488. Por eso `max-width:62ch` en el FAQ
    rendía 92 CARACTERES REALES, muy por encima del 45-75 del oficio.
    44ch = 66 caracteres reales, que es el punto dulce. Un solo lugar donde
    tocarlo, para que el error no se pueda repetir. */
 /* Va SIN unidad a propósito. Un `--medida:44ch` declarado en :root se resuelve
    ahí una sola vez, contra los 16px de la raíz, y se sustituye como longitud
    absoluta: los párrafos de 12px heredaban 455px y volvían a correr a 79
    caracteres. Con el número suelto, el `1ch` del calc se resuelve en CADA
    elemento contra SU cuerpo, y 44 significa 66 caracteres en todos. */
 --medida:44;

 /* NIVEL 6 — LOS NÚMEROS QUE MANDAN, Y LOS DOS QUE NO SE CUMPLÍAN.
    La curva del sitio era cubic-bezier(.22,1,.36,1) en 230 declaraciones. El
    número que manda es cubic-bezier(0.4,0,0.2,1) — el 'standard' de Material,
    y [MEDIDO] es el que corren BIG (x10), Snøhetta (x53) y Pentagram (x68).
    Las duraciones ya estaban bien salvo UNA: --cross valía 1200ms en 31
    declaraciones. [CORPUS 1 · Chrome 04:30, citando a NN/g] fuera de 100-500ms
    pasan las dos cosas malas: abajo no se percibe, arriba 'se siente lento y
    el usuario cree que el sitio está trabado'. El fundido de la portada es
    CONTENIDO que cambia, así que cae en la banda de 300-400. 400ms.
    --pop se queda para el toque del botón: [CORPUS modo D] 'se siente brusco'
    se arregla con una curva distinta para entrar y para salir, no con una
    sola para todo. Son dos curvas, no siete. */
 --ease:cubic-bezier(.4,0,.2,1);--pop:cubic-bezier(.34,1.42,.64,1);--fast:180ms;--base:320ms;--slow:400ms;--cross:400ms;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;font-family:var(--display)}
body{background:var(--cal);color:var(--tinta);font:var(--fs-body)/1.5 var(--display);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{color:inherit;border:0;background:none;cursor:pointer}
img,video{display:block;max-width:100%}figure{margin:0}::selection{background:var(--ambar);color:var(--tinta)}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}section:focus{outline:none}
button:disabled{opacity:.5;cursor:not-allowed}button:not(:disabled):active,a:active{opacity:.72}
.s-cal{background:var(--cal);color:var(--tinta)}.s-greige{background:var(--greige);color:var(--tinta)}.s-tinta{background:var(--tinta);color:var(--crema)}
p.meta,.meta p{max-width:calc(var(--medida) * 1ch)}   /* .meta también se usa para texto corrido: a 12px sin tope corría a 79 caracteres */
.meta,.folio,.fig-cap,
.display,.cols-h,.band-h{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.display--hero{font-size:var(--fs-display)}.display--xl{font-size:var(--fs-display)}.display--l{font-size:var(--fs-mid)}
.stepped{display:flex;flex-direction:column;align-items:flex-start}.stepped>span{display:block;max-width:100%}
.stand{font:700 var(--fs-mid)/1.3 var(--display);letter-spacing:-.02em;max-width:32ch}
.dense{font-size:var(--fs-body);line-height:1.5;max-width:calc(var(--medida) * 1ch)}
/* La cursiva vivía en Playfair. Red Hat Display no trae itálica en fonts/ y
   pedirla obliga al navegador a inclinar la romana: una oblicua falsa, que es
   justo la textura barata. La voz se distingue ahora por CUERPO (29.8 contra
   16, 1.86x) y por medida corta, no por familia prestada. */
.voice,.pull{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
/* MARCAS DIBUJADAS, NO PEDIDAS PRESTADAS. 5 sep 2026.
   Medido con canvas: Red Hat Display NO trae U+2197 (↗), U+2192 (→),
   U+2190 (←) ni U+2161 (Ⅱ). Eran 26 glifos que otra fuente estaba dibujando
   dentro de un sitio de UNA sola familia — y el ↗ del botón del hero caía en
   la fuente de emoji del sistema y salía a color. No era un emoji puesto a
   propósito: era un hueco en la fuente.
   Se dibujan. El asta de Red Hat Display 700 mide 0.13em (26px de 200
   medidos sobre la 'I'), así que el trazo va a 3.12 de un lienzo de 24: la
   flecha pesa lo mismo que la letra que la acompaña y se lee como parte de
   la palabra, no como un icono importado.
   Una sola forma, girada. currentColor entra por `background` + `mask`,
   así que hereda el color del texto como lo haría un glifo. */
:root{--mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.12' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.mk{display:inline-block;width:.78em;height:.78em;flex:0 0 auto;font-style:normal;
 vertical-align:-.06em;background:currentColor;
 -webkit-mask:var(--mk) center/contain no-repeat;mask:var(--mk) center/contain no-repeat}
.mk--ne{transform:rotate(-45deg)}
.mk--w{transform:rotate(180deg)}
.mk--n{transform:rotate(-90deg)}
/* Pausa y reproducir: dos barras y un triángulo, con el mismo grosor de asta. */
.mk--pause,.mk--play{-webkit-mask:none;mask:none;background:none;
 width:.72em;height:.72em;position:relative}
.mk--pause::before,.mk--pause::after{content:'';position:absolute;top:5%;bottom:5%;
 width:.13em;background:currentColor}
.mk--pause::before{left:14%}.mk--pause::after{right:14%}
.mk--play::before{content:'';position:absolute;top:4%;bottom:4%;left:20%;
 border-left:.62em solid currentColor;
 border-top:.36em solid transparent;border-bottom:.36em solid transparent;height:0}
/* NIVEL 4 — EL FILETE DEL CANTO. [CANON: fence-26] mete el color como una
   franja delgada A SANGRE en el borde exterior: se ve con la revista CERRADA,
   en el canto. Costo casi cero, señal de sección altísima.
   Su equivalente en pantalla es el borde del viewport, y aquí hace falta
   justo ahora: al pasar los cuatro capítulos de espacio a un mismo fondo,
   algo tiene que decir dónde empieza uno y acaba el anterior. Lo dice una
   línea de 2px a sangre, no un cambio de fondo.
   [CANON: the-modernist-22] usa UN SOLO color de acento en tres papeles —
   fondo pleno, gráfico sobre la foto y calado. Aquí el ámbar ya es fondo
   pleno una vez (la banda) y calado en el botón; éste es el tercer papel. */
.panel.space::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
 background:var(--ambar);z-index:2}
.axis{height:1px;background:var(--hair)}.folio{display:flex;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--hair);margin-bottom:32px}
/* El número estaba en `display:none`. Con él oculto, el separador decía QUÉ
   capítulo es pero no DÓNDE VAS: [TEMARIO N4] diez spreads seguidos son una
   película, y una película necesita saber por qué minuto va.
   [CANON: luncheon-11] son seis separadores IDÉNTICOS — una palabra y un
   objeto — y repetir sin variación es lo que se siente como sistema. Ahora
   los ocho son la misma pieza: número, nombre, MIAMI-DADE. */
.folio .n{display:block;color:var(--ambar);font-variant-numeric:tabular-nums;
 letter-spacing:.06em}
.folio .r{margin-left:auto;font-size:var(--fs-cap)}.folio .mid{font-weight:700}
.fig-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:12px;font-size:var(--fs-cap);letter-spacing:.045em}
.fig-cap>span:empty{display:none}.fig-cap .s{opacity:.8}.shot{overflow:hidden;background:var(--greige);position:relative}
.shot img,.shot video{width:100%;height:100%;object-fit:cover}.r-fade{opacity:1}.ph:empty{min-height:120px;background:var(--greige)}
.skip-link{position:fixed;top:12px;left:12px;z-index:1100;transform:translateY(-160%);padding:12px 16px;background:var(--cal);color:var(--tinta)}.skip-link:focus{transform:none}
/* Quiet masthead; the full index lives one click away. */
.hdr{position:fixed;inset:0 0 auto;z-index:900;display:flex;align-items:center;gap:32px;padding:20px var(--mar);color:var(--crema);transition:background var(--base) var(--ease),color var(--base) var(--ease);background:linear-gradient(#2b2521bd,#2b252100)}
.hdr.is-scrolled{background:var(--cal);color:var(--tinta);padding-block:12px;border-bottom:1px solid #2b252120}
/* [CANON: nest] mete la cabecera en una cajita arriba a la izquierda, MÁS
   CHICA que el titular, y la revista fue reconocible 26 números. Aquí medía
   29.8px contra un h1 de 75.5px; ahora mide 12px y es el elemento más chico
   de la portada. Eso es lo que baja el primer viewport de 6 cuerpos a 3. */
.hdr-mark{font:700 var(--fs-cap)/.9 var(--display);letter-spacing:.12em;transition:opacity var(--fast)}
.hdr-nav{display:flex;gap:24px;margin-left:auto;font-size:var(--fs-cap)}.hdr-nav a{padding:8px 0;position:relative}
/* Aquí vivía un nth-child que escondía cuatro de siete enlaces: un
   parche de cuando el menú no cabía. Con tres enlaces escondía el
   primero, y por eso "Spaces" medía 0 px sin que nada lo dijera. */
.hdr-nav a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--base) var(--ease)}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after,.hdr-nav a:focus-visible::after{transform:scaleX(1)}
.hdr-r{display:flex;align-items:center;gap:24px}.lang{display:flex;align-items:center;gap:4px;font-size:var(--fs-cap)}.lang button{min-height:44px;min-width:28px;opacity:.65}.lang button.on,.lang button:hover{opacity:1}
.menu-btn,.nav-close{font-size:var(--fs-cap);min-height:44px;padding:8px 0}.menu-btn::after{content:'';display:inline-block;width:20px;height:7px;border-block:1px solid currentColor;margin-left:14px;vertical-align:middle;transition:transform var(--base) var(--ease);transform-origin:left}.menu-btn:hover::after{transform:scaleX(1.25)}
.menu-is-open{position:fixed;width:100%;overflow:hidden}
#nav{position:fixed;inset:0;z-index:1000;background:var(--greige);color:var(--tinta);padding:90px var(--mar) 100px;display:flex;flex-direction:column;justify-content:center;gap:4px;visibility:hidden;clip-path:inset(0 0 100%);transition:clip-path var(--slow) var(--ease),visibility var(--slow);overflow-y:auto}
#nav.open{visibility:visible;clip-path:inset(0)}#nav>a{display:flex;align-items:baseline;gap:32px;font:700 var(--fs-mid)/1.2 var(--display);letter-spacing:-.03em;transition:transform var(--base) var(--ease),opacity var(--base)}
#nav>a .n{font:var(--fs-cap) var(--display);letter-spacing:0;opacity:.65;min-width:24px}#nav>a:hover{transform:translateX(12px)}.nav-close{position:absolute;right:var(--mar);top:20px}.nav-foot{position:absolute;left:var(--mar);right:var(--mar);bottom:28px;display:flex;justify-content:space-between;gap:16px}
/* Cover: full photographic frame, readable type, direct action and manual reel. */
#vert{position:relative}#p-hero{height:100svh;min-height:650px;position:relative;padding:0;overflow:hidden;background:var(--tinta);color:var(--crema)}
#hero-media{position:absolute;inset:0}.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--cross) var(--ease)}.hero-slide.is-on{opacity:1}
.hero-slide img,#hero-video{width:100%;height:100%;object-fit:cover;object-position:center 52%}
#hero-video{position:absolute;inset:0;display:block;background:var(--tinta)}
#hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#2b252155,transparent 25%,#2b25214d 42%,#2b2521e6 100%)}
#hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--mar) 28px;gap:24px}
#hero-h{max-width:1100px;line-height:1.01}#hero-h>span:nth-child(2){padding-left:6vw}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-top:24px;margin-top:8px;border-top:1px solid #f3efe755}
.hero-note{max-width:43ch;font-size:var(--fs-body);line-height:1.5}.hero-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:195px;padding:16px 16px;background:var(--ambar);color:var(--tinta);font-size:var(--fs-cap);transition:background var(--fast)}
.hero-cta:hover{background:var(--cal)}.arrow{font-size:inherit;line-height:1;display:inline-flex;align-items:center}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}.hero-bottom>.meta{font-size:var(--fs-cap);letter-spacing:.09em}
.reel-controls{display:flex;gap:20px;align-items:center}.reel-controls button{font-size:var(--fs-cap);min-width:32px;min-height:44px;position:relative;opacity:.7}
.reel-controls button:hover,.reel-controls button:focus-visible{opacity:1}
/* The indicator is a rule, not a numeral: it says where you are in the reel
   without reading as a page number. Still a button, still named, still able
   to take you to that frame. */
/* NIVEL 5 — [CANON: fence-26] LA AUSENCIA SE SEÑALA, O SE LEE COMO ERROR.
   Cuando quitaron el rojo de su portada dejaron LAS GRAPAS EN ROJO para que
   se notara que el monocromo era a propósito. Es la lección más transferible
   del canon, y aquí toca justo ahora: si la portada deja de rotar sola, la
   quietud tiene que leerse como decisión y no como que se rompió.
   Los cuatro selectores dejan de ser puntos anónimos y dicen su número y su
   cuarto, en el cuerpo de 12px que ya es el de toda la portada. No añaden un
   cuarto tamaño: [CANON: disegno] tres cuerpos y ya. */
.reel-controls button[data-slide]{min-width:0;display:flex;align-items:baseline;gap:7px;
 padding:8px 0;letter-spacing:.08em;text-transform:uppercase}
.reel-controls button[data-slide] .n{font-variant-numeric:tabular-nums;opacity:.55}
.reel-controls button[data-slide][aria-pressed=true] .n{color:var(--ambar);opacity:1}
.reel-controls button[data-slide]::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;opacity:.55;transition:background var(--base) var(--ease),opacity var(--base) var(--ease),transform var(--base) var(--ease);transform-origin:left}
.reel-controls button[data-slide][aria-pressed=true]{opacity:1}
.reel-controls button[data-slide][aria-pressed=true]::after{background:var(--ambar);opacity:1;height:2px}
/* Four spaces: image and label are always visible, expansion is modest. */
#p-services{padding:0 0 var(--mar);background:var(--cal);min-height:100svh;border-radius:0;position:relative;overflow:hidden}
.cols-open{padding:80px var(--mar) 36px}.cols-h{font-size:var(--fs-display);max-width:100%;white-space:normal}.cols{display:flex;gap:12px;padding:0 var(--mar);min-height:60vh}
.col{position:relative;flex:1;min-width:0;min-height:460px;overflow:hidden;color:var(--cal);transition:flex-grow var(--slow) var(--ease)}
.col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--slow) var(--ease)}
.col::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#2b2521d9)}
.col-i{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:24px}.col-n{font-size:var(--fs-cap)}
.col-t{display:flex;flex-direction:column;gap:16px}.col h3{font:700 var(--fs-mid)/1.08 var(--display);letter-spacing:-.025em;max-width:10ch}
.col-go{display:flex;align-items:center;gap:12px;font-size:var(--fs-cap)}.col-go em{font-style:normal;transition:transform var(--base) var(--ease)}.col:hover .col-go em{transform:translateX(6px)}.col:hover img{transform:scale(1.04)}
@media(hover:hover){.col:hover{flex-grow:1.4}}
/* Native vertical layout is the fallback and mobile edition. */
#track{display:block}.panel{position:relative;padding:var(--sec) var(--mar);min-width:0}.panel--type{background:var(--ambar);color:var(--tinta)}
.band-grid{display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);row-gap:32px;align-items:center}.band-h{font-size:var(--fs-display);max-width:17ch}.bl{display:block;overflow:hidden}.bl>span{display:block}
/* El arco de 44%/28% era la única forma curva grande del sitio y convertía
   la foto en una lápida. Recta: el borde de la imagen es el borde. */
.band-plate{position:relative;height:60vh;min-height:320px;overflow:hidden;border-radius:0}.band-plate img{width:100%;height:100%;object-fit:cover}
.band-cap{position:absolute;left:22px;right:22px;bottom:18px;color:var(--cal);font-size:var(--fs-cap);background:#2b2521bf;padding:8px 12px;width:fit-content}.band-meta{position:absolute;bottom:24px;left:var(--mar);font-size:var(--fs-cap)}

/* Before / after is a native range with a visible handle. */
#p-ba{height:100svh;min-height:620px;padding:0}.ba-stage,.ba-layer{position:absolute;inset:0}.ba-layer img{width:100%;height:100%;object-fit:cover}.ba-after{clip-path:inset(0 0 0 50%);z-index:2}.ba-before{z-index:1}
.ba-stage::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(#2b252155,transparent 35%,#2b2521a6)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--cal);z-index:4;pointer-events:none}.ba-line::after{content:'';-webkit-mask:var(--mk) center/58% no-repeat;mask:var(--mk) center/58% no-repeat;background:currentColor;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border:1px solid var(--cal);border-radius:50%;display:grid;place-items:center;background:var(--tinta);color:var(--cal);font-size:var(--fs-mid)}
.ba-grab{position:absolute;inset:0;width:100%;height:100%;z-index:5;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba-stage:has(.ba-grab:focus-visible){outline:3px solid var(--ambar);outline-offset:-5px}.ba-stage:has(.ba-grab:focus-visible) .ba-line::after{outline:3px solid var(--ambar);outline-offset:4px}
.ba-tags{position:absolute;inset:100px var(--mar) auto;display:flex;justify-content:space-between;z-index:6;pointer-events:none;color:var(--cal);font-size:var(--fs-cap);letter-spacing:.04em}.ba-tag b{display:block;font:700 var(--fs-mid)/1.3 var(--display)}
.ba-head{position:absolute;left:var(--mar);right:var(--mar);bottom:50px;z-index:6;pointer-events:none}.ba-head .voice{display:block;font-size:var(--fs-mid);margin-top:16px}

.lede{grid-area:l;align-self:center}.hero-im{grid-area:h}.hero-im .shot{height:30vh}.list{grid-area:n}/* Cuatro columnas de 226px a 16px = 31 caracteres reales por línea, por
   debajo del mínimo de 45 del oficio. Tres columnas dan 332px = 47. */
.list-4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}.side-im{grid-area:s}.side-im .shot{height:28vh}.quote{grid-area:q;border-top:1px solid var(--hair);padding-top:16px}.file-item{border-top:1px solid var(--hair);padding-top:12px}.file-item>.meta{font-size:var(--fs-cap)}.file-item h4{font:700 var(--fs-body)/1.2 var(--display);margin:12px 0}.file-item p{font-size:var(--fs-body);line-height:1.5}
.pull{font-size:var(--fs-mid);line-height:1.3;max-width:32ch}.pull cite{display:block;font:var(--fs-cap)/1.5 var(--display);letter-spacing:0;margin-top:12px}

.tiny .shot{aspect-ratio:1}

#p-contact .stand{font-size:var(--fs-mid);max-width:32ch}.form{display:grid;gap:16px;max-width:650px}.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.field{display:flex;flex-direction:column-reverse;min-width:0}.field label{font-size:var(--fs-cap);line-height:1.4;letter-spacing:.03em;margin-bottom:4px}.field input,.field select{border:0;border-bottom:1px solid #f3efe755;border-radius:0;background:transparent;color:var(--cal);padding:8px 0 12px;width:100%;font-size:var(--fs-body);min-height:44px;transition:border-color var(--fast)}.field select option{background:var(--tinta);color:var(--cal)}.field input:hover,.field select:hover{border-color:var(--cal)}.field input:focus,.field select:focus{border-color:var(--ambar)}
.submit{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;background:var(--ambar);color:var(--tinta);font-size:var(--fs-cap);min-height:50px}.submit:not(:disabled):hover{background:var(--cal)}#form-note{font-size:var(--fs-body);letter-spacing:0;text-transform:none;line-height:1.45;max-width:calc(var(--medida) * 1ch);min-height:38px}.contact-im{position:absolute;right:var(--mar);bottom:var(--mar);width:25%}.contact-im .shot{height:33vh}#p-contact .form{width:68%}
.logo{font:700 60px/.85 var(--display);letter-spacing:-.04em;display:inline-block}.logo span{display:block;transform-origin:left;white-space:nowrap}.logo .l2{font-size:.62em}/* El tracking de .4em deja un hueco DESPUÉS de la última letra, y por eso la
   tercera línea medía 46.1px contra 42.5px de las otras dos: el candado dice
   que las tres miden lo mismo de ancho, y no era cierto. Se descuenta ese
   hueco. La letra no se toca — esto es afinar, no cambiar. */
.logo .l3{font-size:.19em;letter-spacing:.4em;margin-right:-.4em;text-transform:uppercase;margin-top:4px}.foot{display:grid;gap:32px}.verify{font-size:var(--fs-body);max-width:40ch}.verify a{text-decoration:underline;text-underline-offset:5px}.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}.foot-cols .meta{font-size:var(--fs-cap)}
#curtain{position:fixed;inset:0;background:var(--greige);z-index:950;transform:scaleY(0);pointer-events:none}
#cta{position:fixed;right:var(--mar);bottom:22px;z-index:800;background:var(--ambar);color:var(--tinta);padding:12px 24px;font-size:var(--fs-cap);opacity:0;visibility:hidden;transform:translateY(12px);transition:transform var(--base) var(--ease),opacity var(--base),visibility var(--base)}#cta.on{opacity:1;visibility:visible;transform:none}#cta:hover{background:var(--cal);outline:1px solid var(--tinta)}
#axis{display:none}
/* Desktop horizontal spine. The dimensions change together with JS. */
#axis.is-visible{display:flex;position:fixed;left:var(--mar);bottom:24px;gap:12px;font-size:var(--fs-cap);z-index:700;mix-blend-mode:difference;color:white;pointer-events:none}#axis i{display:block;width:1px;height:16px;background:currentColor}
@media(max-width:900px),(pointer:coarse),(max-height:699px){
 .hdr{padding:14px var(--mar);gap:16px}.hdr-nav{display:none}.hdr-r{margin-left:auto;gap:16px}
 #p-hero{min-height:650px}#hero-h>span:nth-child(2){padding-left:0}.hero-note{font-size:var(--fs-body)}.hero-cta{min-width:170px}.hero-row{align-items:center}
 .cols-open{padding-top:64px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}.col{min-height:380px}.col-i{padding:16px}.col h3{font-size:var(--fs-mid)}
 .panel--type{padding-block:64px}.band-grid{gap:32px}.band-h{font-size:var(--fs-mid)}.band-plate{height:45vh}.band-meta{bottom:24px}
 
 .list-4{grid-template-columns:1fr 1fr;gap:24px}.file-item p{font-size:var(--fs-body)}.file-item h4{font-size:var(--fs-mid)}
 #p-contact .form{width:100%;max-width:none}.contact-im{position:relative;inset:auto;margin-top:32px;width:48%;margin-left:auto}.contact-im .shot{height:35vh}
 
}
@media(max-width:540px){
 :root{--fs-display:clamp(40px,10.7vw,58px);--fs-mid:26px}
 /* NIVEL 5 EN ESTRECHO. Los cuatro selectores con nombre miden 361px + la
    etiqueta: 68px de desborde horizontal medido. Se quedan los NÚMEROS, que
    son los que llevan la señal de [CANON: fence-26] — "hay cuatro y eliges
    tú" — y caben. El nombre sigue en el DOM para el lector de pantalla. */
 .reel-controls{gap:10px}
 /* 44x44 de verdad: alto ya lo tenía, ancho no — 16px no se toca con un dedo. */
 .reel-controls button[data-slide]{min-width:44px;justify-content:center}
 .reel-controls button[data-slide] span:not(.n){position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #p-hero{min-height:740px;height:100svh}.hero-slide img,#hero-video{object-position:56% center}#hero-inner{padding-top:96px;padding-bottom:16px;gap:24px}.hero-row{flex-direction:column;align-items:stretch;gap:24px;padding-top:16px}.hero-cta{align-self:flex-start;min-width:200px}.hero-bottom{gap:8px}.hero-bottom>.meta{max-width:12ch}.reel-controls{gap:4px}
 .cols-h{max-width:12ch}.cols{gap:8px}.col{min-height:320px}.col h3{font-size:var(--fs-mid)}html[lang=es] .col h3{font-size:var(--fs-mid);overflow-wrap:anywhere}.col-go{font-size:var(--fs-cap);gap:8px}.col-i{padding:16px 12px}
 .band-grid{grid-template-columns:1fr;gap:32px}.band-h{font-size:var(--fs-mid)}.band-plate{height:48vh}.band-meta{display:none}
 
 .ba-head .display{font-size:var(--fs-mid)}.ba-head .voice{font-size:var(--fs-mid);max-width:24ch}.ba-tags{font-size:var(--fs-cap)}.ba-tag{max-width:44%}.ba-tag b{font-size:var(--fs-mid)}.ba-head{bottom:38px}
 
 .two{grid-template-columns:1fr;gap:16px}.contact-im{width:65%}#nav{padding-top:96px;padding-bottom:96px;gap:12px;justify-content:flex-start}#nav>a{font-size:var(--fs-mid)}.nav-foot{flex-direction:column;gap:8px}.nav-foot .meta{font-size:var(--fs-cap)}.foot-cols{grid-template-columns:1fr}.pull{font-size:var(--fs-mid)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#p-services{border-radius:0}.hero-slide{transition:none}}

/* ===========================================================
   RESTORED, 5 sep 2026. The September refactor fixed real bugs
   (focus, inert, native range, honest form) and took the brand
   and the motion out with them. This block puts back only what
   was lost, on top of the fixes — nothing above is undone.
   Every rule here stops at the reduced-motion query at the end
   of the file, which still wins with !important.
   =========================================================== */

/* ---------- The seal. A stamp is the right mark for a studio whose whole
   argument is authorship. 26s is "turning", not "spinning" — it is an
   ornament, nothing is waiting on it. ---------- */
.seal{
  position:absolute;z-index:3;right:clamp(16px,3vw,52px);top:clamp(74px,11vh,128px);
  width:clamp(88px,10vw,140px);aspect-ratio:1;display:grid;place-items:center;pointer-events:none;
}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:sealturn 26s linear infinite}
/* White on amber is 2.01:1 and the client reaffirmed it after being shown
   the number. The only lever left inside that choice is weight and size,
   so this lettering is never small and never light. */
.seal text{font-family:var(--display);font-size:var(--fs-body);font-weight:700;letter-spacing:.06em;text-transform:uppercase;fill:var(--blanco)}
.seal-mark{font-family:var(--display);font-weight:800;font-size:var(--fs-mid);letter-spacing:-.04em;color:var(--tinta);text-transform:lowercase}
@keyframes sealturn{to{transform:rotate(360deg)}}

/* ---------- Seams. The hinge between one chapter and the next. Sideways
   they are a column you travel through; stacked they are a rule you read
   across. Either way the page announces where it just changed. ---------- */

  flex:0 0 auto;width:clamp(78px,7.5vw,132px);height:100svh;padding:0;
  justify-content:center;gap:0;
}
  content:'';position:absolute;flex:none;top:var(--mar);bottom:var(--mar);left:50%;
  width:1px;height:auto;background:currentColor;opacity:.35;
}

/* ---------- Ken Burns. Slow enough to be felt and not seen: the frame is
   never still, so the cover reads as alive rather than as a plate.
   Re-adding .is-on restarts it, so every turn of the reel gets its own
   push. 1.05 and no further — past that the crop cut the tub out of the
   bathroom frame. ---------- */
.hero-slide.is-on img{animation:kenburns 8.6s linear forwards}
@keyframes kenburns{from{transform:scale(1.01)}to{transform:scale(1.05)}}

/* ---------- The headline is set in characters so it can assemble instead
   of sliding in as a slab, and so it answers the cursor. ---------- */
#hero-h .ch{display:inline-block;transform-origin:50% 80%;will-change:transform}
#hero-h:hover .ch{animation:charfloat 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .042s)}
@keyframes charfloat{
  0%{transform:translate3d(0,0,0) rotate(0)}
  28%{transform:translate3d(-.012em,-.062em,0) rotate(-.9deg)}
  55%{transform:translate3d(.01em,.028em,0) rotate(.65deg)}
  78%{transform:translate3d(-.006em,-.022em,0) rotate(-.3deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}

/* ---------- Figures uncover through an arch instead of sliding. The arch
   is not borrowed decoration: it was the original logo idea and the
   client's own boards are full of arched openings. JS drives the two
   variables and removes .arch when the mask is bigger than the box, so
   nothing stays masked. ---------- */
/* El valor por defecto es la foto DESTAPADA. Si el tween nunca corre
   —pestaña en segundo plano, equipo lento, GSAP que no cargó— la foto
   se ve sin animación. Con 0% se quedaba invisible para siempre. */
.shot{--arch-w:150%;--arch-h:190%}
.shot.arch{
  -webkit-mask-image:radial-gradient(var(--arch-w) var(--arch-h) at 50% 100%,#000 99%,transparent 100%);
          mask-image:radial-gradient(var(--arch-w) var(--arch-h) at 50% 100%,#000 99%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ---------- The logo lockup. Three lines, one width — that construction
   is the identity, not an accident, and JS measures it. Without .l1 the
   first line had no size of its own to measure against. ---------- */
.logo .l1{font-size:1em}
.logo--hd{font-size:1.55rem}

/* ---------- The pop curve, reserved for the response to cursor and click.
   It overshoots and comes back; that is the brand expressed in movement,
   and it is the reason a hover feels answered rather than merely
   changed. ---------- */
.col-go em{display:inline-block;transition:transform var(--base) var(--pop)}
.hero-cta .arrow,.submit{transition:transform var(--fast) var(--pop),background var(--fast) var(--ease)}
.hero-cta:hover .arrow{transform:translate(3px,-3px)}
.submit:not(:disabled):hover{transform:translateY(-2px)}
.submit:not(:disabled):active{transform:translateY(0) scale(.985)}
#cta{transition:transform var(--fast) var(--pop),opacity var(--base),visibility var(--base),background var(--fast)}
#cta.on:hover{transform:translateY(-3px)}
.hdr-mark:hover{opacity:.62}
.lang button,.menu-btn,.nav-close,.reel-controls button{transition:opacity var(--fast) var(--ease)}
.ba-line::after{transition:transform var(--base) var(--pop),background var(--base) var(--ease)}
.ba-stage:hover .ba-line::after{transform:translate(-50%,-50%) scale(1.08)}
.ba-tag{transition:opacity var(--slow) var(--ease)}
.file-item,
.file-item:hover,

.verify a{transition:opacity var(--fast) var(--ease)}
.verify a:hover{opacity:.65}
#nav>a{transition:transform var(--base) var(--pop),opacity var(--base) var(--ease)}

/* ---------- The cursor. A dot that grows over anything that can be acted
   on — it reports the target, it never replaces the pointer, so the
   affordance is added and nothing is taken away. ---------- */
#dot{
  position:fixed;top:0;left:0;z-index:880;pointer-events:none;
  width:9px;height:9px;border-radius:50%;background:var(--ambar);
  mix-blend-mode:multiply;transform:translate(-50%,-50%);opacity:0;
  transition:width var(--fast) var(--pop),height var(--fast) var(--pop),opacity var(--base) var(--ease);
  will-change:transform;
}
#dot.is-on{opacity:1}
#dot.is-big{width:46px;height:46px}
@media(hover:none),(pointer:coarse){#dot{display:none}}

/* ---------- The door. Held shut for well under a second and never longer
   than a second and a half, whatever the network does. The amber is cut
   away from the top down rather than slid off, so the mark is the last
   thing to leave. ---------- */
#preload{
  position:fixed;inset:0;z-index:2000;background:var(--ambar);color:var(--tinta);
  display:grid;place-items:center;clip-path:inset(0 0 0 0);
}
#preload .logo{color:var(--blanco)}
.logo--pl{font-size:var(--fs-display)}
#preload .pct{position:absolute;right:var(--mar);bottom:var(--mar);font:700 var(--fs-cap)/1 var(--display);letter-spacing:.06em}
#preload .pct sup{font-size:.7em}
#pl-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--tinta)}
.is-loading,.is-loading body{overflow:hidden}
@media(prefers-reduced-motion:reduce){#preload{display:none}}

@media(max-width:900px),(pointer:coarse){.seal{display:none}}

/* The step list tracks the video: the one you are looking at is lit. */

/* ===========================================================
   The lockup. Three lines, one width — that construction is the
   identity, not an accident, and JS measures it in the browser.
   It had stopped happening: a column flex panel stretched .logo
   to the panel's full width, every line then reported that same
   width, and both corrections silently became no-ops. The mark
   has to shrink to its own content for the measurement to mean
   anything.
   =========================================================== */
/* An explicit fit-content width is what stops the column-flex panel from
   stretching the mark; align-self is deliberately NOT set here, because the
   preloader centres its lockup with place-items and would lose that. */
.logo{width:fit-content;max-width:100%}
.logo span{width:fit-content}
.logo .l1{display:flex;align-items:flex-end;gap:.1em}
/* The roof reaches the ascender of the `b`; the stroke of the house and of
   the bowl is the stem of the letter. Both rules are the client's own. */
.lmark{height:.74em;width:auto;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:7;stroke-linejoin:round;stroke-linecap:round}

/* ===========================================================
   LOS PESOS, 5 sep 2026. La revisión de septiembre aligeró la
   tipografía entera sin decirlo: los titulares pasaron de 700 a
   500, las dos portadas de sección de 800 a 500, el botón ámbar
   de 800 a 400 y las cotas de 700 a 500. Con Red Hat Display en
   Medium y en caja baja la marca deja de reconocerse — se ve
   como cualquier geométrica. Estos son los pesos con los que la
   marca estaba dibujada.
   =========================================================== */

/* Titulares. El escalón de la marca es Bold, no Medium. */
.display,.cols-h,.band-h{font-weight:700}
.cols-h,.band-h{font-weight:800}

.hdr-mark{font-weight:700}

/* Las cotas y los pies de foto van en Bold. Antes esta señal la daba la
   Red Hat Mono; con una sola familia la da el PESO y el tracking, que es
   [CANON: pin-up-28] convirtiendo texto pequeño en trama, no en argumento. */
.fig-cap .t{font-weight:700}
.fig-cap .s{font-weight:700}
.col-n,.folio .mid,.hdr .meta{font-weight:700}

/* Los controles de la cabecera y del menú. */
.lang,.lang button,.menu-btn,.nav-close{font-weight:700}
.hdr-nav a{font-weight:700}
#nav>a{font-weight:700}
#nav>a .n{font-weight:700}
.reel-controls button{font-weight:700}

/* Las dos llamadas a la acción. El ámbar lleva el peso más alto de todo el
   sitio: es blanco sobre ámbar, y el único margen que deja esa decisión de
   la clienta es tamaño y peso. */
.submit,.hero-cta{font-family:var(--display);font-weight:800;letter-spacing:-.015em}
#cta{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.seal-mark{font-weight:800}

/* ============================================================
   REESTRUCTURA — septiembre 2026
   La página dejó de ser un corredor lateral y volvió a bajar. El
   movimiento de lado ya sólo pasa DENTRO de cada galería, que es
   donde el gesto se entiende sin que nadie lo explique.
   ============================================================ */

/* ---------- Botones. Dos pesos: ámbar es la acción, fantasma es la
   alternativa. Ambos con estado de foco visible — un botón que sólo
   responde al ratón es medio botón. ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:12px 24px;font-family:var(--display);
 font-size:var(--fs-cap);font-weight:700;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;
 transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn em{font-style:normal;transition:transform var(--base) var(--ease)}
.btn:hover em{transform:translateX(5px)}
.btn--amber{background:var(--ambar);color:var(--tinta);font-weight:800}
.btn--amber:hover{background:var(--tinta);color:var(--cal)}
.btn--ghost{background:transparent;color:inherit;border-color:var(--hair)}
.btn--ghost:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}
.btn:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
.btn:active{transform:translateY(1px)}

/* ---------- 02 El mosaico. La ficha grande es la casa entera y ocupa
   dos filas: la jerarquía la carga el tamaño, no el color. ---------- */
.mosaic{display:grid;grid-template-columns:5fr 3fr 3fr;grid-template-rows:repeat(2,minmax(220px,32vh));gap:calc(var(--gut) / 2);padding:0 var(--mar)}
.tile{position:relative;overflow:hidden;color:var(--cal);min-width:0}
.tile--lead{grid-row:span 2}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--cross) var(--ease)}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 28%,#2b2521e0)}
.tile-i{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:24px}
.tile-n{font-size:var(--fs-cap)}
.tile-t{display:flex;flex-direction:column;gap:12px}
.tile h3{font:700 var(--fs-mid)/1.06 var(--display);letter-spacing:-.025em}
.tile--lead h3{font-size:var(--fs-mid)}
.tile-t p{font-size:var(--fs-body);max-width:32ch}
.tile-go{display:flex;align-items:center;gap:8px;font-size:var(--fs-cap)}
.tile-go em{font-style:normal;transition:transform var(--base) var(--ease)}
.tile:hover .tile-go em{transform:translateX(6px)}
.tile:hover img{transform:scale(1.05)}
.tile:focus-visible{outline:3px solid var(--ambar);outline-offset:-3px}

/* ---------- 04-07 La plantilla de espacio. Encabezado, una imagen
   grande, y la galería que corre de lado. ---------- */
/* La cabecera corría de borde a borde con un margen plano de 4.0% en los dos
   lados, igual en las cuatro secciones. [MEDIDO] BIG deja ~445px de margen
   derecho VACÍO en su portada: el margen exterior es lo que sostiene la
   página. Aquí la cabecera se cuelga de las 12 columnas y deja una columna
   entera vacía — del lado DERECHO en las secciones cal, del IZQUIERDO en las
   greige. El aire cambia de lado al cambiar de capítulo: eso es margen
   (nivel 2) y de paso es ritmo (nivel 4). */
.space-head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
 column-gap:var(--gut);row-gap:clamp(20px,3vh,34px);align-items:end;margin-bottom:clamp(28px,4vh,48px)}
.space-head>h2{grid-column:1 / span 6;grid-row:1}
.space-head>.dense{grid-column:8 / span 4;grid-row:1;align-self:end}
.space-head>.space-acts{grid-column:8 / span 4;grid-row:2}
/* NIVEL 4 — la alternancia del aire estaba atada al FONDO, y el nivel 4 acaba
   de juntar tres capítulos bajo un mismo fondo: se habría quedado en tres a la
   derecha y uno a la izquierda, que es justo el promedio que el ritmo evita.
   Se ata al SANGRADO, que es lo que ahora distingue un capítulo del siguiente:
   el aire de la cabecera se pone del lado por donde la foto va a cruzar, para
   que la imagen invada exactamente el hueco que el titular dejó respirar.
   home cruza por la derecha, kitchen por la izquierda, bath no cruza, outdoor
   por los dos: derecha / izquierda / derecha / izquierda. */
.panel.space:has(.figs--par) .space-head>h2{grid-column:2 / span 6}
.panel.space:has(.figs--par) .space-head>.dense,
.panel.space:has(.figs--par) .space-head>.space-acts{grid-column:9 / span 4}
/* Outdoor sangra por los DOS bordes, así que el sangrado ya no discrimina de
   qué lado va su aire: se queda en el de por defecto (derecha) para que la
   secuencia siga alternando — derecha, izquierda, [página chica], derecha.
   En baño el aire no va dentro de la retícula: el aire ES el retranqueo de la
   página, que es la lección de [CANON: pin-up-28]. */
.space-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.space-vid{width:100%;height:100%;object-fit:cover}

/* La composición del espacio. La secundaria colgaba con un margen
   superior fijo y dejaba un hueco muerto del alto de la diferencia:
   se veía como un error de carga, no como aire. Ya no hay márgenes
   colgantes — cada variante alinea de verdad.

   Y cada espacio tiene la suya. Cuatro secciones con la misma retícula
   se leen como una plantilla rellenada cuatro veces; el ritmo es lo que
   hace que una revista no canse. */
.space-figs{display:grid;gap:var(--gut)}
.fig-main .shot,.fig-side .shot{height:100%}

/* EL SANGRADO, Y POR QUÉ CADA CAPÍTULO CRUZA UN BORDE DISTINTO.
   [CANON: disegno] pone tres imágenes en su portada y ninguna sangra por el
   mismo borde: una se sale por arriba y la derecha, otra por la izquierda y
   abajo, y la tercera FLOTA sin tocar ningún borde. Esa tercera es la que
   hace que las otras dos se lean como decisión — si todas sangran, sangrar
   vuelve a ser el default.
   Antes aquí sangraba 1 de 4 secciones y las otras tres se quedaban dentro
   de un margen plano de 4.0%. Ahora: derecha / izquierda / ninguna / ambas.
   El borde sigue la alternancia que ya tenía el sitio — la sección cal tiene
   el aire de su cabecera a la derecha y la foto es justo lo que lo invade;
   la greige, al revés. */

/* HOME · una sola pieza ancha que se sale por la DERECHA. El video es la
   pieza: nada compite, y al cruzar el margen deja de estar "puesta" en la
   página para estar atravesándola. */
.figs--solo{grid-template-columns:1fr;margin-right:calc(var(--mar) * -1)}
/* NIVEL 3 — LA ALTURA ES LO QUE DECIDE QUIÉN MANDA EN LA PANTALLA.
   Medido viewport a viewport, la dominancia mediana del sitio era 0.35: la
   imagen mayor de cada pantalla no llegaba ni a la mitad del área de imagen.
   [CORPUS 7 · Show It Better 12:00] pocos dibujos grandes ganan a seis
   apretados, y su traducción directa: ocho fotos chicas valen menos que dos
   grandes. La figura principal de cada capítulo sube a ~72vh para que ocupe
   la pantalla en vez de compartirla. */
.figs--solo .fig-main .shot{height:clamp(320px,72vh,820px)}
.figs--solo .fig-cap{padding-right:var(--mar)}

/* KITCHENS · dos a la par, mismo alto, y la grande se sale por la IZQUIERDA.
   Es el espejo de HOME: el mismo gesto por el borde contrario, para que al
   pasar de un capítulo al siguiente el ojo note el cambio de lado. */
.figs--par{grid-template-columns:1.5fr 1fr;align-items:stretch;margin-left:calc(var(--mar) * -1)}
.figs--par .fig-main .fig-cap{padding-left:var(--mar)}
/* La grande sube y la acompañante NO: la dominancia se hace con la
   diferencia, no subiendo las dos. */
.figs--par .fig-main .shot{height:clamp(300px,66vh,760px)}
.figs--par .fig-side .shot{height:clamp(240px,46vh,530px)}

/* NIVEL 4 — EL CAPÍTULO QUE CAMBIA DE FORMATO. [CANON: pin-up-28] cierra su
   número con un "Sun Book" de PÁGINA MÁS CHICA y troqueles que van
   reduciéndose: el objeto mismo hace la secuencia. No cambia el layout dentro
   de la página — cambia la página.
   Aquí el centro se aplanaba: cocina y baño corrían a 55/45 y 50/45, cuatro
   pantallas casi idénticas, que es literalmente el error que nombra
   [TEMARIO N4] — "una revista donde todo tiene la misma intensidad no tiene
   ritmo: tiene un promedio".
   Baño se retranquea columna y media por cada lado. Es el capítulo de página
   chica, y compone con lo que ya era: el único que NO sangra por ningún borde.
   El que no cruza el margen es también el que cabe en menos ancho. */
#p-bath{padding-inline:calc(var(--mar) + 1.5 * (100% - 11 * var(--gut)) / 12)}
/* Y la tira tiene que encoger CON el capítulo. Estaba en `vw`, o sea medida
   contra la ventana y no contra su página: el retranqueo movía los márgenes
   pero las fichas seguían igual de grandes, y la intensidad sólo bajaba 4
   puntos. Página chica de verdad = 78% de todo, que es la proporción del
   retranqueo (924px de 1178). */
#p-bath .rail-item:nth-child(3n+1){flex-basis:clamp(190px,27vw,392px)}
#p-bath .rail-item:nth-child(3n+2){flex-basis:clamp(250px,37vw,540px)}
#p-bath .rail-item:nth-child(3n+3){flex-basis:clamp(145px,20vw,282px)}
/* Y el sumario tiene que ocupar MÁS columnas, no las mismas: con la página
   retranqueada, cuatro doceavos de 924px daban 292px = 42 caracteres reales,
   por debajo del mínimo de 45 del nivel 1. Una página más chica no puede
   heredar el reparto de columnas de una grande. */
#p-bath .space-head>.dense,#p-bath .space-head>.space-acts{grid-column:7 / span 6}

/* BATHROOMS · LA QUE NO SANGRA. Alta y estrecha contra baja y ancha,
   cosidas por abajo; la diferencia de alto es la composición, no un hueco.
   Se queda dentro del margen a propósito: es la imagen que flota de
   [CANON: disegno], y es la que le devuelve el sentido a las otras tres.
   Se retranquea media columna del borde izquierdo para que se lea posada y
   no encajada. */
.figs--pie{grid-template-columns:1fr 1.45fr;align-items:end;
 padding-left:calc((100% - 11 * var(--gut)) / 24)}
.figs--pie .fig-main{order:2}
.figs--pie .fig-side{order:1}
.figs--pie .fig-main .shot{height:clamp(310px,68vh,780px)}
.figs--pie .fig-side .shot{height:clamp(230px,42vh,470px)}

/* OUTDOOR · el cuarto borde: los DOS. De canto a canto. Miami es horizonte,
   y es el único capítulo donde la foto no tiene margen por ningún lado. */
.figs--sangre{grid-template-columns:1fr;margin-inline:calc(var(--mar) * -1);gap:0}
/* [CANON: nest] El spread más citado de esa revista son DOS fotografías del
   MISMO cuarto, a doble página, a sangre por los cuatro lados, y CERO texto:
   ni titular, ni pie, ni folio. No son dos sitios distintos — es el mismo
   espacio desde dos ángulos, y esa continuidad es lo que mantiene al lector
   dentro del cuarto al pasar la página.
   Aquí ya existían las dos fotos y nadie las había leído como par: la misma
   cocina exterior al ATARDECER y al MEDIODÍA. La segunda estaba en
   `display:none`. Se muestran las dos, pegadas sin medianil, cada una casi a
   pantalla completa, y se calla el primer pie: dos pantallas seguidas sin una
   sola palabra. Es el único sitio del recorrido donde pasa — [CANON: fence-26]
   la ausencia se señala, o se lee como error, y aquí la señal es que son las
   ÚNICAS dos fotos del sitio que se tocan sin medianil. */
.figs--sangre .fig-side{display:block}
.figs--sangre .fig-main .shot,
.figs--sangre .fig-side .shot{height:clamp(340px,88vh,940px);border-radius:0}
.figs--sangre .fig-main .fig-cap{position:absolute;width:1px;height:1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap}   /* sigue leyéndose en lector de pantalla */
.figs--sangre .fig-side .fig-cap{padding-inline:var(--mar)}

/* La galería lateral. Scroll nativo con imán: el dedo, la rueda, el
   trackpad y las flechas del teclado funcionan sin una línea de JS —
   y por eso no se rompe cuando JS falla. */
/* Cabecera de la galería: dice cuántas hay y en cuál vas. */
.rail-wrap{margin-top:clamp(30px,5vh,60px)}
.rail-head{display:flex;align-items:center;gap:16px;padding-bottom:12px;
 border-bottom:1px solid var(--hair);font-size:var(--fs-cap)}
.rail-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--piedra)}
.rail-count b{color:inherit;font-weight:700}
.rail-nav{display:flex;gap:8px}
.rail-btn{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
 border:1px solid var(--hair);background:transparent;color:inherit;font-size:var(--fs-body);
 transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),opacity var(--fast)}
.rail-btn:hover:not(:disabled){background:var(--ambar);border-color:var(--ambar);color:var(--tinta)}
.rail-btn:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail{display:flex;gap:var(--gut);margin-top:16px;padding-bottom:12px;
 overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
 scrollbar-color:var(--piedra) transparent;overscroll-behavior-x:contain}
.rail:focus-visible{outline:2px solid var(--ambar);outline-offset:6px}
.rail-item{flex:0 0 clamp(230px,26vw,380px);scroll-snap-align:start}
.rail-item .shot{aspect-ratio:4/5}
/* [TEMARIO N2 — la prueba rápida] "si tus imágenes son del mismo tamaño y
   están alineadas entre sí, no estás componiendo: estás llenando una
   plantilla." Este carrusel repetía la MISMA caja de 332x415 diecinueve
   veces entre las cuatro secciones: 19 de las 40 imágenes del sitio.
   [CANON: disegno] pone tres imágenes en una portada y ninguna mide lo mismo
   ni se alinea con otra. Ciclo de tres: retrato / apaisada grande / cuadrada
   chica, que además obliga a que los pies terminen a alturas distintas
   ([CANON: fence-26] las columnas pueden acabar disparejas).
   Sigue siendo el mismo carrusel: arrastra, se desliza, imán, botones,
   teclado y contador. Lo que cambia es la caja, no la afordancia.
   En móvil no aplica: ahí manda el 76vw de una foto a la vez. */
@media(min-width:901px){
 .rail{align-items:flex-start}
 /* NIVEL 3 · el ciclo de tres se mantiene (es del nivel 2) pero SUBE de
    escala. Antes cabían 3.2 fichas en pantalla y la dominancia del viewport
    del carrusel era 0.22-0.33: siete fotos chicas repartiéndose la pantalla,
    que es literalmente lo que [CORPUS 7] dice que pierde. Con estas medidas
    caben ~2.3 y la mayor se lleva la mitad del área. Menos y más grandes. */
 .rail-item:nth-child(3n+1){flex:0 0 clamp(230px,34vw,500px)}
 .rail-item:nth-child(3n+1) .shot{aspect-ratio:4/5}
 .rail-item:nth-child(3n+2){flex:0 0 clamp(320px,47vw,690px)}
 .rail-item:nth-child(3n+2) .shot{aspect-ratio:3/2}
 .rail-item:nth-child(3n+3){flex:0 0 clamp(180px,25vw,360px)}
 .rail-item:nth-child(3n+3) .shot{aspect-ratio:1/1}
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--piedra);border-radius:3px}
.rail::-webkit-scrollbar-track{background:color-mix(in srgb,currentColor 10%,transparent)}

/* El antes/después, ahora dentro de Home remodeling. */
.ba-block{margin-top:clamp(40px,7vh,90px)}
.ba-block h3{margin-bottom:clamp(16px,2.5vh,28px)}
.ba-block .ba-stage{position:relative;height:clamp(340px,66vh,760px);overflow:hidden}
.ba-block .voice{display:block;margin-top:16px;font-family:var(--display);font-size:var(--fs-mid);font-weight:400;color:var(--piedra)}

/* ---------- 08 Los pasos. Dos columnas enfrentadas y una línea que las
   cose. En estrecho se apilan y la etiqueta dice de quién es cada una. */
.steps{margin-top:clamp(28px,4.5vh,56px)}
.steps-head{display:grid;grid-template-columns:44px 5fr 5fr;column-gap:var(--gut);row-gap:12px;
 padding-bottom:12px;border-bottom:1px solid var(--hair);font-size:var(--fs-cap)}
.steps-head span:first-child{grid-column:2}
.step{display:grid;grid-template-columns:44px 5fr 5fr;column-gap:var(--gut);row-gap:12px;
 padding:clamp(24px,3.6vh,42px) 0;border-bottom:1px solid var(--hair);align-items:start}
.step-n{padding-top:4px;font-size:var(--fs-cap);color:var(--ambar)}
.step h4{font:700 var(--fs-mid)/1.15 var(--display);letter-spacing:-.02em;margin-bottom:8px}
.step p{font-size:var(--fs-body);line-height:1.5;max-width:38ch;color:var(--txt-d2)}
.step-us h4{color:var(--ambar)}
.step-im{grid-column:2/-1;margin-top:24px}
.step-im .shot{height:clamp(220px,42vh,460px)}

/* ---------- 09 La tienda. Vitrina honesta: dice que no ha abierto. */
.shop{display:grid;grid-template-columns:6fr 5fr;column-gap:var(--gut);row-gap:28px;align-items:center}
.shop-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(18px,3vh,30px) 0}
.shop-list li{padding:8px 16px;border:1px solid var(--hair);font-size:var(--fs-cap);font-family:var(--display);
 font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.shop-form{display:grid;gap:16px;max-width:420px}
.shop-im .shot{height:clamp(340px,66vh,720px)}
#shop-note{font-size:var(--fs-body);letter-spacing:0;text-transform:none;line-height:1.45;max-width:calc(var(--medida) * 1ch)}

/* ---------- 10 Contacto y el hueco de la agenda. ---------- */
.contact-grid{display:grid;grid-template-columns:7fr 4fr 1fr;column-gap:var(--gut)   /* idem */;row-gap:32px;align-items:start}
#p-contact .form{width:100%;max-width:none}
.booking{border:1px solid var(--hair);padding:clamp(22px,3vw,34px)}
.booking h3{font:700 var(--fs-mid)/1.1 var(--display);letter-spacing:-.025em;margin:8px 0 16px}
.booking-list{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.booking-list li{position:relative;padding-left:24px;font-size:var(--fs-body);line-height:1.45;color:var(--txt-d2)}
.booking-list li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--ambar)}
.booking-note{font-size:var(--fs-body);letter-spacing:0;text-transform:none;line-height:1.5;opacity:.7}

/* ---------- El pie. Se queda por la línea legal, no por decorar. ---- */
.foot-legal{padding:clamp(44px,7vh,84px) var(--mar);border-top:1px solid var(--hair)}
.foot-legal .verify{max-width:calc(var(--medida) * 1ch);font-size:var(--fs-body);line-height:1.55;color:var(--txt-d2)}
.foot-legal .verify a{color:var(--ambar-txt)}
.foot-cols{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);margin-top:clamp(26px,4vh,44px);
 padding-top:24px;border-top:1px solid var(--hair);font-size:var(--fs-cap)}

/* ---------- El overlay de estilos. El "submenú" de la hoja. ---------- */
.ov{position:fixed;inset:0;z-index:1200;background:var(--cal);color:var(--tinta);
 display:flex;flex-direction:column;padding:clamp(18px,3vh,34px) var(--mar) var(--mar);
 opacity:0}
/* Un display de autor gana sobre el display:none que el navegador le da a
   [hidden]. Sin esta línea el overlay se queda a pantalla completa,
   invisible y encima de todo, comiéndose cada clic de la página: los
   botones dejan de servir y nada lo delata. */
.ov[hidden]{display:none!important;pointer-events:none}
.ov.is-open{opacity:1}
.ov-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
 padding-bottom:clamp(14px,2.4vh,26px);border-bottom:1px solid var(--hair)}
.ov-bar h2{font:700 var(--fs-display)/1.03 var(--display);letter-spacing:-.03em;margin-top:4px}
#ov-space{font-size:var(--fs-cap);color:var(--piedra)}
.ov-body{flex:1;min-height:0;display:grid;grid-template-columns:1.5fr 1fr;
 gap:clamp(22px,3.6vw,56px);padding-top:clamp(18px,3vh,32px)}
.ov-shot{min-height:0}
.ov-shot .shot{height:100%;min-height:260px}
.ov-shot img{width:100%;height:100%;object-fit:cover;
 transition:opacity var(--base) var(--ease)}
.ov-shot img.is-swapping{opacity:0}
.ov-side{display:flex;flex-direction:column;min-height:0;overflow-y:auto}

/* Las pestañas de estilo, con el indicador que se desliza. */
.ov-tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--hair);margin-bottom:24px}
.ov-tab{position:relative;padding:12px 16px 12px;background:none;border:0;cursor:pointer;
 font-family:var(--display);font-weight:700;font-size:var(--fs-body);letter-spacing:-.015em;
 color:var(--piedra);white-space:nowrap;transition:color var(--fast) var(--ease)}
.ov-tab[aria-selected="true"]{color:var(--tinta)}
.ov-tab:hover{color:var(--tinta)}
.ov-tab:focus-visible{outline:2px solid var(--ambar);outline-offset:-2px}
.ov-ink{position:absolute;bottom:-1px;height:2px;background:var(--ambar);
 transition:transform var(--base) var(--ease),width var(--base) var(--ease);pointer-events:none}
.ov-desc{font-size:var(--fs-body);line-height:1.5;margin-bottom:24px;max-width:40ch}
.ov-lbl{font-size:var(--fs-cap);color:var(--piedra);margin-bottom:12px}

/* Las muestras. Color y nombre: la paleta se lee sin depender de una
   foto que todavía no existe. */
/* La lámina de color. El formato viene de la hoja que mandó la clienta:
   cuadrado grande, código arriba, nombre abajo. Un color con nombre se
   puede pedir en la tienda de pintura; una mancha de color, no. */
.pal{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;margin-bottom:32px}
.chip{position:relative;aspect-ratio:1;border-radius:var(--r);padding:12px;
 display:flex;flex-direction:column;gap:4px;color:var(--tinta);
 box-shadow:inset 0 0 0 1px #2b252118}
.chip.is-dark{color:var(--cal);box-shadow:inset 0 0 0 1px #f3efe72e}
.chip-c{font-family:var(--display);font-size:var(--fs-cap);font-weight:700;letter-spacing:.08em;opacity:.75}
.chip-n{font-family:var(--display);font-weight:700;font-size:var(--fs-cap);
 line-height:1.15;letter-spacing:-.01em}
.chip-h{margin-top:auto;font-family:var(--display);font-size:var(--fs-cap);letter-spacing:.06em;opacity:.55}

/* Los materiales son fotos, no muestras: se pulsan y la imagen grande
   pasa al detalle. Ver el azulejo de cerca es lo que decide una cocina. */
.mats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:24px}
.mat{background:none;border:0;padding:0;cursor:pointer;text-align:left;color:inherit;
 display:flex;flex-direction:column;gap:8px}
.mat-im{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r-lg);
 box-shadow:inset 0 0 0 1px #2b252118;
 outline:2px solid transparent;outline-offset:2px;
 transition:outline-color var(--fast) var(--ease)}
.mat-im img{width:100%;height:100%;object-fit:cover;
 transition:transform var(--slow) var(--ease),filter var(--fast) var(--ease);filter:saturate(.85)}
.mat.is-on .mat-im{outline-color:var(--ambar)}
.mat.is-on .mat-im img,.mat:hover .mat-im img{filter:none;transform:scale(1.06)}
.mat-n{font-size:var(--fs-cap);line-height:1.25;color:var(--piedra)}
.mat.is-on .mat-n{color:var(--tinta);font-weight:700}
.mat:focus-visible .mat-im{outline-color:var(--ambar)}
.ov-cta{align-self:flex-start;margin-top:auto}
body.ov-is-open{overflow:hidden}

/* ---------- El menú, con los espacios agrupados. ---------- */
.nav-group{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.nav-group-t{font-size:var(--fs-cap);color:var(--piedra);padding-left:4px;margin-bottom:4px}
.nav-sub{padding-left:clamp(16px,3vw,42px)!important}

/* ---------- Estrecho ---------- */
@media(max-width:900px),(pointer:coarse),(max-height:699px){
 .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:8px}
 .tile{min-height:280px}
 .tile--lead{grid-column:1/-1;grid-row:auto;min-height:340px}
 .space-head{grid-template-columns:1fr;gap:16px}
 /* La colocación por columnas de arriba es de escritorio. En una sola columna
    un grid-column:8 inventaría columnas implícitas y el bloque saldría fuera. */
 .space-head>h2,.space-head>.dense,.space-head>.space-acts,
 .panel.space .space-head>h2,.panel.space .space-head>.dense,.panel.space .space-head>.space-acts,
 .panel.space:has(.figs--par) .space-head>h2,
 .panel.space:has(.figs--par) .space-head>.dense,
 .panel.space:has(.figs--par) .space-head>.space-acts{grid-column:1/-1;grid-row:auto}
 /* Y el capítulo de página chica del nivel 4 también: su regla llevaba
    especificidad de ID, así que ganaba aquí y mandaba el sumario a la columna 7
    de una retícula de UNA columna — columnas implícitas y 68px de desborde
    horizontal, que sólo se vieron midiendo scrollWidth contra clientWidth.
    En un teléfono la página ya es chica: el retranqueo no tiene nada que decir. */
 #p-bath{padding-inline:var(--mar)}
 #p-bath .space-head>.dense,#p-bath .space-head>.space-acts{grid-column:1/-1}
 #p-bath .rail-item:nth-child(3n+1),#p-bath .rail-item:nth-child(3n+2),
 #p-bath .rail-item:nth-child(3n+3){flex-basis:76vw}
 .space-figs,.figs--par,.figs--pie{grid-template-columns:1fr;gap:12px}
 .figs--pie .fig-main{order:1}.figs--pie .fig-side{order:2}
 /* NIVEL 3 EN EL TELÉFONO. Aquí todas las fotos caían al mismo 4/3 y medían
    248px = 31% de la pantalla: en móvil NINGUNA imagen dominaba nunca, y es
    donde más gente va a mirar. La pantalla del teléfono es RETRATO, así que
    un recorte apaisado le regala dos tercios al fondo.
    La principal se mide contra la pantalla, no contra una proporción; la
    acompañante se queda en 4/3 para que la diferencia siga siendo la que
    hace la jerarquía. */
 .fig-main .shot{height:clamp(300px,58vh,560px)!important;aspect-ratio:auto}
 .fig-side .shot{height:auto!important;aspect-ratio:4/3}
 /* El par de [CANON: nest] sobrevive al teléfono: dos pantallas seguidas del
    mismo sitio, sin una palabra. En retrato funciona incluso mejor. */
 .figs--sangre .fig-main .shot,.figs--sangre .fig-side .shot{height:70vh!important;aspect-ratio:auto}
 /* En una sola columna el sangrado deja de ser composición y se vuelve un
    recorte: la foto ya ocupa el ancho entero. Se cancelan los cuatro. */
 .figs--sangre,.figs--solo,.figs--par{margin-inline:0}
 .figs--pie{padding-left:0}
 .figs--solo .fig-cap,.figs--par .fig-main .fig-cap{padding-inline:0}
 .figs--sangre .fig-main .shot{border-radius:0}
 .rail-item{flex-basis:76vw}
 .steps-head{display:none}
 .step{grid-template-columns:34px 1fr;gap:16px}
 .step-you,.step-us{grid-column:2}
 .step-us{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
 .step-you::before{content:attr(data-lbl)}
 .step-im{grid-column:1/-1}
 .shop{grid-template-columns:1fr;gap:24px}
 .shop-im .shot{height:auto;aspect-ratio:3/4}
 .contact-grid{grid-template-columns:1fr;gap:24px}
 .ov-body{grid-template-columns:1fr;overflow-y:auto}
 .ov-shot .shot{height:auto;aspect-ratio:4/3;min-height:0}
 .ov-tabs{overflow-x:auto}
 .pal{grid-template-columns:repeat(3,1fr);gap:8px}
 .mats{grid-template-columns:repeat(5,1fr);gap:8px}
 .mat-n{font-size:var(--fs-cap)}
 .ba-block .ba-stage{height:auto;aspect-ratio:4/3}
}

/* Quien pidió menos movimiento recibe menos movimiento. */
@media(prefers-reduced-motion:reduce){
 .ov,.ov-ink,.ov-shot img,.tile img,.btn,.btn em{transition:none!important}
}

/* La retícula del mosaico es 3x2 y la ficha grande se come la primera
   columna entera: quedaban tres fichas para cuatro celdas y el hueco se
   veía. Outdoor toma las dos celdas del renglón de abajo — y de paso el
   recorte ancho le va mejor a una alberca que uno cuadrado. */
.tile--wide{grid-column:span 2}
@media(max-width:900px),(pointer:coarse),(max-height:699px){
 .tile--wide{grid-column:1/-1}
}

/* ============================================================
   ESQUINAS
   El sitio se sentía muy cuadrado. Un radio pequeño y consistente
   quita el pico duro sin volverlo blando: 6px en lo chico, 10px en
   los planos grandes. Un solo token para no acabar con nueve radios
   distintos, que es como una interfaz empieza a verse descuidada.
   ============================================================ */
/* ESQUINA RECTA. Pedido del dueño el 5 sep 2026, y coincide con lo medido:
   el radio de 16px en fotos y paneles es lo que hace que una foto se lea como
   TARJETA, y [MEDIDO] cero de cinco portadas de estudio usan retícula de
   tarjetas. Una foto de revista no tiene esquina redonda: tiene borde de
   página. --r-lg queda en 0 y con eso caen shot, tile, band-plate, rail-item,
   step-im, mat-im, prod-im y ov-shot de una sola vez.
   --r se queda en 9px porque ahí SÍ significa algo: es lo que se toca —
   botones, campos, chips. La forma dice "esto se pulsa". */
:root{--r:9px;--r-lg:0px}
/* Subido de 6/10 a 9/16 el 5 sep: seguía leyéndose a escuadra. Este es
   el techo antes de que la interfaz empiece a sentirse blanda. */

.shot,.tile,.band-plate,.ov-shot .shot,.rail-item .shot,.step-im .shot{border-radius:var(--r-lg)}
/* Sólo lo que se toca conserva la esquina. .booking salió de esta lista:
   es un panel, no un botón, y con radio se leía como tarjeta. */
.btn,.submit,.hero-cta,#cta,.rail-btn,.shop-list li,
.field input,.field select,.skip-link{border-radius:var(--r)}   /* se tocan */
.ba-tag,.band-cap,.scrub-cap{border-radius:0}                   /* no se tocan: rectos */
.sw i{border-radius:50%}
.ov{border-radius:0}
.tile img,.band-plate img,.shot img,.shot video{border-radius:inherit}

/* El botón redondo de la galería: círculo completo, que es lo que la
   mano espera de una flecha suelta. */
.rail-btn{border-radius:50%}

/* La banda ámbar y el pie son planos de página entera: si se redondean
   se despegan del borde y se ve como una tarjeta flotando. Se quedan. */
.panel--type,.foot-legal,#p-hero{border-radius:0}

/* ============================================================
   OFICIO DE DETALLE
   Cuatro patrones traídos del catálogo de 21st.dev y reescritos en CSS
   plano (el original es React + Tailwind, que aquí no corre). Se
   descartaron a propósito los gradientes, los bordes que giran y el
   glassmorphism: la clienta pidió "serio", y eso es exactamente lo que
   un botón con borde girando deja de ser.
   ============================================================ */

/* 1 · El subrayado que entra barriendo  [Animated Link, @ruixen.ui]
   El menú no tenía ningún acuse de hover: se sabía que era enlace por
   el cursor y nada más. Entra por la izquierda y sale por la derecha,
   así que ir y venir entre dos no parpadea. */
.hdr-nav a,.foot-legal a,.verify a{position:relative}
.hdr-nav a::after,.verify a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;
 background:currentColor;transform:scaleX(0);transform-origin:right;
 transition:transform var(--base) var(--ease)}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after,.verify a:hover::after{
 transform:scaleX(1);transform-origin:left}
.hdr-nav a[aria-current]::after{background:var(--ambar);height:2px}

/* 2 · El relleno que barre el botón  [Gradient CTA Button, @mengto,
   sin el gradiente]. El color no salta de golpe: la tinta entra por un
   lado. Es la diferencia entre un botón que cambia y uno que responde. */
.btn--amber,.submit,.hero-cta,#cta{position:relative;overflow:hidden;isolation:isolate}
.btn--amber::before,.submit::before,.hero-cta::before,#cta::before{
 content:'';position:absolute;inset:0;z-index:-1;background:var(--tinta);
 transform:scaleX(0);transform-origin:right;transition:transform var(--slow) var(--ease)}
.btn--amber:hover::before,.submit:not(:disabled):hover::before,
.hero-cta:hover::before,#cta:hover::before{transform:scaleX(1);transform-origin:left}
.btn--amber:hover,.submit:not(:disabled):hover,.hero-cta:hover,#cta:hover{
 background:var(--ambar);color:var(--cal)}
#cta:hover{outline:none}

/* 3 · La foto de galería que se acerca y suelta su pie
   [Hover Zoom / Gallery Hover Carousel]. El pie estaba siempre puesto y
   competía con la imagen; ahora la imagen manda y el dato llega cuando
   lo buscas. En táctil no hay hover, así que ahí el pie no se esconde. */
.rail-item .shot{overflow:hidden}
.rail-item .shot img{transition:transform var(--cross) var(--ease)}
@media(hover:hover){
 .rail-item:hover .shot img{transform:scale(1.045)}
 .rail-item .fig-cap{opacity:.55;transition:opacity var(--base) var(--ease)}
 .rail-item:hover .fig-cap,.rail-item:focus-within .fig-cap{opacity:1}
}

/* 4 · El grano  [Card with Noise Pattern, @Ali-Hussein-dev]
   Lo que hace que un plano oscuro se sienta impreso en vez de rellenado
   en pantalla. Turbulencia SVG al 4%: no se ve, se nota. Va sobre los
   planos de tinta, nunca sobre las fotos. */
.s-tinta{position:relative;isolation:isolate}
.s-tinta::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#p-hero::after{display:none}   /* la foto ya trae su propio grano */

@media(prefers-reduced-motion:reduce){
 .hdr-nav a::after,.btn--amber::before,.submit::before,.hero-cta::before,#cta::before,
 .rail-item .shot img,.rail-item .fig-cap{transition:none!important}
}

/* ============================================================
   EL LOGO
   La clienta entregó el lockup y el encargo es afinarlo, no rediseñarlo:
   be / home / LIVING, sin monograma. El disco ámbar de su lámina no es
   parte de la marca — es cómo le gusta verla, blanco sobre ámbar.
   Lo que se afina es sólo la letra (Red Hat Display, el peso de la
   marca) y la alineación. La regla de construcción —las tres líneas
   miden lo mismo de ancho— la calcula fitLogo() midiendo en el
   navegador, y no se toca.
   ============================================================ */
.logo .l1{display:block;gap:0;font-weight:800;letter-spacing:-.055em}
.logo .l2{font-weight:700;letter-spacing:-.045em;color:var(--crema)}
.logo .l3{font-weight:700;font-family:var(--display)}
.lmark{display:none}

/* Blanco sobre ámbar: la lámina de la clienta, sin el disco. */
.logo--amber{background:var(--ambar);color:var(--blanco);
 padding:.42em .5em .34em;border-radius:0}
.logo--amber .l2{color:var(--crema)}

/* ============================================================
   MOVIMIENTO POR SECCIÓN
   Un patrón del catálogo de 21st.dev por cada parte nueva, reescrito en
   CSS/JS planos. El nombre del componente original va en cada bloque
   para que se pueda ir a ver de dónde salió.
   ============================================================ */

/* MOSAICO · Magnified Bento (@0xUrvish)
   Señalar una ficha apaga las otras. La retícula deja de ser cuatro
   fotos compitiendo y pasa a tener una sola respuesta a la vez. */
.tile{transition:opacity var(--slow) var(--ease),filter var(--slow) var(--ease),
 transform var(--slow) var(--ease)}
@media(hover:hover){
 .mosaic:hover .tile{opacity:.55;filter:saturate(.55)}
 .mosaic .tile:hover,.mosaic .tile:focus-visible{opacity:1;filter:none;
  transform:translateY(-5px);z-index:2}
}

/* GALERÍA · Scroll Progress (@cnippet.dev) + arrastre
   La barra dice cuánto queda; el arrastre con el ratón es lo que la
   gente ya intenta hacer con una tira de fotos. El scroll nativo, la
   rueda y las flechas siguen intactos: esto se suma. */
.rail-bar{height:2px;background:color-mix(in srgb,currentColor 15%,transparent);
 border-radius:0;overflow:hidden;margin-top:4px}
.rail-bar i{display:block;height:100%;width:0;background:var(--ambar);
 border-radius:0;transition:width 180ms linear}
@media(hover:hover){.rail{cursor:grab}.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
 .rail.is-dragging .rail-item{pointer-events:none}}

/* PASOS · Scroll Reveal Content A (@abui)
   La línea se llena conforme bajas. Un proceso de cinco pasos sin
   avance visible es una lista; con avance es un recorrido. */
.steps{position:relative}
.steps-rail{position:absolute;left:12px;top:44px;bottom:24px;width:2px;
 background:color-mix(in srgb,currentColor 16%,transparent);border-radius:0}
.steps-rail i{display:block;width:100%;height:0;background:var(--ambar);border-radius:0}
.step-n{position:relative;z-index:1}

/* PALETA · Color Input (@kokonutd)
   El color se copia al pulsarlo. Un tono con su hex en el portapapeles
   se puede pedir en la tienda de pintura; una mancha bonita, no. */
.chip{border:0;font:inherit;text-align:left;cursor:pointer;width:100%;
 transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.chip:hover{transform:translateY(-3px);box-shadow:0 6px 18px #2b252126}
.chip:active{transform:translateY(0)}
.chip:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
.chip-copy{position:absolute;inset:0;display:grid;place-items:center;
 border-radius:var(--r);background:var(--tinta);color:var(--cal);
 font-family:var(--display);font-size:var(--fs-cap);font-weight:700;letter-spacing:.12em;
 opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease)}
.chip.is-copied .chip-copy{opacity:1}

/* OVERLAY · Fade Slide Tabs (@ruixen.ui)
   Al cambiar de estilo el contenido entra deslizando en vez de saltar,
   así se entiende que cambió el estilo y no la página. */
.ov-anim{will-change:transform,opacity}

/* BOTONES · Ripple Button (@ddoemonn)
   La onda sale del punto exacto donde cayó el dedo, no del centro. Es
   lo que confirma que el botón recibió ESE clic. */
.btn--amber,.submit,.hero-cta,#cta,.rail-btn{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
 background:currentColor;opacity:.28;pointer-events:none;mix-blend-mode:overlay}

/* CITA · card-hover
   La tarjeta se levanta un pelo. Dice "esto es una pieza", no un párrafo
   con borde. */
.booking{transition:transform var(--base) var(--ease),border-color var(--base) var(--ease)}
@media(hover:hover){.booking:hover{transform:translateY(-4px);border-color:var(--ambar)}}

/* TIENDA · Inline Validation (@ddoemonn)
   El renglón de abajo cambia mientras se escribe: pista, error o listo.
   Nunca se calla, y nunca miente diciendo que envió algo. */
#shop-note{transition:color var(--fast) var(--ease)}
#shop-note.is-bad{color:#B4442A}
#shop-note.is-ok{color:#4F6B4A}

@media(prefers-reduced-motion:reduce){
 .tile,.chip,.booking,.rail-bar i{transition:none!important}
 .rip{display:none}
}

/* ============================================================
   LOS BLOQUES BÁSICOS DE PÁGINA
   Cuatro huecos que el sitio tenía como página, no como diseño:
   nadie sabía dónde estaba, el pie no llevaba a ningún lado, no
   había forma de volver arriba, y las seis preguntas que todo
   cliente de remodelación hace no estaban contestadas.
   ============================================================ */

/* MENÚ · Scroll Progress (@ibelick) + Scroll Direction: Hide Header
   (@motiondotdev). La línea dice cuánto queda de página. Y el
   encabezado se va al bajar y vuelve al subir: en una página que es
   casi toda fotografía, la barra fija se está comiendo la imagen todo
   el rato. Vuelve en cuanto se sube, que es cuando se busca el menú. */
.hdr-bar{position:absolute;left:0;right:0;bottom:0;height:2px;
 background:color-mix(in srgb,currentColor 14%,transparent);overflow:hidden}
.hdr-bar i{display:block;height:100%;width:0;background:var(--ambar)}
.hdr{transition:background var(--base) var(--ease),color var(--base) var(--ease),
 padding var(--base) var(--ease),transform var(--slow) var(--ease)}
.hdr.is-away{transform:translateY(-100%)}

/* ÍNDICE LATERAL · Animated Sidebar (@unlumen)
   Diez secciones y ninguna pista de dónde va uno. Cada punto es un
   enlace de verdad y enseña su nombre al acercarse. */
#dots{position:fixed;right:calc(var(--mar) * .5);top:50%;transform:translateY(-50%);
 z-index:820;display:flex;flex-direction:column;gap:4px;padding:8px 4px;
 opacity:0;visibility:hidden;transition:opacity var(--base),visibility var(--base)}
#dots.on{opacity:1;visibility:visible}
#dots a{position:relative;display:grid;place-items:center;width:26px;height:20px}
#dots i{display:block;width:14px;height:2px;border-radius:0;background:currentColor;
 opacity:.32;transition:opacity var(--fast) var(--ease),width var(--fast) var(--ease),
 background var(--fast) var(--ease)}
#dots a:hover i{opacity:.75;width:20px}
#dots a[aria-current] i{background:var(--ambar);opacity:1;width:22px}
#dots a::after{content:attr(data-t);position:absolute;right:calc(100% + 10px);
 white-space:nowrap;font-family:var(--display);font-size:var(--fs-cap);font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;
 background:var(--tinta);color:var(--cal);padding:4px 8px;border-radius:var(--r);
 opacity:0;transform:translateX(4px);pointer-events:none;
 transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
#dots a:hover::after,#dots a:focus-visible::after{opacity:1;transform:none}
#dots a:focus-visible i{outline:2px solid var(--ambar);outline-offset:3px}

/* PREGUNTAS · FAQ Accordion (@shadcnblockscom / @cnippet.dev)
   <details> nativo: abre sin JS, el navegador lo anuncia solo, y el
   buscador lee la respuesta aunque esté cerrada. Un acordeón escrito a
   mano pierde las tres cosas. */
.faq-grid{display:grid;grid-template-columns:4fr 7fr 1fr;column-gap:var(--gut)   /* idem */;row-gap:28px;align-items:start}
.faq-lede .dense{max-width:32ch;margin-top:16px}
.faq-list{border-top:1px solid var(--hair)}
.faq{border-bottom:1px solid var(--hair)}
.faq summary{display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer;
 list-style:none;font:700 var(--fs-mid)/1.28 var(--display);letter-spacing:-.02em;
 transition:color var(--fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';margin-left:auto;flex:0 0 auto;width:13px;height:13px;
 background:currentColor;transition:transform var(--base) var(--ease);
 clip-path:polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%)}
.faq[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--piedra)}
.faq summary:focus-visible{outline:2px solid var(--ambar);outline-offset:4px}
.faq p{padding:0 48px 24px 0;font-size:var(--fs-body);line-height:1.6;max-width:calc(var(--medida) * 1ch);opacity:.85}

/* PIE · Large Name Footer (@arihantcodes) + Footer (@mikolajdobrucki)
   Al fondo de 14.000 px no había a dónde ir. Cuatro columnas y el
   camino de vuelta arriba. */
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);
 row-gap:clamp(20px,3vw,48px);margin-top:clamp(30px,5vh,56px);
 padding-top:clamp(26px,4vh,44px);border-top:1px solid var(--hair)}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h3{font-size:var(--fs-cap);color:var(--ambar-txt);margin-bottom:4px}
.foot-col a{font-size:var(--fs-body);line-height:1.35;width:fit-content;
 transition:opacity var(--fast) var(--ease)}
.foot-col a:hover{opacity:1}
.foot-p{font-size:var(--fs-cap);line-height:1.55;opacity:.7;max-width:28ch}
.to-top{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
 color:inherit;cursor:pointer;font-family:var(--display);font-size:var(--fs-cap);font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;padding:0;
 transition:color var(--fast) var(--ease)}
.to-top em{font-style:normal;transition:transform var(--base) var(--ease)}
.to-top:hover{color:var(--ambar)}
.to-top:hover em{transform:translateY(-4px)}
.to-top:focus-visible{outline:2px solid var(--ambar);outline-offset:4px}

@media(max-width:900px),(pointer:coarse),(max-height:699px){
 #dots{display:none}
 .faq-grid{grid-template-columns:1fr;gap:24px}
 .faq p{padding-right:0}
 .foot-nav{grid-template-columns:1fr 1fr;gap:24px}
 .hdr.is-away{transform:none}   /* en móvil el menú se queda: es la única salida */
}
@media(prefers-reduced-motion:reduce){
 .hdr,#dots i,.faq summary::after,.to-top em{transition:none!important}
 .hdr.is-away{transform:none}
}

/* La lámina de material. Sustituye al antes/después. Es tipografía, no
   fotografía: un estudio que nombra lo que usa se cree más que uno que
   enseña otro render. Retícula de cuatro, una regla por renglón. */
.spec{margin-top:clamp(44px,8vh,110px);padding-top:clamp(26px,4vh,44px);border-top:1px solid var(--hair)}
.spec-head{display:grid;grid-template-columns:4fr 8fr;column-gap:var(--gut);row-gap:12px;align-items:baseline;margin-bottom:clamp(24px,4vh,44px)}
/* Cuatro columnas daban 271px a 16px = 38-41 caracteres reales, bajo el
   mínimo de 45. Tres dan 372px = 52. Misma corrección que en .list-4. */
.spec-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.spec-list li{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--hair)}
.spec-n{font-family:var(--display);font-size:var(--fs-cap);font-weight:700;letter-spacing:.14em;color:var(--ambar-txt)}
.spec-list b{font:700 var(--fs-mid)/1.12 var(--display);letter-spacing:-.025em}
.spec-list span:last-child{font-size:var(--fs-cap);line-height:1.55;color:var(--txt-2)}
.spec-foot{margin-top:clamp(20px,3vh,34px);font-family:var(--display);font-weight:400;
 font-size:var(--fs-mid);color:var(--txt-2);max-width:44ch}
@media(max-width:900px),(pointer:coarse),(max-height:699px){
 .spec-head{grid-template-columns:1fr;gap:8px}
 /* Dos columnas en un teléfono de 375px dan 158px = 22 caracteres reales por
    línea, la mitad del mínimo del oficio. Los cuatro materiales se apilan. */
 .spec-list{grid-template-columns:1fr;gap:20px}
}

/* El encabezado tenía siete enlaces comprimidos a cero y un botón que
   abría otra lista distinta. Ahora hay UN criterio: la marca vuelve al
   inicio, tres anclas que son las tres decisiones reales del visitante
   (qué hacen · cómo trabajan · qué me van a cobrar), la acción en ámbar,
   y Menu abre el índice completo. Nada se comprime. */
.hdr-nav{display:flex;gap:clamp(18px,2.2vw,34px);flex:0 0 auto;white-space:nowrap}
.hdr-nav a{flex:0 0 auto;font-size:var(--fs-cap);font-weight:700;letter-spacing:0;
 text-transform:none;font-family:var(--display)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);flex:0 0 auto}
.hdr-cta{display:inline-flex;align-items:center;padding:8px 16px;background:var(--ambar);
 color:var(--tinta);font-size:var(--fs-cap);font-weight:800;border-radius:var(--r);
 transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.hdr-cta:hover{background:var(--tinta);color:var(--cal)}
.hdr.is-scrolled .hdr-cta{background:var(--ambar);color:var(--tinta)}
.hdr-cta:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.hdr-nav a::after{bottom:-4px}
@media(max-width:1100px){.hdr-cta{display:none}}
@media(max-width:900px),(pointer:coarse){.hdr-nav{display:none}}

/* LA TIENDA · catálogo, no vitrina. Lo pidió la clienta: se ve la pieza,
   su medida, su material y su precio, y hay un botón de comprar. Cuatro
   fichas del mismo alto — un catálogo con fichas desiguales se lee como
   inventario, no como selección. */
.shop-lede{max-width:52ch;margin-bottom:clamp(26px,4vh,48px)}
.shop-lede .dense{margin-top:16px}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.prod{display:flex;flex-direction:column}
.prod-im{aspect-ratio:1;overflow:hidden;border-radius:var(--r-lg)}
.prod-im img{width:100%;height:100%;object-fit:cover;transition:transform var(--cross) var(--ease)}
@media(hover:hover){.prod:hover .prod-im img{transform:scale(1.05)}}
.prod-i{display:flex;flex-direction:column;gap:8px;padding-top:16px;flex:1}
.prod h3{font:700 var(--fs-mid)/1.12 var(--display);letter-spacing:-.025em}
.prod-s{font-size:var(--fs-cap);line-height:1.45;opacity:.72}
.prod-b{margin-top:auto;padding-top:12px;display:flex;align-items:center;
 justify-content:space-between;gap:12px;flex-wrap:wrap}
.prod-p{font-family:var(--display);font-size:var(--fs-mid);font-weight:700;letter-spacing:-.01em}
.prod-cta{padding:8px 16px;font-size:var(--fs-cap)}
.shop-form{display:flex;flex-wrap:wrap;align-items:end;gap:16px;
 margin-top:clamp(26px,4vh,44px);padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--hair)}
.shop-form .field{flex:1 1 260px;max-width:340px}
#shop-note{flex:1 1 100%;font-size:var(--fs-body);letter-spacing:0;text-transform:none;
 line-height:1.5;opacity:.7;max-width:calc(var(--medida) * 1ch)}

/* Preguntas: se sentía demasiado larga. Se aprieta el ritmo vertical
   sin tocar el contenido — es alto de renglón, no menos respuestas. */
.faq summary{padding:16px 0}
.faq p{padding:0 48px 16px 0;font-size:var(--fs-body);line-height:1.55}
.faq-grid{column-gap:var(--gut)}
#p-faq{padding-block:clamp(48px,7vh,84px)}

@media(max-width:900px),(pointer:coarse),(max-height:699px){
 .shop-grid{grid-template-columns:1fr 1fr;gap:12px}
 .prod-b{flex-direction:column;align-items:flex-start;gap:8px}
}

/* EL ESTUDIO. El sitio enseñaba cuatro fichas y nunca decía qué es
   beHome: un escaparate sin nombre dice lo que hay, no por qué a él.
   La marca es anónima por decisión, así que la confianza se paga con
   hechos comprobables (el 83 lo publica el condado) y no con una cara. */
.cols-open{padding:clamp(64px,9vh,110px) var(--mar) clamp(28px,4vh,48px)}
/* LAS RETÍCULAS DE PÁGINA, EXPRESADAS EN DOCEAVOS. Antes cada una tenía su
   propia proporción inventada —1.2fr 1fr, 1.4fr 1fr, 1fr 1.35fr, 1fr 1.15fr—
   y su propio medianil. Ninguna era múltiplo de otra, así que dos secciones
   seguidas no alineaban en ningún eje vertical. Ahora todas son números
   enteros sobre 12 con el mismo `--gut`, y varias suman 11 en vez de 12:
   [MEDIDO] BIG deja ~445px de margen vacío — la columna que sobra es aire
   con sitio asignado, no un hueco. */
.studio{display:grid;grid-template-columns:5fr 6fr 1fr;column-gap:var(--gut)   /* la 3ª pista va vacía: es el aire, declarado */;row-gap:clamp(20px,3vh,34px);align-items:start}
.studio-l{display:flex;flex-direction:column;gap:12px}
.studio-r{display:flex;flex-direction:column;gap:16px}
.studio-r .stand{font-size:var(--fs-mid);line-height:1.34;max-width:40ch}
.studio-r .dense{max-width:46ch;color:var(--txt-2)}
.studio-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(20px,3vw,52px);margin-top:clamp(30px,5vh,58px);
 padding-top:clamp(22px,3.5vh,38px);border-top:1px solid var(--hair)}
.sfact{display:flex;flex-direction:column;gap:8px}
.sfact b{font:800 var(--fs-mid)/1 var(--display);letter-spacing:-.045em;color:var(--ambar-txt)}
.sfact p{font-size:var(--fs-cap);line-height:1.5;max-width:30ch;opacity:.8}
@media(max-width:900px),(pointer:coarse),(max-height:699px){
 .studio{grid-template-columns:1fr;gap:16px}
 .studio-facts{grid-template-columns:1fr;gap:16px}
}

/* ============================================================
   REFACTORING UI — correcciones medidas
   ============================================================ */

/* 05 · JERARQUÍA DE BOTONES — "Primary Overload"
   Había hasta seis botones ámbar a la vez en pantalla: el del
   encabezado, el flotante, el del hero, "View styles" y los cuatro de
   comprar. Si todo es primario, nada lo es. El flotante y el del
   encabezado son LA MISMA acción: el flotante ya no aparece mientras el
   del encabezado esté a la vista. */
/* Sólo donde el botón del encabezado existe de verdad: por debajo de
   1100px está oculto, y ahí el flotante es la ÚNICA acción persistente.
   Esconderlo también dejaría la página sin ninguna. */
@media(min-width:1101px){
 .hdr:not(.is-away) ~ #cta{opacity:0!important;visibility:hidden!important;pointer-events:none}
}

/* Y "Book the visit" dentro de un espacio es la alternativa, no la
   acción: la acción ahí es ver los estilos. Se baja a terciario. */
.space-acts .btn--ghost{border-color:transparent;padding-inline:0;text-decoration:underline;
 text-underline-offset:6px;text-decoration-thickness:1px;
 text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.space-acts .btn--ghost:hover{background:none;text-decoration-color:currentColor}

/* 08 · ELEVACIÓN
   El overlay es un diálogo sobre la página y estaba en el MISMO crema:
   sin ninguna señal de que está encima. Un plano ligeramente más claro
   y una sombra ancha y tenue lo separan sin volverlo una tarjeta. */
.ov{background:var(--blanco);
 box-shadow:0 -1px 0 color-mix(in srgb,var(--tinta) 10%,transparent),
            0 -32px 64px color-mix(in srgb,var(--tinta) 12%,transparent)}

/* 09 · CONTRASTE
   La opacidad se apilaba sobre colores ya rebajados: .dense al 0.78
   sobre piedra daba menos de lo medido. Se sube el suelo. */
.dense{color:var(--txt-2)}
.prod-s,.sfact p,.faq p,.spec-list span:last-child{color:var(--txt-2)}
.booking-note,#shop-note{color:var(--txt-3)}
.meta{opacity:1;color:var(--txt-2)}
.s-tinta .meta,.s-tinta .booking-note{color:color-mix(in srgb,var(--crema) 72%,transparent)}

/* 06 · RUIDO
   Cada sección abría con una portadilla de tres partes y encima una
   regla. Con diez secciones eso son diez reglas horizontales que no
   separan nada que el cambio de fondo no separe ya. */
.folio{border-bottom:0;padding-bottom:0}
.folio .r{opacity:.55}

/* Sobre fondo oscuro el secundario es crema apagada (7.43:1), no el
   pardo, que ahí se hunde. Mismo criterio, dos grounds. */
.s-tinta .dense,.s-tinta .prod-s,.s-tinta .faq p,.s-tinta .booking-note,
.s-tinta .step p,.s-tinta .foot-p,.s-tinta .verify,.s-tinta .booking-list li{color:var(--txt-d2)}

/* 09 · El token de texto depende del FONDO, no del elemento.
   El ámbar oscuro (#8A4F0C) se eligió para leerse sobre crema — 5.71:1 —
   pero sobre tinta da 1.38:1, que es oscuro sobre oscuro. Sobre fondo
   oscuro el que se lee es el ámbar vivo: 7.53:1. Un token de color que
   no dice sobre qué fondo vive es la mitad de un token. */
.s-tinta .step-n,.s-tinta .spec-n,.s-tinta .foot-col h3,.s-tinta .sfact b,
.s-tinta .verify a,.foot-legal .foot-col h3,.foot-legal .verify a{color:var(--ambar)}
.s-tinta .meta,.foot-legal .meta,.s-tinta .rail-count{color:var(--txt-d2)}
.s-tinta .step-us h4{color:var(--ambar)}

/* Y los pies sobre fotografía llevan su propio plano: no heredan el
   fondo de la sección, lo tapan. */
.band-cap,.ba-tag{background:color-mix(in srgb,var(--tinta) 82%,transparent);color:var(--blanco)}