/* Web pública. Layout: retrato editorial asimétrico — mucho aire, fotos grandes, texto en columnas angostas a un lado */

/* Aviso de modo demo */
.draft{background:var(--earth);font-family:var(--f-label);font-size:var(--s-xs);color:var(--paper);text-align:center;padding:.5rem var(--gutter-r) .5rem var(--gutter)}

/* Cabecera */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--earth)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--earth);font-family:var(--f-display);font-stretch:80%;font-size:1.0625rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.brand em{font-style:normal;font-weight:400;color:var(--ochre)}
.bar-der{display:flex;align-items:center;gap:1.75rem}
nav ul{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
nav a{position:relative;text-decoration:none;font-size:var(--s-sm);color:var(--ink-soft);transition:color .25s}
nav a:hover{color:var(--earth)}

/* Acceso a "Mi selección" en la cabecera */
.b-seleccion{position:relative;display:grid;place-items:center;width:34px;height:34px;border:0;background:none;color:var(--earth);cursor:pointer;padding:0}
.b-seleccion .i-corazon{width:20px;height:20px}
.b-seleccion.con .i-corazon{fill:currentColor}
.sel-n{position:absolute;top:0;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--earth);color:var(--paper);font-size:.625rem;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}

/* Botón de idioma: muestra el idioma al que se cambia */
.idioma{font:inherit;font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.12em;background:none;border:1px solid var(--line);color:var(--earth);border-radius:999px;padding:.3rem .7rem;cursor:pointer;transition:border-color .25s,background .25s}
.idioma:hover{border-color:var(--earth);background:var(--raw)}

/* Botón de menú: dos líneas que se cruzan al abrir */
.menu-btn{display:none;align-items:center;gap:.6rem;background:none;border:0;font:inherit;font-size:var(--s-sm);color:var(--ink);cursor:pointer;padding:.35rem 0}
.menu-icono{position:relative;width:18px;height:10px;flex:none}
.menu-icono i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:top .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.menu-icono i:first-child{top:0}
.menu-icono i:last-child{top:8.5px}
.menu-btn[aria-expanded="true"] .menu-icono i{top:4.25px}
.menu-btn[aria-expanded="true"] .menu-icono i:first-child{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icono i:last-child{transform:rotate(-45deg)}

@media (min-width:761px){
  /* Subrayado fino que se dibuja de izquierda a derecha */
  nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--earth);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
}
.brand span{white-space:nowrap}
@media (max-width:430px){
  /* En celulares chicos el menú queda solo con el ícono, para que el nombre entre en una línea */
  .brand{letter-spacing:.05em;gap:.55rem}
  #menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:760px){
  .bar-der{gap:1rem}
  .menu-btn{display:inline-flex}
  /* El menú baja apenas y aparece con un fundido; los enlaces lo siguen escalonados */
  nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--earth);
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
  nav.abierto{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  nav ul{flex-direction:column;gap:0;padding:.25rem var(--gutter-r) .75rem var(--gutter)}
  nav li{opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
  nav.abierto li{opacity:1;transform:none}
  nav.abierto li:nth-child(2){transition-delay:.04s}
  nav.abierto li:nth-child(3){transition-delay:.08s}
  nav.abierto li:nth-child(4){transition-delay:.12s}
  nav a{display:block;padding:.8rem 0;font-size:var(--s-md);color:var(--ink);border-bottom:1px solid var(--line)}
  nav li:last-child a{border-bottom:0}
}

/* Fotos y marcadores */
.ph{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--ph-a);max-width:100%}
.ph svg{width:62%;height:auto;aspect-ratio:1/1;max-height:82%;overflow:visible}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .tag{position:absolute;left:.75rem;bottom:.6rem;font-family:var(--f-label);font-size:.6875rem;letter-spacing:.08em;color:var(--stone)}
.ph.b{background:var(--ph-b)} .ph.c{background:var(--ph-c)} .ph.d{background:var(--ph-d)}

/* Inicio */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.hero-text{display:flex;flex-direction:column;gap:1.75rem;padding-top:clamp(1rem,4vw,3.5rem);min-width:0}
.hero h1{font-size:var(--s-2xl);font-weight:500;font-stretch:65%;text-transform:uppercase;line-height:.92;letter-spacing:0}
.hero h1 em{display:block;font-style:normal;font-weight:300;color:var(--ochre)}
.hero .lede{font-family:var(--f-body);font-size:var(--s-lg);font-weight:300;line-height:1.45;color:var(--ink-soft);max-width:28ch}
.hero .ph{aspect-ratio:4/5}
.hero .ph svg{width:56%}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero .ph{aspect-ratio:1/1;order:-1}}

