/* Layout específico que complementa los tokens y estilos de theme.json. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a {
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.cl-header {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--cacao) 18%, transparent);
	padding-block: 0.65rem;
}

.cl-header__inner {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
}

.cl-branding {
	align-items: center;
	display: flex;
	justify-self: start;
}

.cl-site-title,
.cl-footer .wp-block-site-title {
	font-size: clamp(1.65rem, 1.45rem + 0.65vw, 2.15rem);
	letter-spacing: -0.03em;
	line-height: 1;
}

.cl-site-title {
	text-transform: lowercase;
}

.cl-site-title a,
.cl-footer .wp-block-site-title a {
	text-decoration: none;
}

.cl-primary-nav .wp-block-navigation-item__content {
	padding: 0.3rem 0;
}

.cl-primary-nav {
	justify-self: end;
}

.cl-primary-nav .wp-block-navigation__container {
	column-gap: clamp(1.5rem, 1rem + 1.8vw, 3rem);
}

.cl-primary-nav .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

.cl-primary-nav .wp-block-navigation-item__label {
	border-bottom: 1px solid transparent;
}

.cl-primary-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.cl-primary-nav .current-menu-item .wp-block-navigation-item__label {
	border-bottom-color: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--marfil) !important;
	color: var(--wp--preset--color--cacao) !important;
	padding: 1.5rem;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cacao);
}

.cl-kicker {
	font-family: var(--wp--preset--font-family--funcional);
	font-weight: 650;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cl-home > * {
	margin-block-start: 0;
}

.cl-hero {
	background: var(--wp--preset--color--marfil);
	color: var(--wp--preset--color--cacao);
	display: grid;
	isolation: isolate;
	min-height: clamp(34rem, 135vw, 42rem);
	overflow: hidden;
	padding-inline: 0;
	position: relative;
}

.cl-hero::after {
	background: linear-gradient(
		180deg,
		rgba(246, 241, 231, 0.99) 0%,
		rgba(246, 241, 231, 0.97) 52%,
		rgba(246, 241, 231, 0.58) 72%,
		rgba(246, 241, 231, 0) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.cl-hero__media {
	height: 100%;
	inset: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.cl-hero__media img {
	height: 100%;
	object-fit: cover;
	object-position: 56% 72%;
	width: 100%;
}

.cl-hero__content {
	align-content: start;
	display: grid;
	padding: clamp(2.75rem, 10vw, 4rem) clamp(1.25rem, 0.7rem + 2vw, 3rem);
	position: relative;
	width: 100%;
	z-index: 2;
}

.cl-hero__panel {
	margin-inline: auto;
	max-width: 24rem;
}

.cl-hero__panel > * {
	margin-inline: auto !important;
}

.cl-hero__brand {
	font-family: "Bodoni 72", Didot, "Bodoni MT", var(--wp--preset--font-family--editorial);
	font-size: clamp(2.9rem, 14vw, 5.25rem);
	font-weight: 400;
	letter-spacing: -0.05em;
	line-height: 0.9;
	margin-block: 0 0.22em;
	position: relative;
	text-transform: lowercase;
	white-space: nowrap;
	word-spacing: 0.68em;
}

.cl-hero__brand::after {
	background: url("../images/mark-casa-loma.svg") center / contain no-repeat;
	content: "";
	height: 0.72em;
	left: 50%;
	position: absolute;
	top: 48%;
	transform: translate(-50%, -50%);
	width: 0.52em;
}

.cl-hero__rule {
	border: 0;
	height: 1px;
	margin-block: 0.75rem 0.9rem !important;
	overflow: visible;
	position: relative;
	width: 3.5rem !important;
}

.cl-hero__rule::after {
	background: var(--wp--preset--color--cuero);
	content: "";
	height: 0.3rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 0.3rem;
}

.cl-hero .cl-kicker {
	color: var(--wp--preset--color--cuero);
	font-size: clamp(0.625rem, 0.58rem + 0.18vw, 0.75rem);
	letter-spacing: 0.16em;
	margin-block: 0;
}

.cl-hero__panel .wp-block-buttons {
	margin-top: 1.25rem;
}

.cl-hero__description {
	font-size: clamp(0.75rem, 0.7rem + 0.18vw, 0.875rem);
	line-height: 1.5;
	margin-inline: auto;
	max-width: 20rem;
}

.cl-hero__cta .wp-block-button__link {
	background: var(--wp--preset--color--cuero);
	border-color: var(--wp--preset--color--cuero);
	color: var(--wp--preset--color--marfil);
	font-size: 0.625rem;
	letter-spacing: 0.11em;
	padding: 0.65rem 1.45rem;
}

.cl-hero__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--cacao);
	border-color: var(--wp--preset--color--cacao);
	text-decoration: none;
}

.cl-page {
	padding-block: var(--wp--preset--spacing--xl);
}

.cl-story__columns,
.cl-product__columns {
	gap: 0;
	margin-bottom: 0;
}

.cl-story__media,
.cl-product__media {
	height: 100%;
	margin: 0;
	min-height: clamp(15rem, 60vw, 20rem);
}

.cl-story__media img,
.cl-product__media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cl-story__copy,
.cl-product__copy {
	font-family: var(--wp--preset--font-family--funcional);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 5vw, 4.5rem);
}

.cl-story__copy h2,
.cl-product__copy h2,
.cl-editorial__heading h2 {
	margin-block: 0.35em;
}

.cl-story__copy h2,
.cl-product__copy h2,
.cl-editorial__heading h2 {
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(2rem, 1.55rem + 1.1vw, 2.75rem);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin-block: 0.35em 0.55em;
}

.cl-section-rule {
	margin-inline: 0 !important;
	margin-block: 0.85rem 1.1rem !important;
	width: 3rem !important;
}

.cl-story__copy > .has-lead-font-size,
.cl-product__copy > .has-lead-font-size {
	font-family: var(--wp--preset--font-family--funcional);
	font-size: clamp(1.125rem, 1.04rem + 0.3vw, 1.3rem);
	line-height: 1.55;
}

.cl-story__copy > p:not(.cl-kicker):not(.has-lead-font-size),
.cl-product__copy > p:not(.cl-kicker):not(.has-lead-font-size) {
	font-family: var(--wp--preset--font-family--funcional);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
}

.cl-story__copy > *,
.cl-product__copy > * {
	max-width: 32rem;
}

.cl-text-link a {
	color: var(--wp--preset--color--cuero);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cl-text-link a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.55rem;
}

.cl-product {
	border-top: 1px solid var(--wp--preset--color--arena);
}

.cl-values {
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--cacao) 18%, transparent);
	padding-block: 0;
}

.cl-values__grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 80rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0.75rem, 2vw, 1.5rem);
}

.cl-values__grid > .wp-block-column {
	padding: clamp(1rem, 2vw, 1.5rem) var(--wp--preset--spacing--sm);
}

.cl-values__grid > .wp-block-column:nth-child(even) {
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--cacao) 18%, transparent);
}

.cl-values__grid > .wp-block-column:nth-child(n + 3) {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--cacao) 18%, transparent);
}

.cl-values__icon {
	margin: 0 auto 0.65rem;
	width: 2.75rem;
}

.cl-values__icon img {
	height: auto;
	width: 100%;
}

.cl-values__grid h3 {
	font-family: var(--wp--preset--font-family--funcional);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	margin-block: 0.45rem;
	text-transform: uppercase;
}

.cl-values__grid p {
	font-size: 0.8125rem;
	line-height: 1.45;
	margin: 0 auto;
	max-width: 16rem;
}

.cl-values-gallery {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 80rem;
	padding-inline: 0.25rem;
}

.cl-values-gallery__image {
	aspect-ratio: 7 / 5;
	margin: 0;
	overflow: hidden;
}

.cl-values-gallery__image:last-child {
	aspect-ratio: 14 / 5;
	grid-column: 1 / -1;
}

.cl-values-gallery__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cl-editorial {
	padding-top: clamp(2.25rem, 4vw, 3.5rem);
}

.cl-editorial__heading {
	margin: 0 auto var(--wp--preset--spacing--md);
	max-width: 80rem;
	padding-inline: clamp(1.25rem, 0.7rem + 2vw, 3rem);
}

.cl-editorial__grid {
	display: grid;
	gap: 0.35rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 80rem;
	padding-inline: clamp(0.35rem, 0.2rem + 0.6vw, 0.75rem);
}

.cl-editorial__image {
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
}

.cl-editorial__image--landscape {
	aspect-ratio: 2 / 1;
	grid-column: 1 / -1;
}

.cl-editorial__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cl-page {
	min-height: 55vh;
}

.cl-page__header {
	margin-bottom: var(--wp--preset--spacing--lg);
}

.cl-loop-item {
	border-top: 1px solid var(--wp--preset--color--arena);
	padding-block: var(--wp--preset--spacing--md);
}

.cl-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--cuero);
	margin: 0;
	padding-block: 1.25rem;
}

.cl-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--cuero);
}

.cl-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--h-3);
}

.cl-footer {
	padding-block: clamp(2.25rem, 4vw, 3.5rem) var(--wp--preset--spacing--sm);
}

.cl-footer__inner {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: 1fr;
}

.cl-footer a {
	color: inherit;
}

.cl-footer__nav h2 {
	font-family: var(--wp--preset--font-family--funcional);
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cl-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-footer__nav li + li {
	margin-top: 0.4rem;
}

.cl-footer__legal {
	border-top: 1px solid rgba(246, 241, 231, 0.22);
	margin-top: var(--wp--preset--spacing--lg);
	padding-top: var(--wp--preset--spacing--sm);
}

@media (min-width: 481px) {
	.cl-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 782px) {
	.cl-hero {
		height: clamp(28rem, 35vw, 34rem);
		min-height: 0;
	}

	.cl-hero::after {
		background: linear-gradient(
			90deg,
			rgba(246, 241, 231, 0.99) 0%,
			rgba(246, 241, 231, 0.99) 30%,
			rgba(246, 241, 231, 0.92) 39%,
			rgba(246, 241, 231, 0.48) 49%,
			rgba(246, 241, 231, 0) 60%
		);
	}

	.cl-hero__media {
		inset: 0 0 0 auto;
		width: 64%;
	}

	.cl-hero__content {
		align-content: center;
		height: 100%;
		padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 4vw, 5rem);
		width: 48%;
	}

	.cl-hero__panel {
		max-width: 23rem;
	}

	.cl-hero__brand {
		font-size: clamp(4rem, 5.3vw, 5.8rem);
	}

	.cl-story__media,
	.cl-product__media {
		min-height: clamp(17rem, 22vw, 22rem);
	}

	.cl-values__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cl-values__grid > .wp-block-column {
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--cacao) 20%, transparent);
		border-top: 0;
	}

	.cl-values__grid > .wp-block-column:first-child {
		border-left: 0;
	}

	.cl-values-gallery {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.cl-values-gallery__image:last-child {
		aspect-ratio: 7 / 5;
		grid-column: auto;
	}

	.cl-editorial__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cl-editorial__image--landscape {
		grid-column: span 2;
	}

	.cl-footer__inner {
		grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr));
	}

	.cl-footer__brand {
		grid-column: auto;
	}
}

@media (min-width: 1100px) {
	.cl-header {
		padding-block: 0.55rem;
	}

	.cl-header__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.cl-header__inner::after {
		content: "";
		grid-column: 3;
		grid-row: 1;
	}

	.cl-branding {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.cl-primary-nav {
		font-size: 0.75rem;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}
}

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