:root {
	--ink: oklch(15% 0.013 62);
	--espresso: oklch(22% 0.026 58);
	--mink: oklch(34% 0.03 62);
	--stone: oklch(91% 0.014 78);
	--vellum: oklch(97% 0.007 78);
	--pearl: oklch(99% 0.003 78);
	--champagne: oklch(77% 0.07 84);
	--bronze: oklch(51% 0.055 68);
	--line: oklch(80% 0.016 78);
	--white: oklch(100% 0 0);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--vellum);
	color: var(--ink);
	font-family: "Manrope", Arial, sans-serif;
	margin: 0;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

.topbar {
	align-items: center;
	background: color-mix(in oklch, var(--ink) 88%, transparent);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid oklch(100% 0 0 / 0.12);
	display: flex;
	justify-content: space-between;
	left: 0;
	padding: 18px clamp(18px, 5vw, 76px);
	position: fixed;
	right: 0;
	top: 0;
	z-index: 50;
}

.signature {
	align-items: center;
	color: var(--white);
	display: inline-flex;
	gap: 12px;
	text-decoration: none;
}

.signature-mark {
	align-items: center;
	background: oklch(82% 0.035 80);
	border: 1px solid color-mix(in oklch, var(--champagne) 78%, white);
	display: inline-flex;
	height: 48px;
	justify-content: center;
	overflow: hidden;
	padding: 3px;
	width: 48px;
}

.signature-mark img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.signature-text strong,
.signature-text small {
	display: block;
	line-height: 1;
}

.signature-text strong {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.45rem;
	font-weight: 500;
}

.signature-text small {
	color: oklch(86% 0.013 78);
	font-size: 0.72rem;
	margin-top: 7px;
}

.nav {
	align-items: center;
	display: flex;
	gap: clamp(16px, 2.8vw, 38px);
}

.nav a {
	color: oklch(89% 0.012 78);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.nav a:hover {
	color: var(--champagne);
}

.hero {
	background: var(--ink);
	display: grid;
	grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1fr);
	min-height: 100vh;
	position: relative;
}

.hero-copy {
	align-self: center;
	color: var(--white);
	padding: 150px clamp(24px, 5vw, 76px) 96px;
	position: relative;
	z-index: 3;
}

.micro,
.section-label {
	color: var(--bronze);
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	margin: 0 0 22px;
	text-transform: uppercase;
}

h1,
h2,
h3 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.hero h1 {
	color: var(--white);
	font-size: clamp(4rem, 8.3vw, 8rem);
	line-height: 0.86;
	margin: 0;
	max-width: 9.5ch;
}