/* Formatos con foto de fondo: el nombre sobre blanco y dos botones (Obras y Encargos) */
.portada-foto header,.portada-foto::before{background:color-mix(in srgb,var(--white) 94%,transparent)}
.hero.formato-franja,.hero.formato-caja{display:block;max-width:none;padding:0}
.formato-franja .lede,.formato-caja .lede{display:none}
.formato-franja .hero-text,.formato-caja .hero-text{align-items:center;text-align:center;gap:1.25rem;padding-top:0}
.formato-franja h1,.formato-caja h1{font-size:clamp(2.75rem,7vw,5.5rem)}
.formato-franja h1 em,.formato-caja h1 em{display:inline;margin-left:.25em}
.formato-franja .hero-meta,.formato-caja .hero-meta{justify-content:center;gap:.75rem;margin-top:.5rem}
.formato-franja .hero-meta a,.formato-caja .hero-meta a{font-size:var(--s-sm);letter-spacing:.08em;text-decoration:none;padding:.85rem 1.8rem;border-radius:999px;border:1px solid var(--earth);color:var(--earth);transition:background .2s,color .2s}
.formato-franja .hero-meta a,.formato-caja .hero-meta a{background:rgba(251,248,243,.6)}
.formato-franja .hero-meta a:first-child,.formato-caja .hero-meta a:first-child{background:var(--earth);color:var(--paper)}
@media (hover:hover){.formato-franja .hero-meta a:hover,.formato-caja .hero-meta a:hover{background:var(--earth);color:var(--paper);opacity:.88}}
@media (max-width:430px){.formato-franja .hero-meta a,.formato-caja .hero-meta a{padding:.8rem 1.2rem;letter-spacing:.06em}}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero.formato-franja ~ #obras,.hero.formato-caja ~ #obras{border-top:0}
/* Vidrio esmerilado, estilo iOS: translúcido parejo y lo de atrás desenfocado */
.formato-franja .hero-text,.formato-caja .hero-text{background:rgba(251,248,243,.7);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
/* Franja: el nombre en una banda de vidrio sobre la parte de arriba de la foto */
.hero.formato-franja{position:relative;background:#130D09}
.formato-franja .hero-text{position:absolute;inset:0 0 auto;z-index:1;padding:clamp(1.75rem,4.5vw,2.75rem) var(--gutter-r) clamp(1.75rem,4vw,2.5rem) var(--gutter);border-bottom:1px solid rgba(255,255,255,.45)}
.formato-franja .hero-foto{aspect-ratio:3/2;max-height:calc(100svh - 64px);width:100%}
.formato-franja .hero-foto img{object-position:50% 25%}
@media (max-width:760px){.hero.formato-franja{padding-top:7.5rem}.formato-franja .hero-foto{aspect-ratio:4/3}}
/* Caja: foto ancha con el fondo extendido (piezas a la derecha) y el nombre en un recuadro de vidrio */
.hero-foto .ancha,.hero-foto .vertical{display:none}
.hero.formato-caja{position:relative;min-height:calc(100svh - 64px);background:#130D09;overflow:hidden}
.formato-caja .hero-foto{position:absolute;inset:0}
/* Piezas centradas en vertical (en la foto ocupan de la fila 148 a la 820 de 941, centro en 484): cuando la foto
   sobra de alto, se corre para que ese centro quede a mitad de la portada, sin dejar bordes vacíos */
.formato-caja .hero-foto{container-type:size}
.formato-caja .hero-foto .ancha{display:block;object-position:90% 100%;object-position:90% min(0px,max(calc(100cqh - 56.28cqw),calc(50cqh - 28.95cqw)))}
.formato-caja .hero-foto .original{display:none}
.formato-caja .hero-text{position:relative;z-index:1;display:inline-flex;gap:.9rem;margin:clamp(1rem,3vw,2.5rem) 0 0 clamp(1rem,3vw,2.75rem);padding:clamp(1.5rem,2.5vw,2rem) clamp(1.5rem,2.75vw,2.5rem);border-radius:26px;border:1px solid rgba(255,255,255,.4);box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.formato-caja h1{font-size:clamp(2.25rem,3.6vw,3.25rem)}
/* En el celular: foto vertical (fondo agregado arriba); el recuadro va sobre el fondo y las piezas enteras debajo */
@media (max-width:760px){
  .hero.formato-caja{display:grid;min-height:0}
  .formato-caja .hero-text,.formato-caja .hero-foto{grid-area:1/1}
  .formato-caja .hero-text{display:flex;align-self:start;margin:var(--gutter) var(--gutter-r) 0 var(--gutter);border-radius:22px}
  .formato-caja .hero-foto{position:relative;inset:auto;align-self:end;aspect-ratio:1536/2130;container-type:normal}
  .formato-caja .hero-foto .ancha{display:none}
  .formato-caja .hero-foto .vertical{display:block;object-position:50% 100%}
}

/* Formato B: nombre arriba, tres piezas de distinta altura sobre una línea, como en un estante */
.hero.formato-b{grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,6vw,5rem)}
.formato-b .hero-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"etq etq" "nombre texto" "nombre enlaces";column-gap:clamp(1.5rem,5vw,4rem);row-gap:1rem;align-items:end;padding-top:0}
.formato-b .hero-text > .label{grid-area:etq}
.formato-b h1{grid-area:nombre}
.formato-b .lede{grid-area:texto}
.formato-b .hero-meta{grid-area:enlaces}
/* Carrusel de tres piezas: la del medio adelante; las de los costados un poco más chicas, atrás y atenuadas */
.hero-trio{position:relative;width:100%;max-width:1100px;justify-self:center;--w:min(30vw,340px);--desp:calc(var(--w)*.95)}
.trio-escena{position:relative;height:calc(var(--w)*1.25 + 1.2rem);overflow:hidden;touch-action:pan-y;border-bottom:1px solid var(--earth)}
.trio-item{position:absolute;left:50%;bottom:1rem;width:var(--w);aspect-ratio:4/5;border:0;padding:0;margin:0;transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
.trio-item.ph svg{width:62%}
.trio-item[data-pos="centro"]{transform:translateX(-50%) scale(1);z-index:3;opacity:1;filter:none;box-shadow:0 18px 40px rgba(60,40,25,.18);cursor:zoom-in}
.trio-item[data-pos="izq"]{transform:translateX(calc(-50% - var(--desp))) scale(.86);z-index:2;cursor:pointer}
.trio-item[data-pos="der"]{transform:translateX(calc(-50% + var(--desp))) scale(.86);z-index:2;cursor:pointer}
.trio-item[data-pos="fuera"]{transform:translateX(-50%) scale(.7);z-index:1;opacity:0;pointer-events:none}
/* La atenuación va en la foto y no en la tarjeta: en Safari, atenuar la tarjeta anula el fundido del blanco */
/* Las laterales se atenúan con una capa del color de la página encima: sin transparencias, Safari no dibuja recuadros */
.trio-item::after{content:"";position:absolute;inset:-1px;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .6s ease}
.trio-item[data-pos="izq"]::after,.trio-item[data-pos="der"]::after{opacity:.5}
@media (hover:hover){.trio-item[data-pos="izq"]:hover::after,.trio-item[data-pos="der"]:hover::after{opacity:.25}}
/* Bordes de la escena: se desvanecen hacia el fondo en lugar de cortar en seco */
.trio-escena::before,.trio-escena::after{content:"";position:absolute;top:0;bottom:0;width:min(12%,90px);z-index:3;pointer-events:none}
.trio-escena::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.trio-escena::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.trio-nav{position:absolute;top:calc(50% - .6rem);transform:translateY(-50%);z-index:4;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--earth);font-size:1.7rem;line-height:1;cursor:pointer;transition:background .25s,opacity .25s}
.trio-nav:hover{background:var(--paper)}
.trio-nav span{margin-top:-3px}
.trio-nav.ant{left:0}.trio-nav.sig{right:0}
@media (max-width:820px){.trio-escena::before,.trio-escena::after{width:18px}.hero-trio{--w:52vw;--desp:calc(var(--w)*.74);justify-self:stretch;max-width:none;width:auto;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter-r))}.trio-nav.ant{left:var(--gutter)}.trio-nav.sig{right:var(--gutter-r)}.hero-trio .trio-item{aspect-ratio:4/5;order:0}.trio-nav{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.trio-item{transition:none}}
@media (max-width:820px){
  .formato-b .hero-text{grid-template-columns:1fr;grid-template-areas:"etq" "nombre" "texto" "enlaces"}
}

/* Formato D: solo tipografía, centrada; la obra empieza enseguida */
.hero.formato-d{grid-template-columns:1fr;justify-items:center;text-align:center;padding-block:clamp(3.5rem,10vw,7rem) clamp(2.5rem,6vw,4.5rem)}
.formato-d .hero-text{align-items:center;padding-top:0;gap:1.5rem}
.formato-d h1{font-size:clamp(4rem,14vw,10rem)}
/* Sin foto en la portada, las obras suben para verse cuanto antes */
.hero.formato-d ~ #obras{border-top:0;padding-top:clamp(1rem,3vw,2rem)}
.hero.formato-d ~ #obras .sec-head{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.formato-d .lede{max-width:34ch;margin-inline:auto}
.formato-d .hero-meta{justify-content:center}
.formato-d .hero-text::after{content:"";width:1px;height:clamp(2.5rem,6vw,4rem);background:var(--earth);margin-top:.5rem}

/* Secciones */
section{scroll-margin-top:5rem}
.sec{padding-block:clamp(4rem,9vw,7.5rem);border-top:1px solid var(--earth)}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-size:var(--s-xl)}
.sec-head p{max-width:58ch;color:var(--ink-soft)}

