/* Product Unit · web
   Una columna centrada, filetes finos, logo monolínea. Claro y oscuro. */

:root {
  --bg: #f5f0e6; --ink: #1b1b1b; --muted: #5e574c; --rule: #d9d0bf; --tile: #e9e1d1; --hover: #9a4a2b;
  --font: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --gutter: 16px; --space: clamp(64px, 9vw, 120px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121110; --ink: #efe7d6; --muted: #b5ab99; --rule: #34302a; --tile: #1d1b18; --hover: #e3a37f; color-scheme: dark }
}
:root[data-theme="dark"] { --bg: #121110; --ink: #efe7d6; --muted: #b5ab99; --rule: #34302a; --tile: #1d1b18; --hover: #e3a37f; color-scheme: dark }
@media (min-width: 700px) { :root { --gutter: 48px } }

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased }
img, video, iframe, svg { max-width: 100%; display: block }
a { color: var(--ink) }
a:hover { color: var(--hover) }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px }
h1, h2, h3 { text-wrap: balance; margin: 0 }
p { margin: 0 }
[hidden] { display: none !important }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; z-index: 50 }
.skip:focus { left: 8px }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)) }

/* Cabecera */
header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 24px; border-bottom: 1px solid var(--rule) }
.site-logo { display: block; width: 92px; color: var(--ink) }
.site-logo:hover { color: var(--hover) }
.logo { width: 100%; height: auto; color: inherit }
.site-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 28px }
.navlink { text-decoration: none; font-size: 17px; padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1.5px solid transparent }
.navlink[aria-current="page"] { border-bottom-color: currentColor }
.lang { display: inline-flex; gap: 10px; font-size: 15px }
.lang a { text-decoration: none; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center }
.lang a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px }
.theme { font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; min-height: 40px; padding: 0 16px; cursor: pointer }
.theme:hover { border-color: var(--ink) }

main { min-width: 0 }
@media (prefers-reduced-motion: no-preference) { main { animation: in .35s ease } @keyframes in { from { opacity: .4; transform: translateY(6px) } } }

/* Tipografía */
.eyebrow { font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin: 0 0 20px }
.display { font-weight: 300; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -1px }
.display.xl { font-size: clamp(44px, 7vw, 96px); line-height: 1 }
.h2 { font-weight: 300; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: -.5px }
.lead { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 520px; margin: 28px 0 32px }
.sub { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 440px }
.split-a .sub { margin-top: 24px; max-width: 420px }
.textlink { font-size: 18px; min-height: 44px; display: inline-flex; align-items: center }
.rich { font-size: 19px; line-height: 1.65; color: var(--muted) }
.rich p + p { margin-top: 18px }
.rich a { color: var(--ink) }
.empty { color: var(--muted); font-size: 18px; padding: 24px 0 }

.btn-pill { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); font: inherit; font-size: 18px; background: transparent; cursor: pointer }
.btn-pill:hover { color: var(--bg); background: var(--ink) }
.btn-pill.solid { background: var(--ink); color: var(--bg) }
.btn-pill.solid:hover { background: var(--hover); border-color: var(--hover) }
.btn-pill:disabled { opacity: .5; cursor: wait }

/* Bloques */
.block { padding: 0 0 var(--space) }
.split { display: flex; flex-wrap: wrap; gap: 40px 72px; padding: 0 0 var(--space) }
.split > * { flex: 1 1 380px; min-width: 0 }
.page-top { padding-top: clamp(48px, 7vw, 96px) }
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px }

/* Portada */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 8vw, 104px) }
.hero-logo { flex: 1 1 360px; max-width: 520px; color: var(--ink) }
.hero-copy { flex: 1 1 380px }

.steps { display: flex; flex-wrap: wrap; gap: 40px }
.step { flex: 1 1 280px; border-top: 1px solid var(--ink); padding-top: 20px }
.step-n { font-size: 15px; color: var(--muted) }
.step h3 { font-weight: 400; font-size: 30px; margin: 10px 0 12px; line-height: 1.1 }
.step p { font-size: 18px; line-height: 1.55; color: var(--muted) }