.hero-copy p:not(.micro) {
	color: oklch(88% 0.013 78);
	font-size: clamp(1.05rem, 1.7vw, 1.22rem);
	line-height: 1.78;
	margin: 30px 0 0;
	max-width: 620px;
	text-wrap: pretty;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.button {
	align-items: center;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 900;
	justify-content: center;
	letter-spacing: 0.11em;
	min-height: 54px;
	padding: 16px 24px;
	text-decoration: none;
	text-transform: uppercase;
}

.button-primary {
	background: var(--champagne);
	color: var(--ink);
}

.button-primary:hover {
	background: oklch(83% 0.075 84);
}

.button-ghost {
	border: 1px solid oklch(100% 0 0 / 0.36);
	color: var(--white);
}

.button-whatsapp {
	background: #25d366;
	color: #ffffff;
	border: none;
	cursor: pointer;
	gap: 8px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.button-whatsapp:hover {
	background: #20ba5a;
	transform: translateY(-1px);
}

.button-whatsapp svg,
.whatsapp-float svg {
	fill: currentColor;
	height: 20px;
	width: 20px;
}

.direct-wa-link {
	color: var(--mink);
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	margin-top: 12px;
	text-align: center;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.direct-wa-link:hover {
	color: var(--ink);
}

.whatsapp-float {
	align-items: center;
	background: #25d366;
	border-radius: 50px;
	bottom: 24px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	color: #ffffff;
	display: flex;
	font-size: 0.8rem;
	font-weight: 800;
	gap: 8px;
	letter-spacing: 0.06em;
	padding: 12px 20px;
	position: fixed;
	right: 24px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.25s ease;
	z-index: 99;
}

.whatsapp-float:hover {
	background: #20ba5a;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	transform: translateY(-3px);
}


.hero-figure {
	height: 100%;
	margin: 0;
	min-height: 100vh;
	position: relative;
}

.hero-figure::before {
	background: linear-gradient(90deg, var(--ink), oklch(15% 0.013 62 / 0.2) 28%, transparent 55%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.hero-figure img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.hero-note {
	background: var(--vellum);
	bottom: clamp(24px, 5vw, 72px);
	color: var(--ink);
	max-width: 390px;
	padding: 28px;
	position: absolute;
	right: clamp(24px, 5vw, 72px);
	z-index: 4;
}

.hero-note span {
	color: var(--bronze);
	display: block;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.hero-note strong {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.95rem;
	font-weight: 500;
	line-height: 1.05;
}

.hero-note p {
	color: var(--mink);
	line-height: 1.6;
	margin: 16px 0 0;
}

.atelier,
.work,
.materials,
.process,
.location,
.faq,
.contact {
	padding: clamp(82px, 11vw, 152px) clamp(22px, 6vw, 92px);
}

.atelier {
	background: var(--vellum);
}

.atelier-grid {
	display: grid;
	gap: clamp(34px, 8vw, 120px);
	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
}

h2 {
	color: var(--ink);
	font-size: clamp(2.7rem, 5.8vw, 6.2rem);
	line-height: 0.95;
	margin: 0;
}

.atelier-copy {
	border-left: 1px solid var(--line);
	display: grid;
	gap: 24px;
	padding-left: clamp(24px, 4vw, 48px);
}

.atelier-copy p,
.work-head p,
.work-card p,
.material-board p,
.process-row p,
.contact-card p,
.contact-card li {
	color: var(--mink);
	font-size: 1.02rem;
	line-height: 1.75;
	margin: 0;
	text-wrap: pretty;
}

.statement {
	align-items: center;
	background:
		linear-gradient(90deg, oklch(15% 0.013 62 / 0.84), oklch(15% 0.013 62 / 0.52)),
		url("assets/pietra/detalle-cubierta.jpg") center / cover;
	color: var(--white);
	display: flex;
	min-height: 54vh;
	padding: clamp(70px, 10vw, 132px) clamp(22px, 6vw, 92px);
}

.statement p {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(3rem, 7vw, 7.2rem);
	line-height: 0.9;
	margin: 0;
	max-width: 12ch;
}

.work {
	background: var(--ink);
	color: var(--white);
}

.work-head {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.5fr);
	margin-bottom: 42px;
}

.work h2,
.work .section-label {
	color: var(--white);
}

.work .section-label {
	opacity: 0.72;
}

.work-gallery {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-card {
	background: oklch(24% 0.02 62);
	min-height: 560px;
	overflow: hidden;
	position: relative;
}

.work-card-wide {
	grid-column: span 2;
}

.work-card-soft {
	grid-column: span 2;
}

.work-card img {
	height: 100%;
	object-fit: cover;
	position: absolute;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
}

.work-card:hover img {
	transform: scale(1.05);
}

.work-card::after {
	background: linear-gradient(180deg, transparent 20%, oklch(8% 0.012 62 / 0.86) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.work-card div {
	bottom: 0;
	padding: 30px;
	position: absolute;
	z-index: 2;
}

.work-card span {
	color: var(--champagne);
	display: block;
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.work-card h3 {
	color: var(--white);
	font-size: clamp(2rem, 3.4vw, 3.8rem);
	line-height: 0.95;
	margin: 0 0 14px;
}

.work-card p {
	color: oklch(89% 0.013 78);
	max-width: 440px;
}

.materials {
	background: var(--stone);
	display: grid;
	gap: clamp(36px, 7vw, 88px);
	grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1fr);
}

.material-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.material-board article {
	background: var(--vellum);
	border: 1px solid var(--line);
	margin: -1px 0 0 -1px;
	padding: clamp(24px, 4vw, 38px);
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.material-board article:hover {
	background: var(--pearl);
	border-color: var(--bronze);
	transform: translateY(-3px);
}

.material-board span {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(2rem, 3vw, 3.3rem);
	line-height: 1;
	margin-bottom: 18px;
}

.process {
	background: var(--vellum);
}

.location {
	background: var(--stone);
	border-top: 1px solid var(--line);
}

.location-container {
	display: grid;
	gap: clamp(34px, 7vw, 88px);
	grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
}

.location-info h2 {
	margin-bottom: 24px;
}

.location-details {
	display: grid;
	gap: 20px;
	list-style: none;
	margin: 32px 0;
	padding: 0;
}

.location-details li {
	align-items: flex-start;
	display: flex;
	gap: 14px;
}

.location-details svg {
	color: var(--bronze);
	flex-shrink: 0;
	margin-top: 3px;
}

.location-details strong {
	color: var(--ink);
	display: block;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.location-details span,
.location-details a {
	color: var(--mink);
	font-size: 0.98rem;
	line-height: 1.5;
}

.location-map {
	border: 1px solid var(--line);
	min-height: 420px;
	overflow: hidden;
	position: relative;
}

.location-map iframe {
	border: 0;
	height: 100%;
	min-height: 420px;
	width: 100%;
}

.faq {
	background: var(--vellum);
	border-top: 1px solid var(--line);
}

.faq-container {
	display: grid;
	gap: clamp(34px, 7vw, 88px);
	grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1fr);
}

.faq-head h2 {
	margin-bottom: 20px;
}

.faq-list {
	display: grid;
	gap: 16px;
}

.faq-item {
	background: var(--pearl);
	border: 1px solid var(--line);
	padding: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
	border-color: var(--bronze);
}

.faq-question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 500;
	justify-content: space-between;
	list-style: none;
	padding: 22px 26px;
	user-select: none;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question svg {
	color: var(--bronze);
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.faq-item[open] .faq-question svg {
	transform: rotate(180deg);
}

.faq-answer {
	border-top: 1px solid color-mix(in oklch, var(--line) 50%, transparent);
	padding: 20px 26px 26px;
}

.faq-answer p {
	color: var(--mink);
	font-size: 0.98rem;
	line-height: 1.7;
	margin: 0;
}


.process-row {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-row div {
	border-top: 1px solid var(--line);
	padding-top: 28px;
}

.process-row span {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(2.1rem, 3vw, 3.3rem);
	line-height: 1;
	margin-bottom: 18px;
}

.contact {
	background: var(--espresso);
	color: var(--white);
	display: grid;
	gap: clamp(34px, 7vw, 88px);
	grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
}

.contact h2,
.contact .section-label {
	color: var(--white);
}

.contact-card p {
	color: oklch(89% 0.013 78);
	margin-top: 26px;
	max-width: 700px;
}

.contact-card ul {
	display: grid;
	gap: 16px;
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}

.contact-card li {
	color: oklch(88% 0.013 78);
}

.contact-card strong {
	color: var(--champagne);
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.contact-form {
	background: var(--vellum);
	color: var(--ink);
	display: grid;
	gap: 16px;
	padding: clamp(24px, 4vw, 40px);
}

.contact-form label {
	display: grid;
	font-size: 0.82rem;
	font-weight: 900;
	gap: 8px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	background: var(--pearl);
	border: 1px solid var(--line);
	color: var(--ink);
	font: inherit;
	letter-spacing: 0;
	min-height: 50px;
	padding: 13px 14px;
	text-transform: none;
}

.contact-form textarea {
	resize: vertical;
}

.footer {
	align-items: center;
	background: var(--ink);
	border-top: 1px solid oklch(100% 0 0 / 0.12);
	color: oklch(86% 0.012 78);
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: space-between;
	padding: 34px clamp(22px, 6vw, 92px);
}

.footer p {
	margin: 0;
	max-width: 600px;
}

.footer a:not(.signature) {
	color: var(--champagne);
	font-weight: 900;
	text-decoration: none;
}

@media (max-width: 1080px) {
	.hero {
		display: block;
	}

	.hero-copy {
		background: linear-gradient(90deg, oklch(15% 0.013 62 / 0.94), oklch(15% 0.013 62 / 0.68), transparent);
		inset: 0;
		min-height: 100vh;
		position: absolute;
		width: 100%;
	}

	.hero-figure {
		min-height: 100vh;
	}

	.hero-note {
		left: 24px;
		right: 24px;
	}

	.atelier-grid,
	.work-head,
	.materials,
	.location-container,
	.faq-container,
	.contact {
		grid-template-columns: 1fr;
	}

	.work-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.topbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
		padding: 14px 16px;
	}

	.nav {
		flex-wrap: wrap;
		gap: 10px 16px;
	}

	.nav a {
		font-size: 0.72rem;
	}

	.signature-text small {
		display: none;
	}

	.hero-copy {
		padding: 156px 18px 300px;
	}

	.hero h1 {
		font-size: clamp(3.4rem, 18vw, 5rem);
	}

	.hero-actions,
	.button {
		width: 100%;
	}

	.hero-note {
		bottom: 18px;
		left: 18px;
		padding: 22px;
		right: 18px;
	}

	.atelier,
	.work,
	.materials,
	.process,
	.contact {
		padding-left: 18px;
		padding-right: 18px;
	}

	.atelier-copy {
		border-left: 0;
		padding-left: 0;
	}

	.statement {
		min-height: 48vh;
		padding-left: 18px;
		padding-right: 18px;
	}

	.work-gallery,
	.material-board,
	.process-row {
		grid-template-columns: 1fr;
	}

	.work-card,
	.work-card-wide,
	.work-card-soft {
		grid-column: auto;
		min-height: 470px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}