/* Obras: una fila por colección que se desliza de costado (con flechas en la compu); "Ver toda la colección" la abre en grilla */
.gallery{display:flex;flex-direction:column;gap:clamp(3rem,6vw,4.5rem)}
.col-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tit flechas" "txt flechas";column-gap:2rem;row-gap:.5rem;align-items:end;margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.col-tit{grid-area:tit;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.col-tit h3{font-size:clamp(1.625rem,3vw,2.125rem)}
.col-n{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--earth-soft)}
.col-txt{grid-area:txt;max-width:62ch;font-family:var(--f-display);font-stretch:85%;font-weight:300;font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.45;color:var(--earth);white-space:pre-line}
.fila-flechas{grid-area:flechas;display:none;gap:.5rem}
.coleccion.desborda .fila-flechas{display:flex}
.coleccion.abierta .fila-flechas{display:none}
.fila-nav{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--earth);border-radius:50%;background:none;color:var(--earth);font-size:1.5rem;line-height:1;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.fila-nav span{margin-top:-.15em}
.fila-nav:hover:not(:disabled){background:var(--earth);color:var(--paper)}
.fila-nav:disabled{opacity:.3;cursor:default}
.fila{--ancho:calc((100% - 3 * var(--sep)) / 4.3);--sep:clamp(1rem,2vw,1.75rem);display:flex;gap:var(--sep);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:.25rem}
.fila::-webkit-scrollbar{display:none}
.fila .work{flex:0 0 var(--ancho);scroll-snap-align:start}
.coleccion.abierta .fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(1.5rem,3vw,2.5rem);overflow:visible}
.col-todas{margin-top:1.5rem;font:inherit;font-size:var(--s-sm);letter-spacing:.04em;background:none;border:0;border-bottom:1px solid currentColor;padding:.2rem 0;color:var(--earth);cursor:pointer}
.col-todas:hover{color:var(--ink)}
/* En el celular la fila va de borde a borde y asoma la pieza siguiente; sin flechas (se desliza con el dedo) */
@media (max-width:760px){
  .col-cab{grid-template-columns:1fr;grid-template-areas:"tit" "txt"}
  .coleccion.desborda .fila-flechas{display:none}
  .fila{--ancho:calc((100% - var(--sep)) / 1.75);margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding-inline:var(--gutter) var(--gutter-r);scroll-padding-inline:var(--gutter) var(--gutter-r)}
  .coleccion.abierta .fila{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:0;padding-inline:0}
}
.work{position:relative;min-width:0}
.work-abrir{display:flex;flex-direction:column;gap:.9rem;width:100%;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:zoom-in}

/* Corazón de "Mi selección" */
.corazon{position:absolute;top:.6rem;right:.6rem;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--earth);cursor:pointer;transition:background .25s,transform .25s}
.corazon:hover{background:var(--paper)}
.corazon svg,.i-corazon{width:18px;height:18px;fill:transparent;stroke:currentColor;stroke-width:1.6;transition:fill .25s}
.corazon[aria-pressed="true"] svg,.lb-guardar[aria-pressed="true"] svg{fill:currentColor}
.latido{animation:latido .45s cubic-bezier(.2,.7,.2,1)}
@keyframes latido{40%{transform:scale(1.18)}}
.work .ph{aspect-ratio:4/5;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work:hover .ph{transform:scale(.985)}
.work .cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.work h3{font-size:1.25rem}
.work .yr{font-family:var(--f-label);font-size:var(--s-xs);color:var(--stone);font-variant-numeric:tabular-nums}
.work .mat{font-size:var(--s-sm);color:var(--ink-soft);margin-top:-.5rem}
.work .estado{position:absolute;top:.75rem;left:.75rem;font-size:.6875rem;letter-spacing:.06em;padding:.3rem .6rem;border-radius:999px;background:var(--paper);color:var(--earth)}
.gallery .vacio{grid-column:1/-1;color:var(--ink-soft);text-align:center;padding-block:3rem}

/* Detalle de obra */
dialog{border:0;padding:0;background:var(--paper);color:var(--ink);max-width:min(1040px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px)}
dialog::backdrop{background:rgba(20,16,12,.55)}
/* Apertura del detalle: fundido corto y un leve acercamiento */
dialog[open]{animation:aparecer .3s cubic-bezier(.2,.7,.2,1)}
dialog[open]::backdrop{animation:fundido .3s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes fundido{from{opacity:0}}
.lb{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.lb-media{display:flex;flex-direction:column;min-width:0;background:var(--ph-a)}
.lb .ph{aspect-ratio:4/5}
.lb-foto{position:relative;touch-action:pan-y}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--paper) 85%,transparent);color:var(--earth);font-size:1.6rem;line-height:1;cursor:pointer;opacity:.85;transition:opacity .25s,background .25s}
.lb-nav:hover{opacity:1;background:var(--paper)}
.lb-nav span{margin-top:-3px}
.lb-nav.ant{left:.6rem}.lb-nav.sig{right:.6rem}
.lb-puntos{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:6px;pointer-events:none}
.lb-puntos i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--paper) 70%,transparent);transition:background .25s}
.lb-puntos i.si{background:var(--earth)}
.lb-arriba{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lb-pos{font-family:var(--f-label);font-size:var(--s-xs);color:var(--stone);font-variant-numeric:tabular-nums}
.lb.cambio .lb-foto .ph,.lb.cambio .lb-info{animation:cambio .35s ease}
@keyframes cambio{from{opacity:.25}}
@media (hover:hover){.lb-puntos{display:none}}
.lb-thumbs{display:flex;gap:6px;padding:6px;overflow-x:auto}
.lb-thumbs button{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;background:var(--ph-b);cursor:pointer}
.lb-thumbs button[aria-current="true"]{border-color:var(--earth)}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-info{padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1.25rem;min-width:0;overflow-y:auto}
.lb-info h3{font-size:var(--s-xl)}
.lb-desc{color:var(--ink-soft);white-space:pre-line}
.lb-info dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;margin:0;font-size:var(--s-sm)}
.lb-info dt{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-top:.15rem}
.lb-info dd{margin:0}
.lb-acc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.5rem}
.lb-acc button{font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.6rem 1.2rem;cursor:pointer}
.lb-consultar{background:var(--earth);color:var(--paper);border:1px solid var(--earth)}
.lb-close{background:none;border:1px solid var(--line);color:var(--ink)}
.lb-wa{font-size:var(--s-sm);border-radius:999px;padding:.6rem 1.2rem;border:1px solid var(--earth);color:var(--earth);text-decoration:none}
.lb-wa:hover{background:var(--raw)}
.lb-acc .lb-close{margin-left:auto}
.lb-guardar{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.6rem 1.1rem;cursor:pointer;background:none;border:1px solid var(--earth);color:var(--earth)}
.lb-guardar:hover{background:var(--raw)}

