/* Miguel Ángel Feba · la UI calla y la obra pone el color (fichas de museo, un solo rojo) */
:root {
  --feba: #EE202D;
  --feba-deep: #B5121C;
  --ink: #0E0E0E;
  --paper: #FFFFFF;
  --mute: #5E5E5E;
  --rule: #0E0E0E;
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: 40px;
  --card: 400px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  /* sin WebGL queda el rojo de la marca */
  background: radial-gradient(120% 90% at 70% 30%, #F2353F 0%, var(--feba) 45%, var(--feba-deep) 100%) fixed;
  overflow-x: clip;
}
::selection { background: var(--feba); color: #fff; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: pan-y; opacity: 0; transition: opacity .8s ease; }
.is-ready #scene { opacity: 1; }
.walkers { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; transition: opacity .3s linear; }
.walker { position: absolute; left: 0; top: 0; width: 30px; height: auto; margin: -21px 0 0 -15px; will-change: transform; filter: drop-shadow(1px 2px 1.5px rgb(30 15 8 / .35)); }
@media (max-width: 720px) { .walker { width: 22px; margin: -16px 0 0 -11px; } }
.walker--game { pointer-events: auto; cursor: url(assets/cursor-hormiga-roja.svg) 11 9, pointer; }
.walker--game.is-caught { filter: drop-shadow(1px 2px 1.5px rgb(30 15 8 / .35)) drop-shadow(0 0 0 #EE202D); animation: ant-caught 1.2s ease-out; }
@keyframes ant-caught { 0% { filter: drop-shadow(0 0 0 #EE202D); } 30% { filter: drop-shadow(0 0 10px #EE202D) drop-shadow(0 0 3px #EE202D); } 100% { filter: drop-shadow(1px 2px 1.5px rgb(30 15 8 / .35)); } }
/* el cursor es una hormiga (pedido de Carlos); roja sobre lo que se puede tocar */
html, body { cursor: url(assets/cursor-hormiga.svg) 11 9, auto; }
a, button, [role="button"], label, summary, video, .has-ant-hover #scene { cursor: url(assets/cursor-hormiga-roja.svg) 11 9, pointer; }
input, textarea { cursor: text; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 14px; border: 1px solid var(--rule); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--paper); }

/* ---------- navegación ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.logo {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 200px; height: 78px; padding: 16px 22px;
  flex-shrink: 0;
  color: #fff; text-decoration: none; isolation: isolate;
  transform: rotate(3deg); filter: drop-shadow(1px 2px 1.5px rgb(0 0 0 / .3)) drop-shadow(3px 9px 10px rgb(0 0 0 / .28));
  animation: stamp-in .65s cubic-bezier(.2,.7,.3,1) both;
}
.logo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--feba); border: 1px solid rgb(255 255 255 / .8); border-radius: 8px;
  transform: perspective(180px) rotateX(15deg);
}
.logo__mark {
  display: block; flex: 1; min-width: 0; height: 40px; background: #fff;
  -webkit-mask: url(assets/feba.svg) center / contain no-repeat;
  mask: url(assets/feba.svg) center / contain no-repeat;
}
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-3deg) scale(1.08); }
  55% { opacity: 1; transform: rotate(4deg) scale(.98); }
  78% { transform: rotate(2deg) scale(1.01); }
  100% { transform: rotate(3deg) scale(1); }
}

.nav__end { display: flex; align-items: center; gap: 8px; position: relative; }
.nav__end button, .nav__cta {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  background: transparent; border: 0; border-radius: 0;
  min-width: 40px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
/* El alfa del mismo papel de las tarjetas dibuja también estos recortes. */
.nav__end button, .nav__cta, .fin__links a {
  position: relative; isolation: isolate;
  --paper-turn: -1deg; --paper-flip: 1;
  transform: rotate(var(--paper-turn));
  filter: drop-shadow(1px 2px 1px rgb(35 24 15 / .25));
  transition: transform .18s ease, filter .18s ease;
}
.nav__end button::before, .nav__cta::before, .fin__links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/papel-roto.webp") center / 100% 100% no-repeat;
  transform: scaleX(var(--paper-flip)) rotate(var(--paper-edge, 0deg));
}
.nav__cta { --paper-turn: 1.5deg; --paper-flip: -1; font-weight: 700; }
.lang { display: flex; gap: 3px; }
.lang button:first-child { --paper-turn: 2deg; --paper-edge: 180deg; }
.lang button:last-child { --paper-turn: -2deg; --paper-flip: -1; }
.lang button[aria-pressed="true"] {
  color: var(--feba-deep); font-weight: 800;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.nav__end button:hover, .nav__cta:hover, .fin__links a:hover,
.nav__end button:focus-visible, .nav__cta:focus-visible, .fin__links a:focus-visible {
  transform: translateY(-2px) rotate(0deg);
  filter: drop-shadow(1px 4px 2px rgb(35 24 15 / .3));
}
.nav__end button:focus-visible, .nav__cta:focus-visible { z-index: 1; }


/* detalle vivo: la hormiga del contador mueve las antenas de vez en cuando */
.ant-antennae { transform-origin: 12px 4px; animation: feel 7s ease-in-out infinite; }
@keyframes feel { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-9deg); } 94% { transform: rotate(7deg); } 97% { transform: rotate(-4deg); } }

.toast {
  position: fixed; left: 50%; top: 84px; z-index: 30; margin: 0;
  transform: translate(-50%, -8px); opacity: 0; transition: opacity .3s, transform .3s;
  background: var(--ink); color: var(--paper); padding: 10px 16px; font-size: 14px; pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- portada ---------- */
main { position: relative; z-index: 5; pointer-events: none; }
.card, .fin a, .fin__in { pointer-events: auto; }
.hero { position: relative; height: 100vh; height: 100svh; padding: 0 var(--gutter); }
.hero__card { position: absolute; left: var(--gutter); bottom: 40px; }
.card {
  width: var(--card); max-width: calc(100% - 2 * var(--gutter));
  background: url("assets/papel-roto.webp") center / 100% 100% no-repeat;
  border: 0;
  filter: drop-shadow(2px 5px 5px rgb(35 24 15 / .18));
  padding: 30px 32px 28px;
}
.card > * { margin: 0; }
.card > * + * { margin-top: 12px; }
.card__title { font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }
.card__lede { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.card > .card__go { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #DADADA; font-size: 13px; font-weight: 600; text-align: center; }
.card__line { width: 1px; height: 22px; background: var(--ink); transform-origin: top; animation: line 2.4s ease-in-out infinite; }
@keyframes line { 0% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- el viaje: solo da el largo del scroll; todo pasa en la escena ---------- */
.viaje { height: calc(var(--obras, 8) * 125vh); }

/* la obra en pantalla: una etiqueta roja, como el bloque del logo */
.obra {
  position: fixed; left: var(--gutter); bottom: 28px; z-index: 10; margin: 0;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; max-width: calc(100vw - 2 * var(--gutter));
  background: var(--feba); color: #fff; padding: 9px 14px; font-size: 13px; line-height: 1.3;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.obra b { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.obra.is-on { opacity: 1; transform: none; }

/* ---------- final: todo en el rojo de la marca ---------- */
.fin { position: relative; min-height: 100vh; padding: 140px var(--gutter) 28px; color: #fff; display: flex; background: linear-gradient(180deg, rgba(48, 4, 8, .9) 0, rgba(110, 6, 14, .8) 160px, rgba(110, 6, 14, .82) 100%); }
.fin__in { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 1180px; }
.fin__in > * { margin: 0; }
.fin__kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.9; }
.fin__name { font-size: clamp(52px, 10vw, 156px); line-height: 0.9; font-weight: 800; letter-spacing: -0.045em; }
.fin__tech { font-size: clamp(18px, 2vw, 24px); line-height: 1.3; max-width: 30em; letter-spacing: -0.01em; }
.fin__cv { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 2px solid #fff; }
.fin__cv li { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px 0; border-bottom: 1px solid rgba(255,255,255,.45); font-size: 14px; line-height: 1.35; }
.fin__cv b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fin__cv i { font-style: normal; font-weight: 700; }
.fin__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.fin__links a { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; background: transparent; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; border: 0; }
.fin__links li:nth-child(2) a { --paper-turn: 1.2deg; --paper-flip: -1; }
.fin__links li:nth-child(3) a { --paper-turn: -.6deg; --paper-edge: 180deg; }
.fin__links a:hover { color: var(--feba-deep); }
.fin__links a:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--ink); }
.fin__foot { margin-top: auto !important; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; opacity: .85; padding-top: 40px; }
.nw { white-space: nowrap; }

/* ---------- móvil ---------- */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 14.5px; }
  .nav { padding: 12px var(--gutter); }
  .logo { width: 150px; height: 60px; padding: 12px 16px; gap: 8px; }
  .logo__mark { height: 30px; }
  .nav__end { gap: 6px; }
  .nav__end button, .nav__cta { height: 42px; padding: 0 8px; font-size: 12.5px; }
  .nav__cta { display: none; }
  .hero__card { bottom: 16px; padding: 18px 16px 16px; width: calc(100% - 2 * var(--gutter)); }
  .card__title { font-size: 28px; }
  .obra { bottom: 16px; }
  .viaje { height: calc(var(--obras, 8) * 110svh); }
  .fin { padding-top: 110px; }
  .fin__cv b { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Una pausa entre la obra y el cierre: el artista y su mesa de trabajo. */
.about { background: #f4f1ea url("assets/lienzo.jpg") 0 0 / 820px auto repeat; padding: 112px var(--gutter) 80px; pointer-events: auto; }
/* la hoja del Shop queda encima del cierre rojo y le echa sombra hacia abajo */
.shop { z-index: 1; box-shadow: 0 2px 5px rgb(20 5 5 / .35), 0 18px 36px rgb(20 5 5 / .45), 0 54px 96px rgb(20 5 5 / .35); }
.about__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 112px); max-width: 1360px; margin: auto; align-items: center; }
.about figure { margin: 0; min-width: 0; }
.about img { display: block; width: 100%; height: auto; }
.about__portrait img { max-height: 740px; object-fit: cover; object-position: center; }
.about figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 12px; font-size: 11px; color: #4b4945; }
.about__text h2 { margin: 0 0 40px; font-size: 16px; font-weight: 500; border-top: 1px solid; padding-top: 14px; }
.about__name { font-size: clamp(42px, 5.5vw, 80px); line-height: .98; letter-spacing: -.045em; font-weight: 700; margin: 0 0 32px; max-width: 8em; }
.about__bio { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; margin: 0; max-width: 34em; }
.about__process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1360px; margin: 88px auto 0; padding-top: 24px; border-top: 1px solid #aaa59d; }
.about__process img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 720px) {
  .about { padding-top: 88px; padding-bottom: 48px; }
  .about__intro { grid-template-columns: 1fr; gap: 36px; }
  .about__portrait img { max-height: none; }
  .about__text h2 { margin-bottom: 28px; }
  .about__name { font-size: 48px; }
  .about__bio { font-size: 18px; line-height: 1.6; }
  .about__process { grid-template-columns: 1fr; margin-top: 40px; gap: 32px; }
}

/* Papel de algodón completo: se conserva el alfa y ninguno de los bordes se recorta. */
.painting-card {
  position: fixed; z-index: 10; margin: 0;
  width: 410px; max-width: calc(100vw - 2 * var(--gutter));
  padding: 30px 32px;
  pointer-events: auto;
}
.painting-card[hidden] { display: none; }
.painting-card__kicker { font-size: 11px; line-height: 1.4; font-weight: 600; color: var(--feba-deep); }
.painting-card__kicker > span:first-child { font-variant-numeric: tabular-nums; }
.painting-card__title { font-size: 29px; font-weight: 600; line-height: 1.06; letter-spacing: -.035em; }
.painting-card__source { font-size: 12px; line-height: 1.45; color: #57534c; }
.painting-card__body { font-size: 15px; line-height: 1.45; }
.painting-card__foot { font-size: 10px; line-height: 1.4; color: #57534c; padding-top: 12px; }
@media (max-width: 720px) {
  .hero__card { padding: 26px 27px 24px; }
  .painting-card { width: 343px; padding: 24px 26px; }
  .painting-card > * + * { margin-top: 9px; }
  .painting-card__title { font-size: 25px; }
  .painting-card__body { font-size: 13px; }
  .painting-card__source { font-size: 11px; }
  .painting-card__foot { padding-top: 6px; }
}

/* Proyectos: una sala de exposición, con el reel como primera pieza. */
/* sube sobre el último lienzo como una hoja que lo tapa: sombra hacia arriba */
.projects { position: relative; background: #f4f1ea url("assets/lienzo.jpg") 0 0 / 820px auto repeat; padding: 112px var(--gutter) 40px; pointer-events: auto; }
/* el video de Flor Silvestre sube sobre el último lienzo como una hoja que lo tapa: sombra hacia arriba */
.reel { position: relative; z-index: 1; background: #25231f; pointer-events: auto;
  box-shadow: 0 -2px 5px rgb(20 10 5 / .3), 0 -16px 32px rgb(20 10 5 / .4), 0 -50px 90px rgb(20 10 5 / .32); }
.reel__media { position: relative; margin: 0; }
.reel__media video { display: block; width: 100%; height: clamp(340px, 55vw, 680px); object-fit: cover; object-position: center 48%; cursor: inherit; }
.reel__media figcaption { position: absolute; bottom: 16px; right: var(--gutter); color: #fff; background: rgb(14 14 14 / .8); padding: 6px 10px; font-size: 11px; }
.projects__in { max-width: 1360px; margin: auto; }
.projects__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 36px; border-bottom: 2px solid var(--ink); }
.projects__heading h2 { margin: 0; font-size: clamp(52px, 8vw, 112px); line-height: 1; font-weight: 600; letter-spacing: -.055em; }
.projects__heading > span { font-size: 12px; color: var(--feba-deep); white-space: nowrap; }
.projects__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 80px); }
.project { min-width: 0; padding: 36px 0 44px; border-bottom: 1px solid #b8b2a8; }
.project article, .project__text { min-width: 0; }
.project--1 { grid-column: 1 / -1; padding: 56px 0; }
.project--1 article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 112px); align-items: center; }
.project__media { margin: 0 0 28px; }
.project__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.project__media--video { width: min(100%, 420px); justify-self: center; margin: 0; }
.project__media video { display: block; width: 100%; aspect-ratio: 9 / 16; background: #25231f; object-fit: contain; }
.project__media figcaption { padding-top: 10px; font-size: 11px; color: #57534c; }
.project__meta { margin: 0 0 18px; display: flex; align-items: baseline; gap: 12px; font-size: 12px; }
.project__number { color: var(--feba-deep); font-variant-numeric: tabular-nums; margin-right: 4px; }
.project__year { margin-left: auto; font-variant-numeric: tabular-nums; }
.project h3 { font-size: clamp(23px, 2.7vw, 38px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; margin: 0 0 12px; overflow-wrap: break-word; }
.project--1 h3 { font-size: clamp(48px, 6.8vw, 96px); line-height: .98; max-width: 7em; letter-spacing: -.05em; }
.project__place { font-size: 14px; margin: 0; color: #57534c; }
.project__body { font-size: 16px; line-height: 1.6; margin: 22px 0 0; max-width: 35em; }
.project--1 .project__body { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; max-width: 25em; }
@media (max-width: 720px) {
  .projects { padding-top: 88px; padding-bottom: 16px; }
  .projects__heading { padding-bottom: 24px; }
  .projects__list { grid-template-columns: minmax(0, 1fr); }
  .project { padding: 28px 0 32px; }
  .project--1 article { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .project--1 .project__text { order: -1; }
  .project--1 h3 { font-size: 60px; }
  .project__media--video { width: min(100%, 360px); align-self: center; }
  .project h3 { overflow-wrap: anywhere; }
  .project--1 h3 { overflow-wrap: normal; }
  .project__body { margin-top: 16px; }
  }

/* Flor Silvestre: su video va arriba, en su propia banda; aquí queda el texto grande */
.project--1 article { display: block; }
.project--1 .project__media--video {
  position: relative; width: 100vw; max-width: none;
  margin: 0 0 36px; margin-left: calc(50% - 50vw);
  background: #25231f;
}
.project--1 .project__media video {
  width: 100%; height: clamp(340px, 55vw, 680px); aspect-ratio: auto;
  object-fit: cover; object-position: center 48%;
  cursor: inherit;
}
.project__media--video figcaption {
  position: absolute; bottom: 16px; right: var(--gutter);
  color: #fff; background: rgb(14 14 14 / .8); padding: 6px 10px;
}
.project--1 .project__text { max-width: 960px; margin: auto; }
.project--1 h3 { max-width: none; }
.project--1 .project__body { max-width: 35em; }

/* Dos originales, una vez cada uno: sombra de vinilo y un pequeño gesto al entrar. */
.sticker { display: block; width: 140px; transform: rotate(var(--tilt)); filter: drop-shadow(2px 6px 3px rgb(0 0 0 / .25)); }
.sticker img { display: block; width: 100%; height: auto; }
/* El imán comparte el encabezado: no añade una fila vacía antes de la biografía. */
.about__text { display: block; }
.about__text h2 { grid-column: 1; grid-row: 1; margin-bottom: 28px; }
.about__name { grid-column: 1; grid-row: 2; }
.about__bio { grid-column: 1 / -1; }
.project--8, .project--sticker { grid-column: 1 / -1; }
.project--sticker { display: flex; align-items: center; justify-content: center; padding: 56px 0 24px; border: 0; }
.sticker--face { --tilt: 3deg; width: min(78%, 340px); margin: 0 auto; }
.sticker--flower { --tilt: -6deg; width: clamp(250px, 28vw, 400px); align-self: flex-end; margin: 28px 32px 24px; }
.sticker.is-stuck { animation: sticker-in .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sticker-in {
  from { opacity: 0; transform: translateY(24px) rotate(calc(var(--tilt) - 14deg)) scale(1.15); }
  65% { opacity: 1; transform: translateY(0) rotate(calc(var(--tilt) + 3deg)) scale(.97); }
  to { transform: rotate(var(--tilt)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sticker:hover img { transform: rotate(-5deg) translateY(-5px); }
  .sticker img { transition: transform .25s ease; }
}
@media (max-width: 720px) {
  .project--1 .project__media video { height: 420px; height: min(64svh, 480px); }
  .project--1 .project__media--video { margin-bottom: 28px; }
  .project--1 h3 { font-size: clamp(44px, 13vw, 60px); }
  .about__text h2 { margin-bottom: 20px; }
  .about__name { font-size: 40px; margin-bottom: 24px; }
  .sticker--face { width: 62%; margin: 0 auto; }
  .sticker--flower { width: 72%; margin: 24px auto; }
}

/* Galería: lienzos en blanco, colgados a una misma línea de base por fila.
   La proporción vive en la ficha: también funciona al sustituir el div por img. */
.gallery, .shop {
  position: relative;
  background: #f4f1ea url("assets/lienzo.jpg") 0 0 / 820px auto repeat;
  padding: 104px var(--gutter) 64px;
  pointer-events: auto;
  scroll-margin-top: 110px;
}
.gallery__in, .shop__in { max-width: 1360px; margin: auto; }
.gallery__heading, .shop__heading {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px 64px; padding-bottom: 32px; border-bottom: 2px solid var(--ink);
}
.gallery__heading h2, .shop__heading h2 {
  margin: 0; font-size: clamp(52px, 8vw, 112px); line-height: 1;
  font-weight: 600; letter-spacing: -.055em;
}
.gallery__lede, .shop__lede { margin: 0; max-width: 29em; font-size: 16px; line-height: 1.5; }
.gallery__grid {
  list-style: none; padding: 0; margin: 64px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px clamp(24px, 4.5vw, 72px); align-items: end;
}
.gallery__item { min-width: 0; --art-ratio: 1; }
.gallery__item--v { --art-ratio: 3 / 4; }
.gallery__item--h { --art-ratio: 4 / 3; }
.gallery__item figure { margin: 0; }
.gallery__ph, .gallery__item figure > img {
  display: block; width: 100%; aspect-ratio: var(--art-ratio); object-fit: cover;
  border: 8px solid #faf8f2;
  box-shadow: 0 0 0 1px #c5bfb2, 2px 4px 3px rgb(48 35 20 / .13), 8px 14px 20px rgb(48 35 20 / .09);
}
.gallery__ph {
  position: relative; display: grid; place-items: center;
  background: linear-gradient(135deg, rgb(255 255 255 / .6), rgb(223 215 197 / .18)), url("assets/lienzo.jpg") center / 560px auto;
}
.gallery__ph::before { content: ""; position: absolute; inset: 0; box-shadow: inset 1px 2px 5px rgb(66 49 25 / .12); pointer-events: none; }
.gallery__ph span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid #bdb6a7; border-radius: 50%; color: #6a6154;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
/* las obras reales: la foto recortada a la pintura, colgada sobre el lienzo con su sombra (sin marco) */
.gallery__item figure > img {
  aspect-ratio: auto; height: auto; object-fit: initial; border: 0;
  box-shadow: 1px 1px 0 rgb(30 20 10 / .28), 3px 6px 6px rgb(48 35 20 / .2), 12px 22px 32px rgb(48 35 20 / .16);
}
.gallery__item--round figure > img { box-shadow: none; filter: drop-shadow(1px 1px 0 rgb(30 20 10 / .25)) drop-shadow(3px 6px 6px rgb(48 35 20 / .2)) drop-shadow(12px 22px 24px rgb(48 35 20 / .15)); }
.gallery__item figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding-top: 12px; border-top: 1px solid #b8b2a8; }
.gallery__title { font-size: 14px; font-weight: 600; }
.gallery__meta { font-size: 12px; color: #57534c; }

/* Shop: catálogo sobre papel; el sello anuncia el estado, sin simular compra. */
.shop { padding-bottom: 80px; }
.shop__grid {
  list-style: none; padding: 0; margin: 40px 0 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px;
}
.shop__item { min-width: 0; }
.shop__item article {
  position: relative; height: 100%; padding: 20px 20px 28px;
  background: url("assets/papel-roto.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(1px 3px 2px rgb(35 24 15 / .12));
}
.shop__ph, .shop__item article > img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
}
.shop__ph {
  position: relative; display: grid; place-items: center; isolation: isolate;
  background: #eeebe4; color: #6a6154;
}
.shop__ph::before {
  content: ""; position: absolute; z-index: -1; width: 55%; aspect-ratio: 3 / 4;
  background: #faf8f2; border: 1px solid #c5bfb2;
  box-shadow: 3px 5px 7px rgb(48 35 20 / .1); transform: rotate(-5deg);
}
.shop__item--sticker .shop__ph::before { width: 48%; aspect-ratio: 1; border-radius: 50%; transform: rotate(0); border: 5px solid #fff; outline: 1px solid #c5bfb2; }
.shop__item--ropa .shop__ph::before { width: 65%; aspect-ratio: 1; transform: rotate(4deg); background: #e1d9ca; border: 1px dashed #8b8171; box-shadow: none; }
.shop__ph span { font-size: 12px; font-variant-numeric: tabular-nums; }
.shop__kind { margin: 20px 0 8px; color: var(--feba-deep); font-size: 12px; font-weight: 600; }
.shop__name { margin: 0; max-width: 14em; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; }
.shop__price { margin: 12px 0 20px; color: #57534c; font-size: 13px; }
.shop__soon { display: inline-block; border: 1px solid var(--feba-deep); padding: 5px 10px; color: var(--feba-deep); font-size: 12px; font-weight: 600; transform: rotate(-3deg); }
/* con link de Stripe: el mismo sello, lleno de rojo, y con área táctil cómoda */
.shop__buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--feba); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transform: rotate(-3deg); box-shadow: 2px 4px 0 rgb(20 10 5 / .18); transition: transform .2s, box-shadow .2s; }
.shop__buy:hover, .shop__buy:focus-visible { transform: rotate(-1deg) translateY(-2px); box-shadow: 3px 7px 0 rgb(20 10 5 / .2); }
.shop__ask { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #b8b2a8; }
.shop__ask a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--ink); font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.shop__ask a:hover { color: var(--feba-deep); }

@media (max-width: 960px) {
  .gallery__heading, .shop__heading { flex-direction: column; gap: 20px; }
  .gallery__grid { gap: 48px 24px; }
  .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .gallery, .shop { padding: 72px var(--gutter) 40px; scroll-margin-top: 92px; }
  .gallery__heading, .shop__heading { padding-bottom: 24px; }
  .gallery__lede, .shop__lede { font-size: 15px; }
  .gallery__grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 40px; }
  .gallery__item { width: 100%; max-width: 440px; justify-self: center; }
  .gallery__item--v { width: 82%; }
  .gallery__item--s { width: 92%; }
  .gallery__item figcaption { margin-top: 18px; }
  .shop__grid { margin-top: 32px; gap: 28px 12px; }
  .shop__item article { padding: 12px 12px 20px; }
  .shop__kind { margin-top: 16px; }
  .shop__name { font-size: 19px; overflow-wrap: anywhere; }
  .shop__price { font-size: 12px; }
  .shop__ask { margin-top: 28px; }
}
@media (max-width: 359px) {
  .shop__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Shop: "Ver" junto al estado de cada artículo */
.shop__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.shop__view {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: transparent; border: 0;
  min-height: 44px; padding: 0 2px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.shop__view:hover, .shop__view:focus-visible { color: var(--feba-deep); }

/* Ver artículo: una hoja de papel roto sobre la página oscurecida */
.item-view { width: min(920px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.item-view::backdrop { background: rgb(28 16 10 / .58); backdrop-filter: blur(3px); }
.item-view[open] { animation: sheet-in .42s cubic-bezier(.16,1,.3,1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg) scale(.98); } }
.item-view__paper {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; padding: 40px 40px 44px;
  max-height: calc(100dvh - 32px); overflow: auto;
  background: url("assets/papel-roto.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(3px 10px 14px rgb(20 10 5 / .35));
}
.item-view__close {
  position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; background: transparent;
  font: inherit; font-size: 30px; line-height: 1; color: var(--ink);
}
.item-view__close:hover, .item-view__close:focus-visible { color: var(--feba-deep); }
.item-view__photo {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  background: #ece7dc url("assets/lienzo.jpg") center / 560px auto;
}
.item-view__photo img { width: 100%; height: 100%; object-fit: cover; }
.item-view__photo::before { content: ""; position: absolute; background: #faf8f2; box-shadow: 2px 5px 10px rgb(48 35 20 / .18); }
.item-view__photo:has(img)::before { display: none; }
.item-view__photo--print::before { width: 56%; aspect-ratio: 3 / 4; transform: rotate(-3deg); border: 1px solid #d3cdbf; }
.item-view__photo--sticker::before { width: 52%; aspect-ratio: 1; border-radius: 50%; border: 6px solid #fff; outline: 1px solid #c5bfb2; }
.item-view__photo--ropa::before { width: 66%; aspect-ratio: 1; transform: rotate(3deg); background: #e1d9ca; border: 1px dashed #8b8171; box-shadow: none; }
.item-view__photo span { position: relative; font-size: 13px; color: #6a6154; font-variant-numeric: tabular-nums; }
.item-view__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.item-view__thumbs[hidden] { display: none; }
.item-view__thumb { width: 64px; height: 64px; padding: 0; font: inherit; font-size: 11px; color: #6a6154; border: 1px solid #c5bfb2; background: #ece7dc url("assets/lienzo.jpg") center / 240px auto; overflow: hidden; }
.item-view__thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-view__thumb[aria-pressed="true"] { outline: 2px solid var(--feba); outline-offset: 2px; }
.item-view__info { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.item-view__info > * { margin: 0; }
.item-view__kind { color: var(--feba-deep); font-size: 13px; font-weight: 600; }
.item-view__name { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
.item-view__price { font-size: 16px; color: #57534c; }
.item-view__desc { font-size: 15px; line-height: 1.5; padding-top: 12px; border-top: 1px solid #c9c2b4; }
.item-view__buy { margin-top: auto; padding-top: 12px; }
@media (max-width: 720px) {
  .item-view__paper { grid-template-columns: 1fr; gap: 18px; padding: 52px 20px 28px; }
  .item-view__info { padding-top: 0; }
}

/* Contacto: el formulario es otra hoja de papel sobre el rojo */
.contact {
  margin-top: 36px; max-width: 640px; padding: 34px 34px 30px; color: var(--ink);
  background: url("assets/papel-roto.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(2px 6px 8px rgb(20 8 6 / .3)); transform: rotate(-.6deg);
}
.contact__title { margin: 0 0 18px; font-size: 24px; letter-spacing: -.02em; font-weight: 600; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.contact__field input, .contact__field select, .contact__field textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); width: 100%; min-height: 44px; padding: 10px 12px;
  background: rgb(255 255 255 / .55); border: 0; border-bottom: 1.5px solid #8f877a; border-radius: 0; resize: vertical;
}
.contact__field input:focus-visible, .contact__field select:focus-visible, .contact__field textarea:focus-visible { outline: 2px solid var(--feba); outline-offset: 1px; }
.contact__end { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.contact__send {
  font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--feba); border: 0;
  min-height: 46px; padding: 0 26px; transform: rotate(-2deg); box-shadow: 2px 4px 0 rgb(20 10 5 / .2); transition: transform .2s;
}
.contact__send:hover, .contact__send:focus-visible { transform: rotate(0) translateY(-2px); }
.contact__note { margin: 0; font-size: 13px; color: #4a453e; max-width: 30em; }

/* Redes: pedacitos de papel con su logo */
.fin__social { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.social {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transform: rotate(-1deg);
  filter: drop-shadow(1px 2px 1px rgb(35 24 15 / .25)); transition: transform .18s, filter .18s;
}
.fin__social li + li .social { transform: rotate(1.5deg); }
.social::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("assets/papel-roto.webp") center / 100% 100% no-repeat; }
.social svg { width: 22px; height: 22px; flex: none; }
.social:hover, .social:focus-visible { transform: translateY(-2px) rotate(0); filter: drop-shadow(1px 4px 2px rgb(35 24 15 / .3)); color: var(--feba-deep); }
.social.is-off { opacity: .55; pointer-events: none; }
@media (max-width: 720px) {
  .contact { padding: 26px 18px 22px; }
  .contact__row { grid-template-columns: 1fr; gap: 0; }
}

/* Quién es como página: fija, primero debajo de la escena (la destapa el primer lienzo al pasar),
   luego encima; su contenido sube con el scroll y al final se disipa */
/* siempre presente detrás de la escena (opaca hasta que se pasa el primer lienzo): así sus fotos ya están
   pintadas cuando aparece y no hay tirón la primera vez */
.bio-page {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: #f4f1ea url("assets/lienzo.jpg") 0 0 / 820px auto repeat;
  transform-origin: 50% 40%; will-change: transform, opacity;
}
.bio-page.is-over { z-index: 2; pointer-events: auto; }
.bio-page__in { will-change: transform; }
.bio-page .about { background: transparent; }

/* trampa para bots: invisible para personas */
.contact__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }