/*
 * Cielo de Margaritas — UX/UI refinement layer v0.12
 * Mobile-first editorial rhythm, compact navigation, process constellation,
 * cinematic +18 scene, integrated product chapters and quieter transitions.
 */

/* --------------------------------------------------------------------------
   Global rhythm
   -------------------------------------------------------------------------- */
.cielo-section {
	padding-block: var(--cielo-section-normal);
}

.cielo-story {
	padding-top: var(--cielo-section-wide);
	padding-bottom: var(--cielo-section-normal);
}

.cielo-process-section {
	padding-top: var(--cielo-section-normal);
	padding-bottom: var(--cielo-section-wide);
}

.cielo-aging {
	padding-block: var(--cielo-section-wide);
}

.cielo-products {
	padding-top: var(--cielo-section-wide);
	padding-bottom: var(--cielo-section-wide);
}

.cielo-who {
	padding-block: var(--cielo-section-wide);
}

.cielo-contact {
	padding-top: var(--cielo-section-wide);
	padding-bottom: var(--cielo-section-normal);
}

.cielo-section-title {
	max-width: 13ch;
	font-size: clamp(2.15rem, 8.6vw, 3.55rem);
	line-height: .98;
	letter-spacing: -.035em;
}

.cielo-section-lead {
	max-width: var(--cielo-copy-narrow);
	font-size: clamp(1.02rem, 2.9vw, 1.22rem) !important;
	line-height: 1.62 !important;
	text-wrap: pretty;
}

/* One meaningful editorial note, not a stack of white cards. */
.cielo-note-list {
	max-width: var(--cielo-copy-narrow);
	margin-top: 1.65rem;
	gap: 0;
}
.cielo-note-list li {
	padding: .15rem 0 .15rem 1.65rem;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: rgba(47,45,74,.72);
	font-size: .98rem !important;
	line-height: 1.62 !important;
}
.cielo-note-list li::before {
	left: 0;
	top: .2rem;
}
.cielo-story .cielo-note-list li:nth-child(n+2),
.cielo-who .cielo-note-list li:nth-child(n+2) {
	display: none;
}
.cielo-story__quote {
	display: none;
}

/* --------------------------------------------------------------------------
   Header — less chrome, more usable viewport
   -------------------------------------------------------------------------- */
.cielo-site-header {
	top: .45rem;
}
.admin-bar .cielo-site-header {
	top: calc(.45rem + 46px);
}
.cielo-site-header::before {
	inset: -.05rem var(--cielo-gutter) auto;
	height: 4.35rem;
	filter: blur(10px);
	opacity: .48;
}
.cielo-site-header__shell {
	min-height: 3.95rem;
	padding: .48rem .62rem .48rem .76rem;
	border-radius: 1.45rem;
	backdrop-filter: blur(11px) saturate(1.04);
	-webkit-backdrop-filter: blur(11px) saturate(1.04);
	box-shadow: 0 .6rem 1.8rem rgba(47,45,74,.08), inset 0 1px 0 rgba(255,255,255,.58);
}
.cielo-site-header__brand {
	width: 9.65rem;
	height: 2.55rem;
}
.cielo-site-header__isologo {
	width: 2.45rem !important;
	height: 2.45rem !important;
}
.cielo-nav-toggle {
	width: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	box-shadow: 0 .35rem 1.1rem rgba(47,45,74,.08), inset 0 1px 0 rgba(255,255,255,.86);
}
.cielo-site-header.is-compact .cielo-site-header__shell {
	min-height: 3.55rem;
	padding: .34rem .5rem .34rem .62rem;
	border-radius: 1.25rem;
}
.cielo-site-header.is-compact .cielo-site-header__brand {
	width: 2.45rem;
	height: 2.45rem;
}
.cielo-nav {
	top: calc(.45rem + 4.15rem);
}
.admin-bar .cielo-nav {
	top: calc(.45rem + 4.15rem + 46px);
}

/* --------------------------------------------------------------------------
   Hero → editorial photographic bridge
   -------------------------------------------------------------------------- */
.cielo-brand-scene {
	padding: clamp(.8rem, 2.5vw, 1.5rem) var(--cielo-gutter) var(--cielo-section-normal);
	background: linear-gradient(180deg, #6466a8 0 9%, #f8f2ed 9% 100%);
}
.cielo-brand-scene__inner {
	width: min(100%, var(--cielo-shell));
	margin-inline: auto;
	display: grid;
	gap: clamp(1.35rem, 5vw, 2.6rem);
	align-items: end;
}
.cielo-brand-scene__media {
	width: 100%;
	margin: 0;
	aspect-ratio: 2 / 1;
	border-radius: var(--cielo-radius-photo);
	border: 0;
	box-shadow: 0 1.2rem 3rem rgba(47,45,74,.10);
}
.cielo-brand-scene__media::after {
	background: linear-gradient(180deg, transparent 76%, rgba(47,45,74,.08));
}
.cielo-brand-scene__media img {
	object-fit: contain;
	object-position: center;
	transform: none;
	background: #ece9e4;
}
.cielo-brand-scene__copy {
	max-width: 33rem;
	padding-inline: .15rem;
}
.cielo-brand-scene__eyebrow {
	margin: 0 0 .55rem !important;
	color: var(--cielo-violet);
	font-size: .72rem !important;
	font-weight: 750;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cielo-brand-scene__title {
	margin: 0 0 .65rem !important;
	font-family: var(--cielo-font-display);
	font-size: clamp(2rem, 8.2vw, 3.35rem);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.035em;
}
.cielo-brand-scene__text {
	margin: 0 !important;
	color: rgba(47,45,74,.72);
	font-size: clamp(1rem, 2.8vw, 1.15rem) !important;
	line-height: 1.62 !important;
}
.cielo-brand-scene__caption {
	display: none;
}

/* --------------------------------------------------------------------------
   Story — editorial photo composition, less card language
   -------------------------------------------------------------------------- */
.cielo-story__copy {
	max-width: none;
}
.cielo-story-media-slot--celina {
	margin-top: 2.2rem;
}
.cielo-story-archive {
	width: min(100%, 31rem);
	max-width: none;
	margin-top: 0;
	grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
	gap: .55rem;
	align-items: start;
}
.cielo-story-archive figure:first-child {
	z-index: 2;
	transform: translateY(.7rem) rotate(-.45deg);
}
.cielo-story-archive figure:nth-child(2) {
	z-index: 1;
	transform: translate(-.6rem,2.7rem) rotate(.75deg);
}
.cielo-story-archive__image {
	border-radius: 1.15rem;
	box-shadow: 0 .9rem 2rem rgba(47,45,74,.09);
}
.cielo-story-archive__caption {
	grid-column: 1 / -1;
	margin: 2.75rem 0 0 .15rem !important;
	color: rgba(47,45,74,.58);
	font-size: .78rem !important;
	line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------
   Process — constellation path instead of six tall cards
   -------------------------------------------------------------------------- */
.cielo-process-path {
	counter-reset: cielo-process;
	gap: 0;
	margin-top: clamp(2.2rem, 7vw, 3.4rem);
	padding-left: .15rem;
}
.cielo-process-path::before {
	left: 1.75rem;
	top: 1.75rem;
	bottom: 1.75rem;
	width: 1px;
	background: linear-gradient(to bottom, rgba(95,96,163,.08), rgba(95,96,163,.34) 18%, rgba(230,164,196,.28) 72%, rgba(95,96,163,.08));
	transform: none;
	opacity: 1;
}
.cielo-process-node {
	counter-increment: cielo-process;
	grid-template-columns: 3.5rem minmax(0,1fr);
	gap: 1rem;
	align-items: center;
	align-content: center;
	min-height: 0;
	padding: .85rem 0 1.05rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
	overflow: visible;
}
.cielo-process-node::before,
.cielo-process-node::after {
	display: none;
}
.cielo-process-node__visual {
	min-height: 0;
	padding: 0;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid rgba(95,96,163,.13);
	border-radius: 50%;
	background: color-mix(in srgb, var(--cielo-cream-soft) 86%, white);
	box-shadow: 0 .45rem 1.2rem rgba(47,45,74,.06), inset 0 1px 0 rgba(255,255,255,.82);
}
.cielo-process-node__visual::before {
	width: 4.2rem;
	height: 4.2rem;
	filter: blur(8px);
	opacity: .55;
}
.cielo-process-node__visual::after {
	width: 4.05rem;
	height: 4.05rem;
	border-style: solid;
	border-color: rgba(95,96,163,.10);
	animation: none;
}
.cielo-process-node__icon {
	width: 2.65rem;
	height: 2.65rem;
	filter: none;
}
.cielo-process-node__content {
	min-width: 0;
	padding-right: .15rem;
}
.cielo-process-node__content::before {
	content: counter(cielo-process, decimal-leading-zero);
	display: block;
	margin-bottom: .22rem;
	color: rgba(95,96,163,.48);
	font-size: .67rem;
	font-weight: 750;
	letter-spacing: .12em;
}
.cielo-process-node h3 {
	margin-bottom: .18rem !important;
	font-size: clamp(1.45rem, 6vw, 1.9rem);
}
.cielo-process-node p {
	max-width: 28rem;
	margin: 0 0 .3rem !important;
	font-size: .91rem !important;
	line-height: 1.48 !important;
}
.cielo-process-more {
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--cielo-font-body);
	font-size: .75rem;
	cursor: pointer;
}
.cielo-process-more::after {
	content: "↗";
}
@media (hover:hover) and (pointer:fine) {
	.cielo-process-node:hover {
		transform: none;
		box-shadow: none;
	}
	.cielo-process-node:hover .cielo-process-node__icon {
		transform: translateY(-1px) scale(1.025);
	}
	.cielo-process-node:hover h3 {
		color: var(--cielo-violet);
	}
}

/* --------------------------------------------------------------------------
   +18 months — one dominant frame, details as quiet windows
   -------------------------------------------------------------------------- */
.cielo-aging__inner {
	gap: clamp(2.2rem, 7vw, 4rem);
}
.cielo-aging__copy {
	max-width: 30rem;
}
.cielo-aging__number {
	font-size: clamp(5.8rem, 27vw, 9rem);
	line-height: .72;
}
.cielo-aging__label {
	margin-top: 1.1rem !important;
	font-size: clamp(1.05rem, 4vw, 1.28rem) !important;
}
.cielo-aging__poem {
	margin-top: 1.35rem !important;
	font-family: var(--cielo-font-body);
	font-size: clamp(.98rem, 3vw, 1.12rem) !important;
	line-height: 1.62 !important;
	color: rgba(47,45,74,.66);
}
.cielo-aging__visual {
	gap: .65rem;
}
.cielo-aging__frame {
	min-height: 0;
	padding: 0;
	border-radius: var(--cielo-radius-photo);
	background: transparent;
	box-shadow: 0 1.35rem 3rem rgba(47,45,74,.10);
	overflow: hidden;
}
.cielo-aging__frame::before {
	display: none;
}
.cielo-aging__main {
	min-height: 0;
	aspect-ratio: 4 / 5;
	border-radius: inherit;
	object-fit: cover;
}
.cielo-aging__cards {
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: .65rem;
}
.cielo-aging__card {
	padding: 0;
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 .7rem 1.8rem rgba(47,45,74,.07);
	overflow: hidden;
}
.cielo-aging__card img,
.cielo-aging__card:first-child img,
.cielo-aging__card:last-child img {
	aspect-ratio: 16 / 10;
	border-radius: inherit;
	object-fit: cover;
	transform: none;
}

/* --------------------------------------------------------------------------
   Product chapters — image + typography, not image + white card
   -------------------------------------------------------------------------- */
.cielo-product-showcase {
	gap: clamp(4.5rem, 14vw, 8rem);
	margin-top: clamp(2.8rem, 8vw, 5rem);
}
.cielo-showcase-product {
	container-type: inline-size;
	gap: 1.05rem;
}
.cielo-product-gallery {
	gap: .62rem;
}
.cielo-product-gallery__stage {
	aspect-ratio: 4 / 5;
	border-radius: var(--cielo-radius-photo);
	box-shadow: 0 1.1rem 2.8rem rgba(47,45,74,.09);
}
.cielo-product-gallery__image {
	transform: scale(1.008);
	transition: opacity .72s var(--cielo-ease), transform 3.6s var(--cielo-ease-soft);
}
.cielo-product-gallery__thumbs {
	gap: .45rem;
}
.cielo-product-gallery__thumb {
	border-radius: .75rem;
	box-shadow: none;
}
.cielo-showcase-product__copy {
	padding: 1.15rem .1rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.cielo-showcase-product__copy::before {
	right: .1rem;
	top: 1rem;
	font-size: 2rem;
	opacity: .72;
}
.cielo-showcase-product__ornament {
	display: none;
}
.cielo-showcase-product__kicker {
	margin-bottom: .45rem !important;
	font-size: .68rem !important;
}
.cielo-showcase-product__copy h3 {
	max-width: 9ch;
	margin-bottom: .7rem !important;
	font-size: clamp(2.4rem, 11vw, 4.15rem);
}
.cielo-showcase-product__summary {
	max-width: 34rem;
	font-size: clamp(.98rem, 3.3vw, 1.11rem) !important;
	line-height: 1.62 !important;
}
.cielo-showcase-product__details {
	max-width: 34rem;
	margin-top: .9rem;
	font-size: .94rem;
}

/* --------------------------------------------------------------------------
   Who we are — photograph carries more of the story
   -------------------------------------------------------------------------- */
.cielo-who__grid {
	gap: clamp(2rem, 7vw, 4rem);
}
.cielo-team-photo {
	max-width: 43rem;
	margin-top: 2rem;
	padding: 0;
	border-radius: var(--cielo-radius-photo);
	background: transparent;
	box-shadow: 0 1.2rem 2.8rem rgba(47,45,74,.09);
	overflow: hidden;
}
.cielo-team-photo img {
	aspect-ratio: 5 / 4;
	border-radius: inherit;
}
.cielo-team-photo figcaption {
	margin: .65rem .15rem 0;
	color: rgba(47,45,74,.58);
	font-size: .78rem;
	line-height: 1.45;
}
.cielo-landhaus-seal {
	width: min(34vw, 7.2rem);
	margin: 0 auto;
	opacity: .66;
}

/* --------------------------------------------------------------------------
   Contact — final return to sky, form integrated rather than floating card
   -------------------------------------------------------------------------- */
.cielo-contact {
	background:
		radial-gradient(circle at 16% 20%, rgba(230,164,196,.18), transparent 20rem),
		radial-gradient(circle at 84% 58%, rgba(180,212,182,.11), transparent 24rem),
		linear-gradient(165deg, #5f60a3, #48497f);
}
.cielo-contact::before {
	opacity: .20;
}
.cielo-contact-form {
	gap: 1rem;
	margin-top: 2.1rem;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.cielo-contact-form label {
	font-size: .77rem;
	letter-spacing: .035em;
}
.cielo-contact-form input,
.cielo-contact-form textarea {
	border-color: rgba(255,255,255,.22);
	border-radius: .9rem;
	background: rgba(255,255,255,.09);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.cielo-contact-form input:focus,
.cielo-contact-form textarea:focus {
	border-color: rgba(255,255,255,.48);
	background: rgba(255,255,255,.13);
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
	.cielo-section-title {
		font-size: clamp(2.65rem, 5.9vw, 4rem);
	}
	.cielo-brand-scene {
		background: linear-gradient(180deg,#6466a8 0 13%,#f8f2ed 13% 100%);
	}
	.cielo-brand-scene__media {
		aspect-ratio: 2 / 1;
	}
	.cielo-brand-scene__inner {
		gap: 2rem;
	}
	.cielo-story__copy {
		display: grid;
		grid-template-columns: minmax(0,.9fr) minmax(19rem,1.1fr);
		column-gap: clamp(2.5rem, 7vw, 5rem);
		align-items: center;
	}
	.cielo-story__copy > :not(.cielo-story-media-slot) {
		grid-column: 1;
	}
	.cielo-story-media-slot--celina {
		grid-column: 2;
		grid-row: 1 / span 5;
		margin-top: 0;
	}
	.cielo-process-path {
		grid-template-columns: repeat(2,minmax(0,1fr));
		column-gap: clamp(2rem, 6vw, 4rem);
		row-gap: .5rem;
		padding-left: 0;
	}
	.cielo-process-path::before {
		left: 50%;
		top: 2rem;
		bottom: 2rem;
		opacity: .42;
	}
	.cielo-process-node {
		grid-template-columns: 3.75rem minmax(0,1fr);
		padding-block: 1.05rem;
	}
	.cielo-process-node:nth-child(even) {
		transform: translateY(1.2rem);
	}
	.cielo-aging__main {
		aspect-ratio: 16 / 10;
	}
	.cielo-product-gallery__stage {
		aspect-ratio: 5 / 4;
	}
}

/* --------------------------------------------------------------------------
   Desktop editorial compositions
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
	.cielo-site-header {
		top: .65rem;
	}
	.admin-bar .cielo-site-header {
		top: calc(.65rem + 32px);
	}
	.cielo-site-header::before {
		height: 4rem;
	}
	.cielo-site-header__shell {
		min-height: 3.75rem;
		padding: .42rem .75rem;
		border-radius: 1.35rem;
	}
	.cielo-site-header__brand {
		width: 9.8rem;
		height: 2.45rem;
	}
	.cielo-site-header.is-compact .cielo-site-header__shell {
		min-height: 3.45rem;
	}
	.cielo-site-header.is-compact .cielo-site-header__brand {
		width: 2.35rem;
		height: 2.35rem;
	}
	.cielo-nav {
		gap: 1.15rem;
	}
	.cielo-nav a span {
		font-size: .84rem;
	}

	.cielo-brand-scene {
		padding-top: 1.4rem;
		background: linear-gradient(180deg,#6466a8 0 17%,#f8f2ed 17% 100%);
	}
	.cielo-brand-scene__inner {
		grid-template-columns: minmax(0,1.55fr) minmax(18rem,.65fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}
	.cielo-brand-scene__media {
		aspect-ratio: 2 / 1;
	}
	.cielo-brand-scene__copy {
		padding-bottom: clamp(.6rem, 3vw, 2rem);
	}

	.cielo-process-path {
		grid-template-columns: repeat(3,minmax(0,1fr));
		gap: 1.5rem clamp(2rem, 4vw, 4rem);
		padding-top: 1rem;
	}
	.cielo-process-path::before {
		left: 7%;
		right: 7%;
		top: 50%;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(to right, transparent, rgba(95,96,163,.24), rgba(230,164,196,.22), rgba(95,96,163,.20), transparent);
	}
	.cielo-process-node {
		grid-template-columns: 4.15rem minmax(0,1fr);
		padding: 1.1rem .35rem;
	}
	.cielo-process-node:nth-child(2),
	.cielo-process-node:nth-child(5) {
		transform: translateY(1.75rem);
	}
	.cielo-process-node:nth-child(3),
	.cielo-process-node:nth-child(4) {
		transform: translateY(-.5rem);
	}
	.cielo-process-node__visual {
		width: 4.15rem;
		height: 4.15rem;
	}
	.cielo-process-node__icon {
		width: 3.1rem;
		height: 3.1rem;
	}

	.cielo-aging__inner {
		grid-template-columns: minmax(19rem,.72fr) minmax(0,1.28fr);
		gap: clamp(3rem, 7vw, 6rem);
	}
	.cielo-aging__visual {
		min-height: 34rem;
		padding: 0 4.3rem 2.2rem 0;
	}
	.cielo-aging__frame {
		width: 86%;
		justify-self: end;
	}
	.cielo-aging__main {
		aspect-ratio: 5 / 4;
	}
	.cielo-aging__cards {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: 8.6rem 8.6rem;
		gap: .7rem;
	}
	.cielo-aging__card:nth-child(1) {
		transform: translateY(-1.25rem) rotate(-1deg);
	}
	.cielo-aging__card:nth-child(2) {
		transform: translateY(.35rem) rotate(1.2deg);
	}
	.cielo-aging__card img,
	.cielo-aging__card:first-child img,
	.cielo-aging__card:last-child img {
		aspect-ratio: 4 / 5;
	}

	.cielo-showcase-product {
		grid-template-columns: minmax(0,1.18fr) minmax(19rem,.72fr);
		gap: clamp(2.5rem, 5vw, 5.5rem);
	}
	.cielo-showcase-product:nth-child(even) {
		grid-template-columns: minmax(19rem,.72fr) minmax(0,1.18fr);
	}
	.cielo-showcase-product:nth-child(even) .cielo-showcase-product__gallery {
		order: 2;
	}
	.cielo-product-gallery__stage {
		aspect-ratio: 5 / 4;
	}
	.cielo-product-gallery__thumbs {
		position: static;
		width: min(68%, 24rem);
		padding: 0;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.cielo-showcase-product__copy,
	.cielo-showcase-product:nth-child(even) .cielo-showcase-product__copy {
		margin-inline: 0;
		align-self: center;
		padding: 1rem 0;
	}
	.cielo-showcase-product__copy::before {
		position: static;
		display: block;
		margin-bottom: 2rem;
		font-size: 2.7rem;
	}

	.cielo-who__grid {
		grid-template-columns: minmax(0,1fr) auto;
		align-items: end;
	}
	.cielo-landhaus-seal {
		width: 6.4rem;
		margin: 0 0 .4rem;
	}

	.cielo-contact .cielo-section__inner {
		grid-template-columns: minmax(0,.8fr) minmax(24rem,1.05fr);
		gap: clamp(4rem, 8vw, 8rem);
	}
}

/* Very wide screens: keep reading width intentional. */
@media (min-width: 90rem) {
	.cielo-section-title { font-size: 4.3rem; }
	.cielo-brand-scene__inner { gap: 6rem; }
}

/* Motion/accessibility */
@media (prefers-reduced-motion: reduce) {
	.cielo-process-node,
	.cielo-process-node:nth-child(n),
	.cielo-story-archive figure:nth-child(n),
	.cielo-aging__card:nth-child(n) {
		transform: none !important;
	}
	.cielo-product-gallery__image {
		transition: opacity .2s linear;
	}
}