.biglist { flex: 1 1 420px; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.biglist li { font-weight: 300; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.25; border-bottom: 1px solid var(--rule); padding: 10px 0; display: flex; justify-content: space-between; gap: 16px }
.biglist em { font-style: normal; font-size: 15px; color: var(--muted); align-self: center }

/* Rejilla de proyectos */
.page-head { padding: clamp(48px, 7vw, 96px) 0 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px }
.pgrid { display: grid; gap: 32px }
.pgrid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
.pgrid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 40px; padding: 24px 0 var(--space) }
.pcard a { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 12px }
.pc-img { position: relative; aspect-ratio: 16 / 10; background: var(--tile); border-radius: 4px; overflow: hidden }
.pc-img img, .pc-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.pc-img img { transition: transform .6s ease }
.pc-vid { opacity: 0; transition: opacity .3s }
.pcard.vid-on .pc-vid { opacity: 1 }
.pcard a:hover .pc-img img { transform: scale(1.02) }
.pc-meta { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap }
.pc-meta h3 { font-weight: 400; font-size: 22px; transition: color .2s }
.pgrid.two .pc-meta h3 { font-size: 24px }
.pc-meta span { font-size: 15px; color: var(--muted) }
.pcard a:hover h3 { color: var(--hover) }
.pc-credits { font-size: 16px; line-height: 1.6; color: var(--muted) }
.ph { aspect-ratio: 16 / 10; background: var(--tile); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--muted) }

/* Página de proyecto: vídeo grande y créditos, nada más */
.proj { padding: clamp(32px, 5vw, 64px) 0 var(--space) }
.proj-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: clamp(28px, 4vw, 48px) }
.proj-head .back { flex-basis: 100%; color: var(--muted); text-decoration: none; font-size: 16px }
.proj-head .back:hover { color: var(--hover) }
.proj-head h1 { flex: 1 1 auto; font-size: clamp(36px, 5vw, 68px) }
.proj-year { font-size: 18px; color: var(--muted) }
.proj-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden }
.proj-video iframe, .proj-video video, .proj-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover }
.proj-video video { object-fit: contain }
.proj-video .ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 }
.credits { padding-top: clamp(40px, 6vw, 72px) }
.credits dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 40px; border-top: 1px solid var(--rule) }
.credits dl > div { border-bottom: 1px solid var(--rule); padding: 14px 0 }
.credits dt { font-size: 14px; color: var(--muted) }
.credits dd { margin: 4px 0 0; font-size: 20px }
.proj-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(56px, 8vw, 96px); padding-top: 24px; border-top: 1px solid var(--ink) }
.proj-nav a { text-decoration: none; display: flex; flex-direction: column; gap: 4px; max-width: 48% }
.proj-nav a.next { text-align: right; margin-left: auto }
.proj-nav span { font-size: 15px; color: var(--muted) }
.proj-nav b { font-weight: 400; font-size: 22px }

/* Nosotros */
.rich.big { align-self: end }
.chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px }
.chain li { flex: 1 1 160px; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 28px; border: 1.5px solid var(--rule) }
.chain li.on { border-color: var(--ink); background: var(--ink); color: var(--bg) }
.c-k { font-size: 22px }
.c-v { font-size: 15px; opacity: .75 }
.wide-photo { margin: 0; aspect-ratio: 21 / 9; background: var(--tile); border-radius: 4px; overflow: hidden }
.wide-photo img { width: 100%; height: 100%; object-fit: cover }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 40px }
.member { display: flex; flex-direction: column; gap: 6px; font-size: 16px }
.m-img { aspect-ratio: 4 / 5; background: var(--tile); border-radius: 4px; overflow: hidden; margin-bottom: 10px }
.m-img img { width: 100%; height: 100%; object-fit: cover }
.member h3 { font-weight: 400; font-size: 22px }
.m-role, .m-bio { color: var(--muted) }

/* Contacto */
.contact { border-top: 1px solid var(--rule); padding-top: var(--space) }
.cdata { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; font-size: 20px }
.cdata a { min-height: 44px; display: inline-flex; align-items: center }
.cdata span { color: var(--muted); font-size: 17px; margin-top: 8px }
.cform { display: flex; flex-direction: column; gap: 22px; flex: 1 1 420px }
.f { display: flex; flex-direction: column; gap: 8px }
.f span { font-size: 15px; color: var(--muted) }
.f input, .f textarea { font: inherit; font-size: 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; min-height: 44px; resize: vertical; width: 100% }
.f.invalid input, .f.invalid textarea { border-bottom-color: #b3261e }
.f.invalid span { color: #b3261e }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr } }
.cform .btn-pill { align-self: flex-start }
.fnote { font-size: 14px; color: var(--muted) }
.form-msg { font-size: 17px; color: var(--ink) }
.form-msg.err { color: #b3261e }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* 404 */
.nf { padding: clamp(64px, 10vw, 140px) 0 var(--space); display: flex; flex-direction: column; align-items: flex-start; gap: 24px }

/* Pie */
.foot { border-top: 1px solid var(--rule); padding: 40px 0 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; font-size: 16px }
.foot-brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px }
.foot-brand .logo { width: 72px }
.foot-brand p { color: var(--muted) }
.foot-cols { display: flex; flex-wrap: wrap; gap: 24px 56px }
.foot-cols div { display: flex; flex-direction: column; gap: 6px }
.foot-cols a { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center }
.foot-cols span { color: var(--muted) }
.foot-copy { flex-basis: 100%; font-size: 14px; color: var(--muted) }