/* Cajón lateral de "Mi selección" */
.cajon{margin:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh}
.cajon[open]{animation:deslizar .35s cubic-bezier(.2,.7,.2,1)}
@keyframes deslizar{from{transform:translateX(24px);opacity:0}}
.cajon-in{display:flex;flex-direction:column;gap:1.25rem;padding:calc(1.5rem + env(safe-area-inset-top,0px)) max(1.5rem,env(safe-area-inset-right,0px)) calc(1.5rem + env(safe-area-inset-bottom,0px)) 1.5rem}
.cajon-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cajon-head h2{font-size:2rem}
.sel-vacia{color:var(--ink-soft);font-size:var(--s-sm)}
.sel-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sel-lista li{display:flex;align-items:center;gap:.75rem;padding-block:.75rem;border-bottom:1px solid var(--line)}
.sel-lista li:first-child{border-top:1px solid var(--line)}
.sel-ver{display:flex;align-items:center;gap:.9rem;flex:1;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sel-foto{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--ph-b);overflow:hidden}
.sel-foto img{width:100%;height:100%;object-fit:cover}
.sel-foto svg{width:70%;height:70%}
.sel-txt{display:flex;flex-direction:column;min-width:0}
.sel-txt strong{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:1.25rem;color:var(--earth);line-height:1.2}
.sel-txt small{font-size:var(--s-xs);color:var(--ink-soft)}
.sel-quitar{font:inherit;font-size:var(--s-xs);background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:.25rem}
.sel-consultar{align-self:flex-start;font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.7rem 1.3rem;cursor:pointer}

/* Cuenta del cliente */
.cuenta{border-top:1px solid var(--earth);padding-top:1.25rem;margin-top:.5rem}
.cuenta > div{display:flex;flex-direction:column;gap:1rem}
.cuenta-txt{font-size:var(--s-sm);color:var(--ink-soft)}
.b-google{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-size:var(--s-sm);background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.7rem 1.2rem;cursor:pointer}
.cu-form{display:flex;flex-direction:column;gap:.9rem}
.cu-form .lb-consultar{align-self:flex-start;font:inherit;font-size:var(--s-sm);border-radius:999px;padding:.7rem 1.3rem;cursor:pointer}
.cu-msg{font-size:var(--s-sm);color:var(--earth)}
.cu-msg:empty{display:none}
.cu-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.cu-link{font:inherit;font-size:var(--s-sm);background:none;border:0;padding:0;color:var(--earth);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start}
.cu-legal{font-size:var(--s-xs);color:var(--stone)}
.mi-cuenta h3{font-size:1.5rem}
.mc-perfil{display:flex;align-items:center;gap:.85rem}
.mc-avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--earth);color:var(--paper);font-family:var(--f-display);font-size:1.4rem}
.mc-avatar img{width:100%;height:100%;object-fit:cover}
.mc-datos{display:flex;flex-direction:column;min-width:0}
.mc-datos strong{font-weight:500}
.mc-datos small{font-size:var(--s-sm);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.mc-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;margin:0;font-size:var(--s-sm)}
.mc-dl dt{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding-top:.15rem}
.mc-dl dd{margin:0;font-variant-numeric:tabular-nums}
.mc-acc{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.mc-borrar{color:var(--danger)}
.mc-confirmar{display:flex;flex-direction:column;gap:.75rem;background:var(--raw);padding:1rem;border-radius:4px}
.mc-confirmar p{font-size:var(--s-sm)}
.mc-si{font:inherit;font-size:var(--s-sm);background:var(--danger);color:#fff;border:0;border-radius:999px;padding:.55rem 1.1rem;cursor:pointer}
.mini{width:min(420px,calc(100vw - 32px))}
.mini h2{font-size:1.75rem}

/* Pieza elegida en el formulario */
.f-pieza{gap:.5rem}
.f-pieza-fila{display:flex;align-items:center;gap:.9rem;background:var(--paper);border:1px solid var(--earth);padding:.6rem .75rem;min-width:0}
.f-pieza-fila img{width:48px;height:48px;object-fit:cover;flex:none}
.f-pieza-fila strong{font-weight:500;color:var(--earth);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-pieza-quitar{font:inherit;font-size:var(--s-sm);background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:.25rem}
@media (max-width:700px){.lb{grid-template-columns:1fr}.lb .ph{aspect-ratio:1/1}}

/* Sobre mí */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.about .ph{aspect-ratio:3/4}
.about-text{display:flex;flex-direction:column;gap:1.4rem;max-width:62ch;min-width:0}
.about-text h2{font-size:var(--s-xl)}
.about-text .quote{font-family:var(--f-display);font-stretch:80%;font-weight:300;font-size:clamp(1.5rem,3vw,2rem);line-height:1.3;color:var(--earth)}
.about-text p{color:var(--ink-soft)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--earth)}
.facts div{display:flex;flex-direction:column;gap:.3rem}
.facts strong{font-weight:500;font-size:var(--s-sm)}
/* Respeta los renglones que Verónica escribe en el panel (por ejemplo, título, "Ceramista" y "Docente" uno abajo del otro) */
.facts span{font-size:var(--s-sm);color:var(--ink-soft);white-space:pre-line}
.retrato{margin:0}
/* El retrato es de cuerpo entero: en el celular se recorta un poco desde abajo para mantener la cara y la vasija */
.retrato img{object-position:50% 20%}
@media (max-width:820px){.about{grid-template-columns:1fr}.about .ph{aspect-ratio:4/3}.about .retrato{aspect-ratio:4/5}}

/* Proceso */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:.75rem;padding-top:1.25rem;border-top:2px solid var(--earth);counter-increment:s;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-label);font-size:var(--s-xs);color:var(--earth-soft)}
.steps h3{font-size:1.375rem}
.steps p{font-size:var(--s-sm);color:var(--ink-soft)}
.steps .temp{font-family:var(--f-label);font-size:var(--s-xs);color:var(--earth)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* En el celular los pasos van en una fila que se desliza de costado, como las colecciones; asoma el siguiente */
@media (max-width:560px){
  .steps{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding-inline:var(--gutter) var(--gutter-r);scroll-padding-inline:var(--gutter) var(--gutter-r)}
  .steps::-webkit-scrollbar{display:none}
  .steps li{flex:0 0 78%;scroll-snap-align:start}
}
.process-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(3rem,6vw,5rem)}
.process-band .ph{aspect-ratio:16/10}
.process-band .ph:last-child{aspect-ratio:auto}
@media (max-width:700px){.process-band{grid-template-columns:1fr}.process-band .ph:last-child{aspect-ratio:4/3}}

/* Encargos y contacto */
.contact{background:var(--raw)}
.contact .sec{border-top:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem)}
.kinds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kinds li{padding-block:1.1rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem}
.kinds li:first-child{border-top:1px solid var(--line)}
.kinds strong{font-family:var(--f-display);font-stretch:75%;font-weight:500;font-size:1.375rem;color:var(--earth)}
.kinds span{font-size:var(--s-sm);color:var(--ink-soft)}
/* Contacto directo: una fila por vía (email, teléfono, WhatsApp, Instagram), cada una es un enlace que abre la app */
.direct{margin-top:2.25rem;display:flex;flex-direction:column}
.direct .label{margin-bottom:.6rem}
.via{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,1fr);align-items:center;gap:.9rem;padding:.75rem 2rem .75rem 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:var(--s-sm)}
.via:last-child{border-bottom:1px solid var(--line)}
.via svg{width:2.5rem;height:2.5rem;padding:.55rem;border-radius:50%;background:var(--paper);fill:none;stroke:var(--earth);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;transition:background .2s,stroke .2s}
.via svg .relleno{fill:var(--earth);stroke:none;transition:fill .2s}
.via > span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.via small{font-family:var(--f-label);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--earth-soft)}
.via::after{content:"→";position:absolute;right:.25rem;top:50%;translate:0 -50%;color:var(--earth-soft);transition:translate .2s,color .2s}
@media (hover:hover){.via:hover svg{background:var(--earth);stroke:var(--paper)}.via:hover svg .relleno{fill:var(--paper)}.via:hover::after{translate:.25rem -50%;color:var(--earth)}}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-content:start}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-label);font-size:var(--s-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
input,select,textarea{font:inherit;font-size:var(--s-md);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.75rem .9rem;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--earth)}
textarea{min-height:9rem;resize:vertical}
.send{grid-column:1/-1;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.send button{font:inherit;font-size:var(--s-sm);font-weight:500;letter-spacing:.04em;background:var(--earth);color:var(--paper);border:0;padding:.9rem 2rem;border-radius:999px;cursor:pointer;transition:opacity .2s}
.send button:hover{opacity:.85}
.send button:disabled{opacity:.5;cursor:default}
.send .msg{font-size:var(--s-sm);color:var(--earth)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:480px){form{grid-template-columns:1fr}}

footer{padding-block:2.5rem;background:var(--earth)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--s-sm);color:var(--raw)}
.foot-brand{display:inline-flex;align-items:center;gap:.9rem}
footer .logo{width:36px;height:32px;color:var(--raw)}
.foot-links{display:flex;gap:1.5rem}
.foot-links a{text-decoration:none;opacity:.85}
.foot-links a:hover{opacity:1}

/* Fotos de piezas con fondo blanco: el blanco se funde con el arena de la página (multiplicar),
   así la pieza queda apoyada sobre la web con su sombra. La foto se muestra entera, sin recortes. */
.ph:has(> img),.ph.b:has(> img),.ph.c:has(> img),.ph.d:has(> img){background:var(--paper)}
.ph > img,.lb-thumbs img,.sel-foto img,.f-pieza-fila img{mix-blend-mode:multiply}
.work .ph > img,.lb .ph > img,.trio-item > img{object-fit:contain}
.lb-thumbs button,.sel-foto,.f-pieza-fila img{background:var(--paper)}
.trio-item[data-pos="centro"]:has(> img){box-shadow:none}
/* El retrato de "Sobre mí" no es una foto de pieza: se ve tal cual */
.retrato > img{mix-blend-mode:normal;object-fit:cover}
.ph.retrato:has(> img){background:var(--ph-c)}
/* Fotos con el fondo ya quitado al subirlas (transparentes): se muestran tal cual, con sus brillos y colores reales */
img[src*="sinfondo"]{mix-blend-mode:normal!important}
/* En el carrusel todas las piezas tienen el mismo fondo que la página (sin filtros), así nunca se ve un recuadro */
.trio-item.ph,.trio-item.ph.b,.trio-item.ph.c,.trio-item.ph.d{background:var(--paper)}

