/* Web pública de Movaview (DESIGN.md): la foto manda, la interfaz se calla. */

.s-top {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; padding-block: var(--lg);
}
.s-brand { display: inline-flex; padding: var(--sm) var(--md); border-radius: var(--r-full); background: var(--paper); }
.s-brand img { width: 44px; height: auto; }
.s-nav { display: flex; gap: var(--xs); padding: var(--xs); border-radius: var(--r-full); background: var(--paper); }
.s-nav a { padding: var(--sm) var(--md); border-radius: var(--r-full); text-decoration: none; color: var(--text); font-weight: 500; }
.s-nav a:hover, .s-nav a[aria-current="page"] { background: var(--surface); color: var(--text); }

.s-hero { margin: 0; height: 88svh; min-height: 420px; background: var(--surface); }
.s-hero img { width: 100%; height: 100%; object-fit: cover; }
.s-hero--empty { display: grid; place-items: center; background: var(--paper); height: 70svh; }
.s-hero--empty .s-hero__mark { width: min(60vw, 420px); height: auto; object-fit: contain; }

.s-intro { padding-block: var(--xxl) var(--xxxl); }
.s-intro .t-display { max-width: 16ch; }
main > .s-intro:first-child { padding-top: calc(var(--xxxl) + var(--xxl)); }
.s-back { display: inline-block; margin-bottom: var(--lg); color: var(--text-muted); text-decoration: none; }
.s-back:hover { color: var(--text); }

.s-works { padding-bottom: var(--xxxl); }
.s-works > h2 { margin-bottom: var(--xl); }
.s-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xxl) var(--xl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .s-cats { grid-template-columns: 1fr 1fr; } }
.s-cat { display: grid; gap: var(--sm); text-decoration: none; color: var(--text); }
.s-cat:hover { color: var(--text); }
.s-cat__img { display: block; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; margin-bottom: var(--xs); }
.s-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.s-cat:hover .s-cat__img img { transform: scale(1.03); }
.s-cat .t-caption { margin-top: calc(var(--xs) * -1); }

/* Quién soy: el retrato en el óvalo del monograma */
.s-about { display: grid; gap: var(--xl); align-items: center; padding-block: var(--xxl) var(--xxxl); }
@media (min-width: 768px) { .s-about { grid-template-columns: minmax(200px, 340px) 1fr; gap: var(--xxxl); } }
.s-about p { max-width: 62ch; margin: var(--lg) 0 0; }
.s-oval { width: min(52vw, 340px); aspect-ratio: 236 / 452; object-fit: cover; border-radius: 50%; background: var(--surface); }
.s-about--page { padding-top: calc(var(--xxxl) + var(--xxl)); align-items: start; }

.s-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--lg);
  padding-block: var(--xxl) calc(var(--xxl) + 56px); border-top: 1px solid var(--border);
}
.s-foot img { width: 120px; height: auto; }
.s-foot p { margin: 0; color: var(--text-muted); max-width: 40ch; }