:root {
  --bg: #f7f5f0;
  --ink: #171717;
  --muted: #77736d;
  --line: #d9d5cf;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }

.header { position: sticky; z-index: 50; top: 0; height: 88px; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--bg); transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.header.is-scrolled { border-color: rgba(23,23,23,.1); background: rgba(247,245,240,.78); box-shadow: 0 10px 32px rgba(23,23,23,.06); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }
.logo { display: block; }
.header-isotype-frame { position: relative; display: block; width: 52px; height: 52px; overflow: hidden; }
.header-isotype { position: absolute; width: 61px; max-width: none; height: 61px; left: -4px; top: -4px; object-fit: contain; }
.header nav { display: flex; gap: 38px; font-size: 11px; letter-spacing: .12em; }
.menu { display: none; }

.hero,
.projects,
.about,
.contact { padding: 70px 5%; }

.hero-top,
.hero-bottom,
.image-caption,
.section-heading,
.project-meta,
footer { display: flex; justify-content: space-between; gap: 24px; }

.hero-top,
.image-caption,
.section-heading > span,
.about > span,
.contact > span,
.project-meta span,
footer { font-size: 11px; letter-spacing: .13em; }

.hero h1,
.about h2,
.contact h2 { font-family: 'Italiana', serif; font-weight: 400; letter-spacing: -.035em; }
.hero-logo-frame { position: relative; width: min(100%, 1380px); aspect-ratio: 4.2 / 1; overflow: hidden; margin: 42px auto 24px; }
.hero-logo { position: absolute; width: 104.4%; max-width: none; height: auto; left: -2.2%; top: 0; transform: translateY(-38.7%); object-fit: contain; }
.hero h1 { max-width: 1200px; font-size: clamp(58px, 8vw, 128px); font-weight: 400; line-height: .94; letter-spacing: -.025em; margin: 36px 0 64px; }
.hero h1 em,
.about h2 em,
.contact h2 em { font-weight: 400; }
.hero-bottom { align-items: end; margin-bottom: 35px; }
.hero-bottom p { max-width: 360px; font-size: 15px; line-height: 1.7; }
.hero-bottom a,
.contact-link--secondary { font-size: 11px; letter-spacing: .13em; border-bottom: 1px solid var(--ink); padding-bottom: 9px; }
.hero-image-link { display: block; overflow: hidden; }
.hero-image { height: clamp(350px, 57vw, 760px); object-position: center var(--hero-image-position, 0%); background: #b7ada0; will-change: object-position; }
.image-caption { padding-top: 16px; color: var(--muted); }

.projects { padding-top: 125px; }
.section-heading { align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 25px; margin-bottom: 36px; }
.section-heading h2 { color: #34322f; font: 400 clamp(32px, 4vw, 58px)/1.08 'Italiana', serif; letter-spacing: .005em; margin: 0; }
.section-heading h2 span { font: 13px 'DM Sans', sans-serif; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 24px; }
.project { display: block; overflow: hidden; }
.project-preview { position: relative; height: clamp(320px, 48vw, 660px); overflow: hidden; background: #d9d5cf; }
.project-preview img { position: absolute; inset: 0; height: 100%; opacity: 0; filter: grayscale(12%); transition: opacity 1.15s ease-in-out, filter .3s, transform .8s ease; will-change: opacity; }
.project-preview img.is-visible { opacity: 1; }
.project:hover .project-preview img { filter: grayscale(0); transform: scale(1.01); }
.project:not(.project--sketches) .project-preview img { object-position: center 24%; }
.project--sketches .project-preview { background: #fff; }
.project--sketches .project-preview img { object-fit: contain; padding: 7%; }
.project:nth-child(even) { padding-top: 90px; }
.project-meta { position: relative; z-index: 1; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.project-meta h3 { font: normal 27px 'Italiana', serif; margin: 0; }
.project-meta span { color: var(--muted); }

.about { display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid var(--line); margin-top: 80px; padding-top: 100px; padding-bottom: 130px; }
.about h2,
.contact h2 { font-size: clamp(64px, 9vw, 130px); line-height: .96; margin: 0 0 45px; }
.about p { font-size: 19px; line-height: 1.8; max-width: 530px; color: #555; }
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 24px; }
.contact { background: #171717; color: #f7f5f0; min-height: 560px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.contact-links { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; width: 100%; }
.contact-link { border-color: #f7f5f0; }
.contact-link--primary { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 28px; width: min(760px, 70%); padding: 18px 0; border-top: 1px solid #f7f5f0; border-bottom: 1px solid #f7f5f0; }
.contact-link--primary > span { font-size: 11px; letter-spacing: .13em; }
.contact-link--primary strong { font: normal clamp(28px, 4vw, 58px)/1 'Italiana', serif; letter-spacing: -.02em; }
.contact-link--secondary { white-space: nowrap; }
footer { padding: 30px 5%; align-items: center; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand img { width: 24px; height: 24px; object-fit: contain; }

/* Páginas internas */
.inner-page { min-height: 100vh; }
.collection-intro { padding: 58px 5% 72px; }
.back-link,
.eyebrow,
.collection-facts,
.sketch-toolbar,
.next-project > span { font-size: 11px; letter-spacing: .13em; }
.back-link { display: inline-block; margin-bottom: 80px; color: var(--muted); }
.collection-title-row { display: grid; grid-template-columns: 1.45fr .55fr; align-items: end; gap: 60px; }
.collection-title-row h1 { font: normal clamp(120px, 22vw, 340px)/.75 'Italiana', serif; letter-spacing: -.04em; margin: 28px 0 0; }
.mater-page .collection-title-row h1 { font-size: clamp(76px, 13vw, 200px); line-height: .8; }
.mater-page .collection-title-row h1 em { font-weight: 400; }
.collection-title-row p { max-width: 430px; margin: 0 0 12px; font-size: 17px; line-height: 1.75; color: #555; }
.collection-facts { display: flex; justify-content: space-between; gap: 24px; padding-top: 54px; margin-top: 58px; border-top: 1px solid var(--line); color: var(--muted); }
.collection-detail-note { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 20px 5% 64px; }
.collection-detail-note > span { padding-top: 9px; font-size: 11px; letter-spacing: .13em; color: var(--muted); }
.collection-detail-note h2 { max-width: 620px; margin: 0 0 22px; font: 400 clamp(38px, 5vw, 72px)/1.02 'Italiana', serif; letter-spacing: -.02em; }
.collection-detail-note p { max-width: 650px; margin: 0; color: #555; font-size: 17px; line-height: 1.75; }

.collection-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 5% 120px; }
.gallery-item { appearance: none; display: block; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: zoom-in; }
.gallery-item img { height: clamp(420px, 58vw, 830px); object-position: center var(--gallery-image-position, 0%); transition: transform .5s ease, filter .35s; will-change: object-position; }
.gallery-item:hover img { transform: scale(1.012); filter: saturate(1.06); }
.gallery-item--wide { grid-column: 1 / -1; }
.gallery-item--wide img { height: clamp(500px, 64vw, 920px); }

.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 24px; border: 0; background: rgba(15,15,15,.97); color: #fff; }
.lightbox[open] { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center; }
.lightbox::backdrop { background: rgba(15,15,15,.8); }
.lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; height: calc(100dvh - 48px); margin: 0; }
.lightbox figure img { width: auto; max-width: 100%; height: calc(100% - 42px); object-fit: contain; }
.lightbox figcaption { align-self: end; padding-top: 18px; font-size: 11px; letter-spacing: .1em; color: #c9c5bf; text-align: center; }
.lightbox-close,
.lightbox-control { border: 0; background: transparent; color: #fff; cursor: pointer; }
.lightbox-close { position: fixed; z-index: 2; top: 24px; right: 28px; font: 11px 'DM Sans', sans-serif; letter-spacing: .12em; }
.lightbox-control { font: 32px 'DM Sans', sans-serif; }

.sketches-intro .collection-title-row h1 { font-size: clamp(90px, 16vw, 250px); }
.process-heading { display: grid; grid-template-columns: .28fr .72fr; gap: 28px; padding: 20px 5% 42px; }
.process-heading > span { font-size: 11px; letter-spacing: .13em; }
.process-heading h2 { font: normal clamp(72px, 10vw, 150px)/.8 'Italiana', serif; margin: 0 0 30px; }
.process-heading p { max-width: 520px; margin: 0; color: #555; font-size: 17px; line-height: 1.7; }
.sketch-viewer { display: grid; grid-template-columns: minmax(210px, .28fr) minmax(0, 1fr); gap: 28px; padding: 0 5% 120px; }
.sketch-thumbnails { display: flex; flex-direction: column; gap: 18px; }
.sketch-thumb { padding: 0; border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; text-align: left; opacity: .56; transition: opacity .25s, border-color .25s; }
.sketch-thumb:hover,
.sketch-thumb.active { opacity: 1; border-color: var(--ink); }
.sketch-thumb img { aspect-ratio: 1018 / 596; object-fit: contain; background: #fff; }
.sketch-thumb span { display: block; padding: 10px 12px; font-size: 10px; letter-spacing: .12em; }
.sketch-stage { align-self: start; position: sticky; top: 24px; background: #fff; border: 1px solid var(--line); }
.sketch-toolbar { display: flex; justify-content: space-between; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sketch-toolbar a { border-bottom: 1px solid var(--ink); }
.sketch-stage > img { width: 100%; height: auto; aspect-ratio: 1018 / 596; object-fit: contain; background: #fff; }

.pdf-project { display: grid; grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr); gap: 56px; padding: 110px 5% 130px; border-top: 1px solid var(--line); }
.pdf-project-intro { align-self: start; position: sticky; top: 32px; }
.pdf-project-intro h2 { font: normal clamp(62px, 8vw, 125px)/.88 'Italiana', serif; letter-spacing: -.035em; margin: 34px 0 42px; }
.pdf-project-intro h2 em { font-weight: 400; }
.pdf-project-intro > p { max-width: 430px; margin: 0; color: #555; font-size: 17px; line-height: 1.75; }
.pdf-meta { display: flex; flex-wrap: wrap; gap: 12px 22px; padding-top: 34px; margin-top: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.pdf-viewer { min-width: 0; background: #fff; border: 1px solid var(--line); }
.pdf-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .12em; }
.pdf-toolbar > div { display: flex; gap: 22px; }
.pdf-toolbar a { padding-bottom: 4px; border-bottom: 1px solid var(--ink); }
.pdf-embed { display: block; width: 100%; height: min(82vh, 920px); border: 0; }
.pdf-fallback { display: grid; align-content: center; min-height: 620px; padding: 32px; text-align: center; }
.pdf-fallback img { height: auto; object-fit: contain; }
.pdf-fallback p { font-size: 13px; line-height: 1.6; }
.pdf-fallback a { border-bottom: 1px solid var(--ink); }

.next-project { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 90px 5%; border-top: 1px solid var(--line); }
.next-project > a { font: normal clamp(42px, 6vw, 92px)/1 'Italiana', serif; }
.next-project > a span { font-family: 'DM Sans', sans-serif; font-size: .4em; vertical-align: top; }

@media (max-width: 700px) {
  html { scroll-padding-top: 86px; }
  .header { height: 72px; }
  .header-isotype-frame { width: 42px; height: 42px; }
  .header-isotype { width: 50px; height: 50px; left: -4px; top: -4px; }
  .menu { display: block; border: 0; background: none; font: 11px 'DM Sans', sans-serif; letter-spacing: .12em; }
  .header nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); z-index: 3; padding: 30px 5%; flex-direction: column; border-bottom: 1px solid var(--line); }
  .header nav.open { display: flex; }
  .hero,
  .projects,
  .about,
  .contact { padding: 42px 20px; }
  .hero-logo-frame { width: calc(100% - 8px); margin: 30px auto 24px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 54px); line-height: .96; margin: 30px 0 38px; }
  .hero-bottom { align-items: start; flex-direction: column; }
  .hero-bottom p { margin: 0; }
  .hero-image { height: clamp(420px, 125vw, 540px); object-position: center var(--hero-image-position, 0%); }
  .image-caption span:last-child,
  .hero-top span:last-child { display: none; }
  .section-heading { align-items: start; flex-direction: column; }
  .project-grid { grid-template-columns: 1fr; gap: 42px; }
  .project:nth-child(even) { padding-top: 0; }
  .project-preview { height: auto; aspect-ratio: 3 / 4; }
  .about { grid-template-columns: 1fr; gap: 55px; margin-top: 30px; }
  .about h2,
  .contact h2 { font-size: clamp(60px, 13vw, 90px); }
  .contact { min-height: 490px; }
  .contact-links { align-items: flex-start; flex-direction: column; gap: 30px; }
  .contact-link--primary { grid-template-columns: 1fr auto; gap: 12px; width: 100%; }
  .contact-link--primary > span:first-child { grid-column: 1 / -1; }
  footer { flex-wrap: wrap; line-height: 2; }
  .collection-intro { padding: 42px 20px 54px; }
  .back-link { margin-bottom: 55px; }
  .collection-title-row { grid-template-columns: 1fr; align-items: start; gap: 34px; }
  .collection-title-row h1 { font-size: clamp(100px, 39vw, 210px); }
  .mater-page .collection-title-row h1 { font-size: clamp(68px, 20vw, 108px); line-height: .84; }
  .collection-title-row p { font-size: 16px; }
  .collection-facts { flex-wrap: wrap; row-gap: 14px; padding-top: 30px; margin-top: 38px; }
  .collection-detail-note { grid-template-columns: 1fr; gap: 22px; padding: 8px 20px 46px; }
  .collection-detail-note h2 { font-size: clamp(38px, 11vw, 54px); }
  .collection-detail-note p { font-size: 16px; }
  .collection-gallery { grid-template-columns: 1fr; gap: 18px; padding: 0 20px 80px; }
  .gallery-item--wide { grid-column: auto; }
  .gallery-item img,
  .gallery-item--wide img { height: auto; aspect-ratio: 3 / 4; object-position: center var(--gallery-image-position, 0%); }
  .lightbox { padding: 18px; }
  .lightbox[open] { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .lightbox figure { height: calc(100dvh - 36px); }
  .lightbox-close { top: 18px; right: 18px; }
  .sketches-intro .collection-title-row h1 { font-size: clamp(76px, 27vw, 145px); }
  .process-heading { grid-template-columns: 1fr; gap: 22px; padding: 10px 20px 34px; }
  .process-heading h2 { font-size: 82px; margin-bottom: 22px; }
  .sketch-viewer { grid-template-columns: 1fr; gap: 18px; padding: 0 20px 80px; }
  .sketch-thumbnails { order: 2; display: flex; flex-direction: row; align-items: flex-start; gap: 14px; width: 100%; height: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 12px; }
  .sketch-thumb { flex: 0 0 190px; width: 190px; height: auto; min-height: 0; align-self: flex-start; scroll-snap-align: start; }
  .sketch-thumb img { display: block; width: 100%; height: 112px; aspect-ratio: auto; object-fit: contain; }
  .sketch-stage { position: static; }
  .pdf-project { grid-template-columns: 1fr; gap: 50px; padding: 80px 20px 90px; }
  .pdf-project-intro { position: static; }
  .pdf-project-intro h2 { font-size: clamp(58px, 17vw, 86px); }
  .pdf-toolbar { align-items: flex-start; flex-direction: column; }
  .pdf-embed { height: 72vh; min-height: 520px; }
  .next-project { align-items: flex-start; flex-direction: column; padding: 68px 20px; }
}

@media (max-width: 480px) {
  .header { padding: 0 20px; }
  .header nav { padding: 28px 20px; }
  .hero-top { align-items: center; }
  .hero-logo-frame { width: 100%; margin: 24px auto 22px; }
  .hero-bottom { gap: 24px; margin-bottom: 30px; }
  .image-caption { line-height: 1.5; }
  .projects { padding-top: 76px; }
  .section-heading { gap: 16px; margin-bottom: 28px; }
  .section-heading h2 { font-size: 34px; line-height: 1.08; }
  .project-meta { align-items: flex-start; flex-direction: column; gap: 8px; padding: 16px 0; }
  .project-meta h3 { font-size: 25px; }
  .about { gap: 38px; padding-top: 72px; padding-bottom: 80px; }
  .about h2,
  .contact h2 { font-size: clamp(48px, 14vw, 64px); }
  .about p { font-size: 17px; line-height: 1.7; }
  .contact { min-height: 520px; }
  .contact-link--primary strong { font-size: clamp(27px, 8vw, 38px); }
  footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 26px 20px; }
  .sketch-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .sketch-thumb { flex-basis: 155px; width: 155px; }
  .sketch-thumb img { height: 91px; }
  .pdf-toolbar > div { align-items: flex-start; flex-direction: column; gap: 12px; }
  .pdf-embed { height: 68vh; min-height: 460px; }
  .pdf-fallback { min-height: 430px; padding: 18px; }
  .lightbox[open] { grid-template-columns: 36px minmax(0, 1fr) 36px; padding: 12px; }
  .lightbox-control { font-size: 25px; }
  .lightbox figcaption { line-height: 1.5; }
  .next-project > a { font-size: 43px; }
}