/* Cerrar el detalle: una X arriba a la derecha */
#lb{overflow:auto}
.lb-x-zona{position:sticky;top:0;height:0;z-index:6}
.lb-x{position:absolute;top:.75rem;right:.75rem;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;
  background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--earth);cursor:pointer;transition:background .25s,transform .25s}
@media (hover:hover) and (pointer:fine){.lb-x:hover{background:var(--raw);transform:rotate(90deg)}}
.lb-x{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lb-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lb-arriba{padding-right:3.25rem}
@media (max-width:700px){.lb-arriba{padding-right:0}}
/* La misma X en "Mi selección": va en el encabezado, que queda fijo arriba al desplazar la lista */
.lb-x.en-linea{position:static;flex:none;margin-right:-.4rem}
.cajon{overflow:auto}
.cajon-head{position:sticky;top:0;z-index:2;background:var(--paper);margin-block:-.5rem 0;padding-block:.5rem}
/* Fotos ya sin fondo: la pieza va sin tarjeta, así la del centro no tapa con su recuadro a las de los costados
   (las piezas se superponen; la del centro queda por delante) */
.trio-item.ph:has(> img[src*="sinfondo"]){background:transparent}

/* Variantes de la caja: "sobre" (la elegida, sin recuadro) y "vidrio" (?portada=vidrio): letras y botones claros para el fondo oscuro */
.caja-sobre .hero-text,.caja-vidrio .hero-text{color:var(--paper)}
.caja-sobre .hero-text > .label,.caja-vidrio .hero-text > .label{color:#D9C8B0}
.caja-sobre h1,.caja-vidrio h1{color:#EDE3D3}
.caja-sobre h1 em,.caja-vidrio h1 em{color:#D7B489}
.formato-caja.caja-sobre .hero-meta a,.formato-caja.caja-vidrio .hero-meta a{background:transparent;border-color:rgba(237,227,211,.85);color:#EDE3D3}
.formato-caja.caja-sobre .hero-meta a:first-child,.formato-caja.caja-vidrio .hero-meta a:first-child{background:#EDE3D3;border-color:#EDE3D3;color:var(--earth)}
@media (hover:hover){.formato-caja.caja-sobre .hero-meta a:hover,.formato-caja.caja-vidrio .hero-meta a:hover{background:#EDE3D3;color:var(--earth);opacity:1}}
/* 1: sin recuadro, directo sobre la foto; una sombra muy suave para que se lea */
.formato-caja.caja-sobre .hero-text{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.formato-caja.caja-sobre .hero-meta a{text-shadow:none}
/* 2: el mismo recuadro de vidrio, mucho más transparente (vidrio oscuro, como los paneles de iOS sobre fotos) */
.formato-caja.caja-vidrio .hero-text{background:rgba(251,248,243,.12);border-color:rgba(255,255,255,.22);box-shadow:0 18px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
/* 1: letras un poco más grandes y "Encargos" con vidrio esmerilado transparente */
.formato-caja.caja-sobre .hero-text > .label{font-size:.8125rem}
.formato-caja.caja-sobre h1{font-size:clamp(2.5rem,4.1vw,3.75rem)}
.formato-caja.caja-sobre .hero-meta a{font-size:.8125rem;padding:.7rem 1.45rem}
.formato-caja.caja-sobre .hero-meta a:last-child{background:rgba(251,248,243,.14);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-color:rgba(237,227,211,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@media (max-width:430px){.formato-caja.caja-sobre h1{font-size:min(2.35rem,9.6vw)}.formato-caja.caja-sobre .hero-meta a{font-size:.75rem;padding:.65rem 1.1rem}}
/* Foto de portada: oculta hasta saber cuál va (la de fábrica o la subida en el panel). Una foto subida no tiene las
   piezas en un lugar conocido: se centra un poco hacia la derecha, donde no va el texto */
.hero-foto img{transition:opacity .4s}
.hero-foto.cargando img{opacity:0}
.formato-caja .hero-foto.propia .ancha{object-position:75% 50%}
/* Aviso de privacidad debajo del formulario de consultas */
.f-legal{grid-column:1/-1;font-size:var(--s-xs);color:var(--stone)}
.f-legal a{color:inherit}

/* Botón fijo de WhatsApp: siempre a mano, salvo en Encargos y el pie (ahí ya está el contacto); sobre la portada va en crema */
.wa-flotante{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:8;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--earth);color:var(--paper);box-shadow:0 6px 20px rgba(51,39,31,.28);transition:opacity .3s,transform .3s,background .3s,color .3s}
.wa-flotante.oculto-wa{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
.wa-flotante.sobre-foto{background:#EDE3D3;color:var(--earth);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.wa-flotante svg{width:28px;height:28px}
@media (hover:hover){.wa-flotante:hover{background:var(--ink);color:var(--paper)}}

/* Proceso: números grandes en ocre y temperaturas destacadas (950 °C naranja, 1200 °C rojo) */
#proceso .steps{row-gap:clamp(2.5rem,5vw,4rem)}
#proceso .steps li{border-top:1px solid var(--line);padding-top:1.5rem;gap:.6rem}
#proceso .steps li::before{font-family:var(--f-display);font-stretch:70%;font-weight:300;font-size:clamp(3rem,5.5vw,4.5rem);line-height:.9;letter-spacing:0;color:var(--ochre)}
#proceso .steps .temp{align-self:flex-start;margin-top:.25rem;padding:.3rem .8rem;border:1px solid color-mix(in srgb,var(--ochre) 70%,transparent);border-radius:999px;color:var(--ochre);letter-spacing:.06em}
#proceso .steps li:nth-child(5) .temp{border-color:#D27A3C;color:#B8601F;background:color-mix(in srgb,#E08A4F 10%,transparent)}
#proceso .steps li:last-child .temp{border-color:#A8392A;color:#962E22;background:color-mix(in srgb,#B23A28 10%,transparent)}

/* Proceso: foto de Verónica amasando al lado del título. Tiene fondo blanco: con "multiply" el blanco toma el color
   arena de la página, y los costados de la mesa se esfuman para que no se vea el corte de la foto */
.proceso-cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,4rem);align-items:start;margin-bottom:clamp(2.5rem,5vw,4rem)}
.proceso-cab .sec-head{margin-bottom:0;padding-top:clamp(1rem,4vw,3.5rem)}
.proceso-foto{margin:0}
.proceso-foto img{width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
@media (max-width:760px){.proceso-cab{grid-template-columns:1fr;gap:1.5rem}.proceso-cab .sec-head{padding-top:0}}
/* Las fotos de manos y horno todavía no están: los recuadros pendientes no se muestran */
#proceso .process-band{display:none}

/* Proceso en la compu: una sola composición. La foto a la izquierda (alta, queda fija mientras se leen los pasos) y a la
   derecha el título, el texto y los seis pasos en dos columnas, todo en un mismo bloque */
@media (min-width:900px){
  #proceso .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"foto cab" "foto pasos";column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  #proceso .proceso-cab{display:contents}
  #proceso .proceso-cab .sec-head{grid-area:cab;padding-top:0;margin-bottom:clamp(2rem,4vw,3rem)}
  /* Lo fijo es la imagen y no su contenedor: un contenedor fijo aísla la imagen y el "multiply" deja de fundir el blanco */
  #proceso .proceso-foto{grid-area:foto;align-self:stretch}
  #proceso .proceso-foto img{position:sticky;top:6rem;aspect-ratio:4/5;object-fit:cover;object-position:44% 50%}
  #proceso .steps{grid-area:pasos;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:clamp(2rem,3.5vw,3rem)}
  #proceso .steps li::before{font-size:clamp(2.5rem,4vw,3.5rem)}
}

/* Sobre mí: la última frase ("No busco la producción seriada…") cierra el texto con el mismo peso que la frase de arriba */
.about-text .cierre{font-family:var(--f-display);font-stretch:80%;font-weight:300;font-size:clamp(1.25rem,2.4vw,1.625rem);line-height:1.35;color:var(--earth);padding-left:1.25rem;border-left:2px solid var(--ochre);margin-block:.5rem}
/* Enlace al Instagram de Taller Zona, debajo del dato de Docencia (aparte del texto, que se edita en el panel) */
.facts-link{font-size:var(--s-sm);color:var(--earth);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--earth) 35%,transparent);align-self:flex-start}
.facts-link:hover{border-bottom-color:var(--earth)}

/* Obras: botones con las colecciones para bajar directo a cada una (en el celular se deslizan de costado) */
.col-saltos{display:flex;flex-wrap:wrap;gap:.5rem;margin:-1rem 0 clamp(2rem,4vw,3rem)}
.col-saltos button{font:inherit;font-size:var(--s-sm);background:none;border:1px solid var(--line);color:var(--ink-soft);padding:.5rem 1.05rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
@media (hover:hover){.col-saltos button:hover{color:var(--paper);background:var(--earth);border-color:var(--earth)}}
.coleccion{scroll-margin-top:5.5rem}
@media (max-width:760px){.col-saltos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding-inline:var(--gutter) var(--gutter-r)}.col-saltos::-webkit-scrollbar{display:none}}

/* Encargos: cada tipo es un botón que lo elige en el formulario; el elegido lleva una barra ocre */
.kinds li{padding:0}
.kind{position:relative;display:flex;flex-direction:column;gap:.25rem;padding:1.1rem 2.5rem 1.1rem .9rem;margin-left:-.9rem;width:calc(100% + .9rem);font:inherit;text-align:left;background:none;border:0;border-radius:6px;cursor:pointer;color:inherit;transition:background .2s}
.kind::after{content:"→";position:absolute;right:.75rem;top:50%;translate:0 -50%;color:var(--earth-soft);transition:translate .2s,color .2s}
.kind::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:3px;border-radius:3px;background:var(--ochre);opacity:0;transition:opacity .2s}
.kind[aria-pressed="true"]::before{opacity:1}
.kind[aria-pressed="true"]::after{color:var(--earth)}
@media (hover:hover){.kind:hover{background:color-mix(in srgb,var(--paper) 70%,transparent)}.kind:hover::after{translate:.25rem -50%;color:var(--earth)}}