/*
 * La Bitácora — canonical site-shell components.
 *
 * Component-owned appearance and spacing live here. Templates compose these
 * semantic classes; they do not restyle individual instances with utilities.
 * Tokens come from WindPress/Paper. This unlayered stylesheet intentionally
 * outranks Tailwind's layered utilities when both are present during migration.
 */

/* Provisional fluid implementation tokens. Keep local until Paper approval. */
:root {
	--spacing-page-gutter-fluid: clamp(1rem, 5vw, 2.5rem);
	--spacing-page-section-fluid: clamp(2rem, 6vw, 4rem);
	--size-brand-mark-fluid: clamp(5.5rem, 14vw, 6.5rem);
	--text-brand-title-mobile-fluid: clamp(1.25rem, 6vw, 2rem);
	--text-brand-support-mobile-fluid: clamp(0.9375rem, 3.8vw, 1.0625rem);
	--text-brand-title-desktop-fluid: clamp(1.75rem, 2.2vw, 2.125rem);
	--text-brand-support-desktop-fluid: clamp(0.9375rem, 1.2vw, 1.0625rem);
	--spacing-footer-padding-end-fluid: clamp(1.5rem, 4vw, 2rem);
	--spacing-footer-stack-gap-fluid: clamp(2rem, 5vw, 3rem);
	--spacing-footer-grid-gap-fluid: clamp(1.5rem, 4vw, 2rem);
	--spacing-footer-contact-gap-fluid: clamp(0.75rem, 2.5vw, 1rem);
	--spacing-footer-contact-logo-gap-fluid: clamp(1.75rem, 9vw, 2.5rem);
	--spacing-footer-story-gap-fluid: clamp(1.25rem, 3vw, 1.5625rem);
	--spacing-footer-logo-row-gap-fluid: clamp(0.625rem, 1.5vw, 0.6875rem);
}

/* Shared layout SSOTs.
   ACSS-style model: a section spans the full viewport and carries the
   background + block padding; a container inside it owns the content
   width (max-width, auto margins, gutters). */
.signo-section {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding-block: var(--spacing-page-section-fluid);
}

.signo-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: var(--spacing-page-gutter-fluid);
}

.signo-frame {
	box-sizing: border-box;
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--spacing-page-gutter-fluid);
}

.signo-frame--shell { max-width: 80rem; }
.signo-frame--page { max-width: var(--container-page); }
.signo-frame--reading { max-width: var(--container-reading); }
.signo-page-section { padding-block: var(--spacing-page-section-fluid); }

/* Reusable controls. */
.signo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--spacing-button-height);
	padding-inline: var(--spacing-button-padding-x);
	border: 0;
	border-radius: var(--radius-button);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-navigation);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out;
}

.signo-button--primary {
	background-color: var(--color-button-primary);
	color: var(--color-on-button-primary);
}

.signo-button--primary:hover {
	background-color: var(--color-button-primary-hover);
	color: var(--color-on-button-primary);
}

.signo-button--primary:active {
	background-color: var(--color-button-primary-active);
	color: var(--color-on-button-primary);
}

.signo-button:focus-visible,
.signo-icon-button:focus-visible,
.signo-nav-link:focus-visible,
.signo-language-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-button[aria-disabled="true"],
.signo-button:disabled {
	background-color: var(--color-disabled-background);
	color: var(--color-disabled-text);
	cursor: not-allowed;
}

.signo-button--responsive { display: none; }
.signo-button--drawer {
	width: 100%;
	margin-top: var(--spacing-20);
}

.signo-icon-button {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--spacing-control-minimum);
	height: var(--spacing-control-minimum);
	padding: 0;
	border: 1px solid var(--color-border-decorative);
	border-radius: var(--radius-button);
	background-color: var(--color-background-page);
	color: var(--color-text-default);
	cursor: pointer;
}

.signo-nav-link {
	color: var(--color-text-default);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-navigation);
	text-decoration: none;
	transition: color 180ms ease-out;
}

.signo-nav-link:hover { color: var(--color-action-primary); }

.signo-nav-link--drawer {
	display: block;
	width: 100%;
	padding-block: var(--spacing-16);
	border-bottom: 1px solid var(--color-border-decorative);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: var(--font-weight-600);
	line-height: 2.125rem;
}

.site-language-switcher,
.signo-language-link {
	display: flex;
	align-items: center;
}

.site-language-switcher { gap: var(--spacing-8); }
.site-language-switcher--expanded { gap: var(--spacing-24); }

.site-language-switcher__code {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-navigation);
}

.site-language-switcher__code--current { color: var(--color-text-default); }

.signo-language-link {
	gap: var(--spacing-8);
	color: var(--color-text-default);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: var(--font-weight-600);
	line-height: 1rem;
	text-underline-offset: 2px;
	transition: color 180ms ease-out;
}

.signo-language-link--expanded {
	font-size: var(--text-navigation);
	line-height: var(--leading-navigation);
}

.signo-language-link:hover { color: var(--color-action-primary); }

/* Site header. */
.site-header,
.site-footer {
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: anywhere;
}

.site-header--transparent {
	position: relative;
	z-index: 20;
}

.site-header__mobile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-12);
	padding-top: var(--spacing-24);
	padding-bottom: var(--spacing-20);
	background-color: var(--color-background-page);
}

.site-header--transparent .site-header__mobile {
	position: relative;
	z-index: 10;
	background-color: transparent;
}

.site-header__brand-mark { display: block; }
.site-header__brand-home--mobile { display: block; line-height: 0; }

.site-header__brand-mark--mobile {
	width: var(--size-brand-mark-fluid);
	height: var(--size-brand-mark-fluid);
}

.site-header__brand-copy {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.site-header__brand-copy--mobile {
	align-items: center;
	width: 100%;
	max-width: 100%;
}

.site-header__brand-copy--expanded { align-items: flex-start; }

.site-header__brand-title,
.site-header__brand-support { margin: 0; }

.site-header__brand-title {
	font-family: var(--font-display);
	font-weight: var(--font-weight-700);
}

.site-header__brand-support { font-family: var(--font-body); }

.site-header__brand-title--mobile {
	max-width: 100%;
	color: var(--color-text-default);
	font-size: var(--text-brand-title-mobile-fluid);
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
}

.site-header__brand-support--mobile {
	max-width: 100%;
	color: var(--color-text-muted);
	font-size: var(--text-brand-support-mobile-fluid);
	line-height: 1.5;
	text-align: center;
}

.site-header--transparent .site-header__brand-title--mobile,
.site-header--transparent .site-header__brand-support--mobile {
	color: var(--color-text-inverse);
}

.site-header__expanded { display: none; }
.site-header__expanded-inner {
	display: flex;
	flex-direction: column;
	padding-top: 1.75rem;
	padding-bottom: var(--spacing-20);
}

.site-header__brand--expanded {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-32);
}

.site-header__brand-home {
	flex: 0 0 auto;
	text-decoration: none;
}

.site-header__brand-mark--expanded {
	width: 6.5rem;
	height: 6.5rem;
}

.site-header__brand-title--expanded {
	color: var(--color-text-default);
	font-size: var(--text-brand-title-desktop-fluid);
	line-height: 1.15;
	white-space: nowrap;
}

.site-header__brand-support--expanded {
	color: var(--color-text-muted);
	font-size: var(--text-brand-support-desktop-fluid);
	line-height: 1.4;
}

/* Transparent variant renders over photography at every width: inverse text. */
.site-header--transparent .site-header__brand-title--expanded,
.site-header--transparent .site-header__brand-support--expanded {
	color: var(--color-text-inverse);
}

.site-header--transparent .site-header__expanded .signo-nav-link {
	color: var(--color-text-inverse);
}

.site-header--transparent .site-header__expanded .signo-nav-link:hover {
	color: var(--color-brand-secondary-300);
}

.site-header--transparent .site-language-switcher__code {
	color: var(--color-brand-secondary-300);
}

.site-header--transparent .site-language-switcher__code--current {
	color: var(--color-text-inverse);
}

.site-header__divider {
	height: 1px;
	margin-top: var(--spacing-24);
	background-color: var(--color-border-decorative);
}

.site-header__nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--spacing-20);
}

.site-header__languages,
.site-header__primary-nav,
.site-header__compact-actions,
.site-header__compact-nav,
.site-header__compact-languages {
	display: flex;
	align-items: center;
}

.site-header__languages { gap: var(--spacing-24); }
.site-header__primary-nav { gap: var(--spacing-40); }

.site-header__compact {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	display: none;
	box-sizing: border-box;
	border-bottom: 1px solid var(--color-border-decorative);
	background-color: var(--color-background-page);
	transform: translateY(-100%);
	transition: transform 260ms ease-out;
	will-change: transform;
}

.site-header__compact:not([hidden]) { transform: translateY(0); }

.site-header__compact-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.0625rem;
}

.site-header__compact-brand {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--spacing-12);
	text-decoration: none;
}

.site-header__compact-mark {
	width: 3.25rem;
	height: 2.75rem;
}

.site-header__compact-name {
	color: var(--color-text-default);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: var(--font-weight-700);
	line-height: 1.75rem;
}

.site-header__compact-actions { gap: var(--spacing-24); }
.site-header__compact-nav { gap: var(--spacing-32); }
.site-header__compact-divider {
	width: 1px;
	height: var(--spacing-24);
	background-color: var(--color-border-decorative);
}
.site-header__compact-languages { gap: var(--spacing-12); }

/* Mobile/tablet nav bar. */
.site-nav-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	box-sizing: border-box;
	display: block;
	width: 100%;
	border-top: 1px solid var(--color-border-decorative);
	border-bottom: 1px solid var(--color-border-decorative);
	background-color: var(--color-background-page);
}

.site-nav-bar__inner,
.site-nav-bar__actions,
.site-nav-bar__languages {
	display: flex;
	align-items: center;
}

.site-nav-bar__inner {
	justify-content: space-between;
	height: 4.25rem;
}

.site-nav-bar__actions,
.site-nav-bar__languages { gap: var(--spacing-12); }

.site-nav-bar--transparent {
	border-color: transparent;
	background-color: transparent;
	transition: background-color 260ms ease-out, border-color 260ms ease-out;
}

.site-nav-bar--transparent.is-stuck {
	border-color: var(--color-border-decorative);
	background-color: var(--color-background-page);
}

.site-nav-bar--transparent .signo-language-link { color: var(--color-text-inverse); }
.site-nav-bar--transparent.is-stuck .signo-language-link { color: var(--color-text-default); }
.site-nav-bar--transparent:not(.is-stuck) .signo-language-link:hover { color: var(--color-text-inverse); }

/* Mobile navigation drawer. */
.site-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
	will-change: transform;
}

.site-mobile-drawer.is-open {
	visibility: visible;
	transform: translateX(0);
	transition-delay: 0s;
}

.site-mobile-drawer__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--spacing-20);
	background-color: var(--color-background-page);
}

.site-mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--spacing-16);
	border-bottom: 1px solid var(--color-border-decorative);
}

.site-mobile-drawer__title {
	margin: 0;
	color: var(--color-text-default);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--font-weight-700);
	line-height: 1.875rem;
}

.site-mobile-drawer__nav {
	display: flex;
	flex-direction: column;
	padding-block: var(--spacing-32);
}

.site-mobile-drawer__footer { margin-top: auto; }
.site-mobile-drawer__contact {
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.5rem;
}

.site-mobile-drawer__contact span,
.site-mobile-drawer__contact a {
	display: block;
	color: var(--color-text-secondary);
}

.site-mobile-drawer__contact a:hover { color: var(--color-action-primary); }

.site-mobile-drawer__legal {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--spacing-20);
	padding-top: var(--spacing-16);
	border-top: 1px solid var(--color-border-decorative);
}

.site-mobile-drawer__legal-link {
	padding-inline: var(--spacing-4);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	line-height: 1rem;
	text-align: center;
}

.site-mobile-drawer__legal-link:hover { color: var(--color-action-primary); }
.site-mobile-drawer__legal-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

body.site-mobile-menu-open { overflow: hidden; }

/* Photo hero. */
.signo-hero {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin-top: calc(-1 * var(--transparent-header-h, 0px));
	overflow: hidden;
}

.signo-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.signo-hero__fade {
	position: absolute;
	inset-inline: 0;
}

.signo-hero__fade--top {
	top: 0;
	height: 45%;
	background: linear-gradient(to bottom, var(--color-background-inverse), transparent);
}

.signo-hero__fade--bottom {
	bottom: 0;
	height: 32%;
	background: linear-gradient(to bottom, transparent, var(--color-background-page));
}

/* The hero container is the standard content container; the copy is a
   normal flex child, centered in the space above the bottom spacer. */
.signo-hero__container {
	position: relative;
	z-index: 10;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.signo-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-16);
}

.signo-hero__eyebrow,
.signo-hero__title { margin: 0; color: var(--color-text-inverse); }

.signo-hero__eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-brand-support-mobile-fluid);
	line-height: 1.5;
}

.signo-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 5vw, 3rem);
	font-weight: var(--font-weight-700);
	line-height: 1.1;
}

.signo-hero__bottom-space {
	width: 100%;
	height: 10dvh;
}

/* Story section (Home "Por qué La Bitácora").
   Page-owned Gutenberg content on the Inicio page: a core/group with the
   signo-story class wraps image, title and copy. Mobile: full-bleed image
   above the centered title, copy below. sm+: image floats left and copy
   wraps along it (shape-outside when the image carries an alpha channel,
   rectangular float otherwise). */
.signo-story {
	box-sizing: border-box;
	width: 100%;
}

/* Mobile: flex column reorders the full-bleed image above the title. */
.signo-story {
	display: flex;
	flex-direction: column;
}

.signo-story__title {
	margin: 0 0 var(--spacing-heading-gap);
	text-align: center;
}

.signo-story__media {
	order: -1;
	box-sizing: border-box;
	margin: 0 0 var(--spacing-24);
	margin-inline: calc(-1 * var(--spacing-page-gutter-fluid));
}

.signo-story__media img {
	display: block;
	width: 100%;
	height: auto;
}

.signo-story__copy {
	/* .signo-measure + .signo-flow provide the measure and rhythm. */
}

/* Copy inherits the body role and .signo-flow rhythm; this context owns its colour. */
.signo-story p:not(.signo-story__title) {
	color: var(--color-text-secondary);
}

/* sm to lg: the sketch floats and the copy wraps around it. */
@media (min-width: 40rem) and (max-width: 63.24rem) {
	.signo-story { display: block; }

	.signo-story__media {
		float: left;
		width: min(60%, 25rem);
		margin: 0 var(--spacing-24) var(--spacing-16) 0;
		shape-outside: var(--story-shape, none);
		shape-margin: var(--spacing-16);
	}
}

/* lg and up: two stable columns — sketch left, copy at its own measure right.
   Stops the float-wrap raggedness once the container exceeds the 75ch measure. */
@media (min-width: 63.25rem) {
	.signo-story {
		display: grid;
		grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
		gap: var(--spacing-grid-gap);
		align-items: start;
	}

	.signo-story__title {
		grid-column: 1 / -1;
	}

	.signo-story__media {
		order: 0; /* reset the mobile image-first reordering */
		width: auto;
		margin: 0;
	}

	.signo-story__copy {
		grid-column: 2;
	}
}

/* Mobile story collapse: first two paragraphs + "Leer más…" toggle. */
.signo-story__more-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.signo-story__more {
	display: inline-block;
	margin-block-start: var(--spacing-8);
	color: var(--color-action-primary);
	font-weight: var(--font-weight-600);
	cursor: pointer;
}

.signo-story__more:hover { text-decoration: underline; }

.signo-story__more-toggle:focus-visible + .signo-story__more {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-story__more-toggle:checked ~ .signo-story__more { display: none; }

/* Collapsed by default below the medium breakpoint; the 48rem block restores
   the copy with display:contents on desktop. */
.signo-story__rest { display: none; }

.signo-story__more-toggle:checked ~ .signo-story__rest { display: block; }

@media (min-width: 48rem) {
	.signo-story__more { display: none; }
	.signo-story__rest { display: contents; }
}

/* Home carta chapter.
   Mobile and medium widths expose one accessible tab panel at a time. From
   large upward all three editorial rows are visible, matching the accepted
   desktop chapter while retaining direct category actions beside the media. */
.signo-home-carta {
	box-sizing: border-box;
	width: 100%;
	overflow: clip;
	background: var(--color-background-page);
}

.signo-home-carta__intro,
.signo-home-carta__coda {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-24);
	padding: var(--spacing-page-section) var(--spacing-page-gutter);
	text-align: center;
}

.signo-home-carta__title,
.signo-home-carta__intro-copy,
.signo-home-carta__label,
.signo-home-carta__heading,
.signo-home-carta__body,
.signo-home-carta__hours,
.signo-home-carta__note,
.signo-home-carta__coda-title,
.signo-home-carta__coda-copy {
	margin: 0;
}

.signo-home-carta__title {
	color: var(--color-text-default);
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-h2);
}

.signo-home-carta__intro-copy {
	max-width: var(--container-reading);
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: var(--text-intro);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-intro);
}

.signo-home-carta__tabs {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	min-height: calc(var(--spacing-control-minimum) + (2 * var(--spacing-20)));
	padding-inline: var(--spacing-page-gutter);
	background: var(--color-background-inverse);
}

.signo-home-carta__tab {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--spacing-control-minimum);
	padding-inline: var(--spacing-8);
	border: 0;
	border-radius: var(--radius-control);
	background: var(--color-elevation-subtle);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-500);
	line-height: var(--leading-navigation);
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out;
}

.signo-home-carta__tab.is-active {
	background: var(--color-button-primary);
	color: var(--color-on-button-primary);
	font-weight: var(--font-weight-600);
}

.signo-home-carta__tab:hover:not(.is-active) {
	background: var(--color-elevation-overlay);
}

.signo-home-carta__tab:focus-visible,
.signo-home-carta__editorial-link:focus-visible {
	outline: 0.125rem solid var(--color-focus);
	outline-offset: 0.125rem;
}

.signo-home-carta__panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	overflow: clip;
	background: var(--color-background-subtle);
}

.signo-home-carta__panel:not(.is-active) { display: none; }

.signo-home-carta__panel::before {
	position: absolute;
	z-index: 0;
	display: block;
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.signo-home-carta__panel--vermut::before {
	top: clamp(5.5rem, 27vw, 7rem);
	left: clamp(-1rem, 2vw, 0.5rem);
	width: clamp(20rem, 98vw, 24rem);
	aspect-ratio: 0.774;
	background-image: url('../images/home-carta/ornament-vermut.webp');
	opacity: 0.11;
	transform: rotate(20.87deg);
}

.signo-home-carta__panel--tapas::before {
	top: clamp(5rem, 24vw, 6rem);
	left: clamp(-4rem, -10vw, -3rem);
	width: clamp(22rem, 104vw, 25.5rem);
	aspect-ratio: 0.818;
	background-image: url('../images/home-carta/ornament-tapas.webp');
	opacity: 0.15;
	transform: rotate(-10.47deg);
}

.signo-home-carta__panel--cocina::before {
	top: clamp(-2rem, -5vw, -1.5rem);
	left: 0;
	width: clamp(28rem, 133vw, 32.75rem);
	aspect-ratio: 0.863;
	background-image: url('../images/home-carta/ornament-cocina.webp');
	opacity: 0.13;
	transform: rotate(9.88deg);
}

.signo-home-carta__panel-inner {
	position: relative;
	z-index: 1;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--spacing-16);
	width: 100%;
	max-width: 72.5rem;
	margin-inline: auto;
	padding: var(--spacing-section-internal) var(--spacing-page-gutter);
}

.signo-home-carta__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
	min-width: 0;
}

.signo-home-carta__label {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-label);
	letter-spacing: var(--tracking-label);
}

.signo-home-carta__heading,
.signo-home-carta__coda-title {
	color: var(--color-text-default);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-h3);
}

.signo-home-carta__body,
.signo-home-carta__coda-copy {
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-body);
}

.signo-home-carta__hours {
	color: var(--color-text-default);
	font-family: var(--font-body);
	font-size: var(--text-body-strong);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-body-strong);
}

.signo-home-carta__note {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-small);
}

.signo-home-carta__editorial-link {
	align-self: flex-start;
	max-width: 100%;
	color: var(--color-action-primary);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-navigation);
	text-decoration: none;
}

.signo-home-carta__editorial-link:hover { color: var(--color-action-primary-hover); }

.signo-home-carta__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	min-height: 16.25rem;
}

.signo-home-carta__picture {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	max-width: calc(100% - 4.5rem);
}

.signo-home-carta__image {
	display: block;
	width: 100%;
	height: auto;
}

.signo-home-carta__panel--vermut .signo-home-carta__picture { width: min(70%, 15.4375rem); }
.signo-home-carta__panel--tapas .signo-home-carta__picture { width: min(76%, 16.5rem); }
.signo-home-carta__panel--cocina .signo-home-carta__picture { width: min(68%, 15.625rem); }

.signo-home-carta__panel--tapas .signo-home-carta__image {
	transform: rotate(-6deg);
	transform-origin: center;
}

.signo-home-carta__panel--tapas .signo-home-carta__picture { bottom: var(--spacing-16); }

.signo-home-carta__card-cta {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}

.signo-home-carta__coda-title,
.signo-home-carta__coda-copy { max-width: var(--container-reading); }

@media (min-width: 48rem) and (max-width: 63.249rem) {
	.signo-home-carta__tabs {
		justify-content: center;
		padding-inline: max(var(--spacing-page-gutter), calc((100% - var(--container-page)) / 2));
	}

	.signo-home-carta__panel-inner {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(16rem, 0.92fr);
		align-items: center;
		gap: var(--spacing-32);
	}

	.signo-home-carta__media { min-height: 20rem; }
	.signo-home-carta__picture { max-width: 100%; }
	.signo-home-carta__panel--vermut .signo-home-carta__picture { width: min(100%, 19rem); }
	.signo-home-carta__panel--tapas .signo-home-carta__picture { width: min(100%, 19rem); }
	.signo-home-carta__panel--cocina .signo-home-carta__picture { width: min(100%, 18rem); }
}

@media (min-width: 63.25rem) {
	.signo-home-carta__tabs { display: none; }
	.signo-home-carta__panel,
	.signo-home-carta__panel:not(.is-active) { display: block; }
	.signo-home-carta__panel--tapas { background: var(--color-background-page); }

	.signo-home-carta__panel-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 23.5rem);
		align-items: center;
		gap: var(--spacing-grid-gap);
		max-width: 80rem;
		min-height: 28.75rem;
		padding-block: 3.125rem;
	}

	.signo-home-carta__content { max-width: 40.625rem; }
	.signo-home-carta__media { min-height: 22.5rem; }
	.signo-home-carta__picture { max-width: 100%; }

	.signo-home-carta__panel--vermut .signo-home-carta__picture {
		width: clamp(20rem, 33.36vw, 26.6875rem);
		max-width: none;
	}

	.signo-home-carta__panel--tapas .signo-home-carta__picture {
		width: clamp(20rem, 31.2vw, 24.9375rem);
		max-width: none;
	}

	.signo-home-carta__panel--cocina .signo-home-carta__picture {
		width: clamp(20rem, 28.125vw, 22.5rem);
		max-width: none;
	}

	.signo-home-carta__panel--tapas .signo-home-carta__panel-inner {
		grid-template-columns: minmax(20rem, 23.5rem) minmax(0, 1fr);
	}

	.signo-home-carta__panel--tapas .signo-home-carta__media {
		grid-column: 1;
		grid-row: 1;
	}

	.signo-home-carta__panel--tapas .signo-home-carta__content {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.signo-home-carta__panel--vermut::before {
		top: -16.375rem;
		left: auto;
		right: -11rem;
		width: 38rem;
	}

	.signo-home-carta__panel--tapas::before {
		top: 1.5rem;
		left: -16rem;
		width: 42.5rem;
	}

	.signo-home-carta__panel--cocina::before {
		top: -12.75rem;
		left: auto;
		right: -17rem;
		width: 54.875rem;
	}

	.signo-home-carta__intro,
	.signo-home-carta__coda { min-height: 20.625rem; }

	.signo-home-carta__intro { padding-block: var(--spacing-48); }
}

/* Houses + shop notice (Home).
   Producer logo wall on the inverse surface followed by the online-shop
   notice with an email capture form. Logos come from the `logo` CPT
   (display-carousel flag); the strip scrolls natively when 20 marks
   overflow one row, with faded edges instead of arrows. */
.signo-houses {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-32);
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--spacing-section-internal);
	background: var(--color-background-inverse);
	overflow: clip;
}

.signo-houses__title {
	margin: 0;
	max-width: 47.5rem;
	padding-inline: var(--spacing-page-gutter-fluid);
	color: var(--color-text-inverse);
	font-weight: var(--font-weight-500);
	text-align: center;
}

.signo-houses__strip {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--spacing-page-gutter-fluid), #000 calc(100% - var(--spacing-page-gutter-fluid)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--spacing-page-gutter-fluid), #000 calc(100% - var(--spacing-page-gutter-fluid)), transparent);
}

.signo-houses__strip::-webkit-scrollbar { display: none; }

.signo-houses__strip:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}

.signo-houses__track {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
	width: max-content;
	margin-inline: auto;
	padding-inline: var(--spacing-page-gutter-fluid);
	margin-block: 0;
	list-style: none;
}

.signo-houses__logo {
	display: block;
	width: auto;
	height: clamp(2.75rem, 6vw, 5rem);
}

.signo-houses__divider {
	flex: 0 0 auto;
	width: min(60rem, 100%);
	height: 1px;
	background: var(--color-border-decorative);
}

.signo-shop-notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-16);
	box-sizing: border-box;
	width: min(60rem, 100%);
	padding-inline: var(--spacing-page-gutter-fluid);
	text-align: center;
}

.signo-shop-notice__title {
	margin: 0;
	color: var(--color-text-inverse);
}

.signo-shop-notice__copy {
	max-width: 45rem;
	color: var(--color-text-inverse);
}

.signo-shop-notice__form {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--spacing-12);
	box-sizing: border-box;
	width: min(38.75rem, 100%);
	margin-top: var(--spacing-8);
	text-align: left;
}

.signo-shop-notice__honeypot {
	position: absolute;
	left: -62.4375rem;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.signo-shop-notice__field {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--spacing-8);
	min-width: 0;
}

.signo-shop-notice__label {
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.signo-shop-notice__input {
	box-sizing: border-box;
	width: 100%;
	height: var(--spacing-input-height);
	padding-inline: var(--spacing-input-padding);
	border: 1px solid var(--color-border-decorative);
	border-radius: var(--radius-input);
	background: var(--color-input-background);
	color: var(--color-input-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}

.signo-shop-notice__input::placeholder {
	color: var(--color-input-placeholder);
	opacity: 1;
}

.signo-shop-notice__input:focus-visible {
	outline: none;
	border-color: var(--color-input-border-focus);
	box-shadow: 0 0 0 1px var(--color-input-border-focus);
}

.signo-shop-notice__submit {
	flex: 0 0 auto;
	background: var(--color-button-utility);
	color: var(--color-on-button-utility);
}

.signo-shop-notice__submit:hover {
	background: var(--color-button-utility-hover);
	color: var(--color-on-button-utility);
}

.signo-shop-notice__submit[aria-busy="true"] {
	pointer-events: none;
	opacity: 0.7;
}

.signo-shop-notice__status {
	margin: 0;
	width: 100%;
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--text-small);
	line-height: var(--leading-small);
}

.signo-shop-notice__status.is-error { color: var(--color-brand-accent-300); }

@media (max-width: 47.999rem) {
	.signo-shop-notice__form {
		flex-direction: column;
		align-items: stretch;
	}

	.signo-shop-notice__submit { width: 100%; }
}

/* Reservation invitation (Home).
   Walk-in message beside the venue terrace photo. The photo keeps the
   mock's 2px brand-tertiary frame; the WhatsApp pill uses the platform's
   brand green as a page-scoped literal (no token equivalent). */
.signo-reserva {
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--spacing-section-internal);
	background: var(--color-background-page);
}

.signo-reserva__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-24);
}

.signo-reserva__media {
	margin: 0;
	overflow: clip;
	border: 2px solid var(--color-brand-tertiary-500);
	border-radius: var(--radius-feature);
}

.signo-reserva__photo {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 571 / 400;
	object-fit: cover;
}

.signo-reserva__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-32);
}

.signo-reserva__title {
	margin: 0;
}

.signo-reserva__text {
	max-width: 36rem;
	color: var(--color-text-secondary);
}

.signo-reserva__copy .signo-reserva__text + .signo-reserva__text { margin-top: calc(-1 * var(--spacing-8)); }

.signo-reserva__wa {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-12);
	min-block-size: var(--spacing-button-height);
	padding-block: 0;
	padding-inline: var(--spacing-button-padding-x);
	border-radius: var(--radius-pill);
	background: #25D366;
	box-shadow: 0 2px 8px #0000001A;
	color: var(--color-on-button-utility);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-600);
	line-height: 1.25rem;
	text-decoration: none;
	transition: background-color 180ms ease-out;
}

.signo-reserva__wa:hover { background: #1EB458; }

.signo-reserva__wa:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-reserva__phone {
	margin: 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-small);
}

@media (min-width: 63.25rem) {
	.signo-reserva__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-grid-gap);
	}

	.signo-reserva__copy { padding-left: clamp(2rem, 7.8vw, 6.25rem); }
}

/* Location (Home "Dónde estamos").
   Visit details beside the live map. The mock's map art placeholder is
   realized as a consent-friendly OpenStreetMap embed (no key, no Google
   cookies on page load); "Abrir indicaciones" is the universal Google
   directions link. */
.signo-location {
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--spacing-section-internal);
	background: var(--color-background-subtle);
}

.signo-location__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-24);
}

.signo-location__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-20);
	min-width: 0;
}

.signo-location__title {
	margin: 0;
}

.signo-location__intro {
	max-width: 30rem;
	color: var(--color-text-secondary);
}

.signo-location__details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	margin: 0;
	width: 100%;
}

.signo-location__detail {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.signo-location__label {
	color: var(--color-text-muted);
	font-size: var(--text-label);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.signo-location__value {
	max-width: 31rem;
}

.signo-location__hours {
	margin: 0;
	padding: 0;
	list-style: none;
}

.signo-location__phone {
	color: inherit;
	text-decoration: none;
}

.signo-location__phone:hover { text-decoration: underline; }

.signo-location__phone:focus-visible,
.signo-location__visit:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-location__actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	flex-wrap: wrap;
}

.signo-location__visit {
	color: var(--color-action-primary);
	font-family: var(--font-body);
	font-size: var(--text-navigation);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-navigation);
	text-decoration: none;
}

.signo-location__visit:hover { color: var(--color-action-primary-hover); }

.signo-location__map {
	overflow: clip;
	border: 1px solid var(--color-brand-tertiary-500);
	border-radius: var(--radius-feature);
	background: var(--color-background-surface);
}

.signo-location__map {
	position: relative;
	overflow: hidden;
}

/* Line-art overlay (Paper 6NN-0) covering the live map until tapped. */
.signo-location__map-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--color-background-subtle);
	cursor: pointer;
	overflow: hidden;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 600ms;
}

.signo-location__map-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.signo-location__map-overlay:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: -4px;
}

.signo-location__map.is-revealed .signo-location__map-overlay {
	pointer-events: none;
	transform: translateX(101%);
	visibility: hidden;
}

.signo-location__map-embed {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 571 / 340;
	border: 0;
}

@media (min-width: 63.25rem) {
	.signo-location__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-grid-gap);
	}

	.signo-location__map { order: 2; }
}

/* Blog teasers (Home "Lee también").
   Latest three posts beside the section intro. Thumbnails fall back to
   the approved Paper artwork until real featured images exist; rows are
   hairline-separated per the mock. */
.signo-blog {
	box-sizing: border-box;
	width: 100%;
	padding-block-start: var(--spacing-page-section);
	padding-block-end: var(--spacing-96);
	background: var(--color-background-page);
}

.signo-blog__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-32);
}

.signo-blog__intro {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-20);
	align-self: start;
}

.signo-blog__title {
	margin: 0;
	font-weight: var(--font-weight-500);
}

.signo-blog__copy {
	max-width: 22.5rem;
	color: var(--color-text-secondary);
}

.signo-blog__list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.signo-blog__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-24);
	padding-block: var(--spacing-24);
	border-top: 1px solid var(--color-border-decorative);
}

.signo-blog__row:last-child {
	border-bottom: 1px solid var(--color-border-decorative);
}

.signo-blog__thumb {
	flex: 0 0 auto;
	width: clamp(7.5rem, 32vw, 12.5rem);
	aspect-ratio: 5 / 3;
	height: auto;
	border-radius: var(--radius-card-media);
	object-fit: cover;
}

.signo-blog__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	min-width: 0;
}

.signo-blog__post-title {
	margin: 0;
}

.signo-blog__link {
	color: inherit;
	text-decoration: none;
}

.signo-blog__link::after {
	position: absolute;
	inset: 0;
	content: '';
}

.signo-blog__row:hover .signo-blog__link {
	color: var(--color-action-primary);
}

.signo-blog__link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-blog__excerpt {
	color: var(--color-text-secondary);
}

@media (min-width: 63.25rem) {
	.signo-blog__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--spacing-grid-gap);
	}
}

/* Site footer. */
.site-footer { background-color: var(--color-background-inverse); }
.site-footer__inner {
	display: flex;
	flex-direction: column;
	padding-top: var(--spacing-page-section-fluid);
	padding-bottom: var(--spacing-footer-padding-end-fluid);
}

.site-footer__compact {
	display: flex;
	align-items: center;
	gap: var(--spacing-footer-contact-logo-gap-fluid);
}

.site-footer__split,
.site-footer__columns { display: none; }

.site-footer__brand-mark {
	flex: 0 0 auto;
	width: 6rem;
	height: 6rem;
}

.site-footer__contact {
	display: flex;
	min-width: 0;
}

.site-footer__contact--compact {
	flex-direction: column;
	gap: var(--spacing-footer-contact-gap-fluid);
}

.site-footer__contact--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-footer-contact-gap-fluid);
}

.site-footer__brand-name {
	margin: 0;
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}

.site-footer__contact-copy {
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: clamp(0.8125rem, 2vw, 0.9375rem);
	line-height: var(--leading-small);
}

.site-footer__contact-copy--compact {
	font-size: clamp(0.6875rem, 3.6vw, 0.9375rem);
}

.site-footer__contact-copy a {
	color: var(--color-text-inverse);
	white-space: nowrap;
}

.site-footer__contact-copy a:hover { color: var(--color-brand-secondary-300); }
.site-footer__contact-copy a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.site-footer .signo-contact-venue { display: none; }
.site-footer .signo-contact-reach { margin-top: var(--spacing-footer-contact-gap-fluid); }

.site-footer__story {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-footer-story-gap-fluid);
}

.site-footer__producer-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-footer-logo-row-gap-fluid);
}

.site-footer__producer-logo {
	width: auto;
	height: clamp(1.75rem, 5vw, 2.1875rem);
	object-fit: contain;
}

.site-footer__story-title,
.site-footer__story-copy { margin: 0; max-inline-size: 75ch; color: var(--color-text-inverse); text-wrap: pretty; }

.site-footer__story-title {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--font-weight-600);
	line-height: var(--leading-h4);
}

.site-footer__story-title--wide {
	width: 100%;
	font-size: clamp(1.25rem, 1.5vw, 1.375rem);
}

.site-footer__story-copy {
	font-family: var(--font-body);
	font-size: var(--text-small);
	line-height: var(--leading-body);
}

.site-footer__blog {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-footer-grid-gap-fluid);
}

.site-footer__blog-heading {
	display: flex;
	width: 100%;
	min-width: 0;
	flex-direction: column;
	gap: var(--spacing-12);
}

.site-footer__blog-title {
	margin: 0;
	color: var(--color-text-inverse);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: var(--font-weight-600);
	line-height: 1.625rem;
}

.site-footer__blog-rule {
	width: 100%;
	height: 1px;
	background-color: var(--color-text-secondary);
}

.site-footer__post-list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-direction: column;
	gap: var(--spacing-footer-contact-gap-fluid);
}

.site-footer__post-link {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-16);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.4375rem;
}

.site-footer__post-link:hover { color: var(--color-brand-secondary-300); }
.site-footer__post-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.site-footer__post-thumb {
	flex: 0 0 auto;
	width: 4.0625rem;
	height: 4.0625rem;
	border-radius: var(--radius-button);
	object-fit: cover;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-12);
	margin-top: var(--spacing-footer-contact-gap-fluid);
	padding-top: var(--spacing-16);
	border-top: 1px solid var(--color-text-secondary);
}

.site-footer__copyright {
	margin-block: 1em;
	color: var(--color-brand-secondary-300);
	font-family: var(--font-body);
	font-size: clamp(0.75rem, 2.4vw, 1rem);
	line-height: var(--leading-small);
}

.site-footer__legal {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-24);
}

.site-footer__legal-link {
	color: var(--color-brand-secondary-300);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.4375rem;
}

.site-footer__legal-link:hover { color: var(--color-text-inverse); }
.site-footer__legal-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Quote + Google reviews section (Home inverse interlude).
   Page-owned Gutenberg content on the Inicio page inside a core/group with
   the signo-quote class; this stylesheet owns section chrome, cards and
   carousel behavior. The glass ornament overlaps the previous section. */
.signo-quote {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	margin-top: calc(clamp(12rem, 34vw, 22.5rem) * 0.47 + var(--spacing-32));
	padding-block: 70px;
	background-color: var(--color-background-inverse);
}

.signo-quote__glass {
	position: absolute;
	top: 0;
	/* Right-justified to the content margin line at every viewport:
	   gutter, plus the centered-container offset beyond 80rem, plus 2px
	   so the rotated bounding box stays exactly on the line. */
	right: calc(max(var(--spacing-page-gutter-fluid), (100% - 80rem) / 2 + var(--spacing-page-gutter-fluid)) + 2px);
	z-index: 1;
	width: clamp(12rem, 34vw, 22.5rem);
	height: auto;
	transform: translateY(-47%) rotate(1.3deg);
	filter: drop-shadow(rgba(236, 223, 221, 0.8) 1px 1px 1px);
}

.signo-quote__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	color: var(--color-text-inverse);
}

/* Sizes straight from the Paper mock (constant at every breakpoint):
   setup 27px/500 on the h4 leading, punch 49px/600 on the h2 leading. */
.signo-quote__line { display: block; }

.signo-quote__setup {
	font-size: 1.6875rem;
	line-height: 130%;
	font-weight: var(--font-weight-500);
}

.signo-quote__punch {
	padding-bottom: 30px;
	font-size: 3.0625rem;
	line-height: 112.5%;
	font-weight: var(--font-weight-600);
}

.signo-quote > .signo-container {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* Reviews carousel: 1 card mobile, 2 from sm, 3 from lg. */
.signo-reviews__track {
	display: flex;
	gap: var(--spacing-24);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.signo-reviews__track::-webkit-scrollbar { display: none; }

.signo-review-card {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	gap: var(--spacing-12);
	padding: var(--spacing-24);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	background-color: var(--color-background-surface);
	overflow: clip;
	overflow-wrap: anywhere;
	scroll-snap-align: start;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* sm and up: cards hold 22.3125rem while they overflow (peek via scroll)
   and grow to fill the whole content width once all three fit — no dead
   space, and the CTA right edge matches the last card. Placed after the
   base rule — same specificity, later order wins. */
@media (min-width: 40rem) {
	.signo-review-card {
		flex: 1 0 22.3125rem;
	}
}

.signo-review-card__header,
.signo-review-card__id,
.signo-review-card__rating {
	display: flex;
	align-items: center;
}

.signo-review-card__header {
	position: relative;
	gap: var(--spacing-12);
	width: 100%;
}

/* Google G mark at the end of the card header. */
.signo-review-card__header::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-left: auto;
	background: url("../images/google-g.svg") center / 100% 100% no-repeat;
}

.signo-review-card__avatar {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--spacing-button-height);
	height: var(--spacing-button-height);
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius-pill);
	background-color: var(--color-neutral-100);
}

.signo-review-card__avatar p {
	margin: 0;
	color: var(--color-card-heading);
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: var(--font-weight-600);
	line-height: 100%;
}

.signo-review-card__id {
	flex: 1 1 0%;
	min-width: 0;
}

.signo-review-card__id {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.signo-review-card__author {
	margin: 0;
	color: var(--color-card-heading);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--font-weight-600);
	line-height: 1.25rem;
}

.signo-review-card__date {
	margin: 0;
	color: var(--color-card-muted);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--font-weight-400);
	line-height: 1.125rem;
}

.signo-review-card__rating {
	margin: 0;
}

.signo-review-card__rating {
	gap: var(--spacing-8);
}

.signo-review-card__value {
	margin: 0;
	color: var(--color-card-heading);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--font-weight-600);
	line-height: 1.25rem;
}

.signo-review-card__stars {
	margin: 0;
	color: var(--color-brand-accent-300);
	font-size: 1rem;
	letter-spacing: 2px;
	line-height: 1;
}

.signo-review-card__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--color-card-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-body);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.signo-review-card__source {
	margin: 0;
	margin-top: auto;
	color: var(--color-card-muted);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-small);
}

.signo-reviews__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}

.signo-reviews__nav {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--spacing-12);
}

/* Arrow anchors (styled as 44px controls). */
.signo-reviews__arrow {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-control-minimum);
	height: var(--spacing-control-minimum);
	border: 1px solid rgba(255, 253, 248, 0.5);
	border-radius: var(--radius-control);
	background-color: rgba(255, 253, 248, 0.08);
	color: var(--color-text-inverse);
	font-size: 1.375rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 180ms ease-out, color 180ms ease-out;
}

.signo-reviews__arrow + .signo-reviews__arrow {
	margin-left: var(--spacing-12);
}

.signo-reviews__arrow:hover:not([aria-disabled="true"]) {
	background-color: rgba(255, 253, 248, 0.18);
	color: var(--color-text-inverse);
}

.signo-reviews__arrow:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-reviews__arrow[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.signo-quote__cta {
	margin: 0;
}

.signo-quote__cta a {
	color: var(--color-brand-accent-300);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--font-weight-600);
	line-height: 1.125rem;
	text-decoration: none;
	transition: color 180ms ease-out;
}

.signo-quote__cta a:hover {
	color: var(--color-text-inverse);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.signo-quote__cta a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (min-width: 26.875rem) {
	.site-mobile-drawer__panel { padding-inline: var(--spacing-24); }
}

@media (min-width: 40rem) {
	.site-header__mobile {
		flex-direction: row;
		justify-content: center;
		gap: var(--spacing-24);
	}

	.site-header__brand-copy--mobile { width: auto; }
	.site-header__mobile-break { display: none; }

	.site-footer__compact { display: none; }
	.site-footer__split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--spacing-footer-grid-gap-fluid);
	}

	.site-footer__bottom { margin-top: var(--spacing-page-section-fluid); }
	.site-footer__legal { display: flex; }
}

@media (min-width: 48rem) {
	.signo-button--responsive { display: inline-flex; }

	.site-footer__split { display: none; }
	.site-footer__columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--spacing-footer-grid-gap-fluid);
		row-gap: var(--spacing-footer-stack-gap-fluid);
	}

	.site-footer__story--wide { grid-column: 1 / span 2; }
}

@media (min-width: 64rem) {
	.site-header__mobile,
	.site-nav-bar,
	.site-mobile-drawer { display: none; }

	.site-header__expanded,
	.site-header__compact { display: block; }

	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
	}

	:target { scroll-margin-top: 5.5rem; }
}

@media (min-width: 80rem) {
	.site-footer__columns {
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.65fr) minmax(0, 1.9fr);
	}

	.site-footer__story--wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header__compact,
	.site-nav-bar--transparent,
	.site-mobile-drawer { transition: none; }
}

/* ====================================================================
 * SITE-DEFINITION GLOBAL CLASSES (promoted 2026-09-08)
 *
 * Canonical contract from the /style-guide/ calibration utility. These
 * classes own the recurring visual decisions; components own only
 * composition, behavior and justified named overrides. Values consume
 * the fluid --* tokens exclusively — no raw sizes here.
 * ==================================================================== */

/* --- Typography roles (elements + visual aliases) --- */

body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-weight-400);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-default);
	color: var(--color-text-default);
}

p {
	margin-block: 0;
	font-size: var(--text-body);
	line-height: var(--leading-body);
	text-wrap: pretty;
}

/* Utility: apply to short text lines (card copy, section titles) where a
   dangling last word must never happen. Balances the ragged edge. */
.signo-no-orphans { text-wrap: balance; }

h1, h2, h3, h4, h5, h6 {
	margin-block: 0;
	font-family: var(--font-display);
	font-weight: var(--font-weight-600);
	letter-spacing: var(--tracking-heading);
	color: var(--color-text-default);
	text-wrap: balance;
}

h1, .signo-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
h2, .signo-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3, .signo-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }
h4, .signo-h4 { font-size: var(--text-h4); line-height: var(--leading-h4); }
h5, .signo-h5 { font-size: var(--text-h5); line-height: var(--leading-h5); }
h6, .signo-h6 { font-size: var(--text-h6); line-height: var(--leading-h6); }

.signo-text--display { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--font-weight-600); line-height: var(--leading-display); letter-spacing: var(--tracking-heading); }
.signo-text--intro { font-size: var(--text-intro); line-height: var(--leading-intro); }
.signo-text--body-strong { font-size: var(--text-body-strong); line-height: var(--leading-body-strong); font-weight: var(--font-weight-600); }
.signo-text--small { font-size: var(--text-small); line-height: var(--leading-small); }
.signo-text--label { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--font-weight-600); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* --- Layout primitives --- */

.signo-flow > * + * { margin-block-start: var(--spacing-paragraph); }
.signo-flow > h1 + *, .signo-flow > h2 + *, .signo-flow > h3 + *,
.signo-flow > h4 + *, .signo-flow > h5 + *, .signo-flow > h6 + * { margin-block-start: var(--spacing-heading-gap); }

.signo-stack { display: flex; flex-direction: column; gap: var(--spacing-content-stack); }
.signo-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-content-stack); }

.signo-grid--2, .signo-grid--3, .signo-grid--4 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-grid-gap);
}

@media (min-width: 48rem) {
	.signo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.signo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.signo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
	.signo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.signo-measure { max-inline-size: 75ch; }

/* --- Card base (specializations add composition, never re-skin) --- */

.signo-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-card-gap);
	padding: var(--spacing-card-padding);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-card);
	background: var(--color-card);
	color: var(--color-card-text);
}

.signo-card h1, .signo-card h2, .signo-card h3,
.signo-card h4, .signo-card h5, .signo-card h6 { color: var(--color-card-heading); }

/* --- Field base --- */

.signo-field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.signo-field > label { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--font-weight-600); }
.signo-field > input,
.signo-field > select,
.signo-field > textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--spacing-input-height);
	padding: var(--spacing-8) var(--spacing-input-padding);
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-input);
	background: var(--color-input-background);
	color: var(--color-input-text);
	font: inherit;
}
.signo-field > input:focus-visible,
.signo-field > select:focus-visible,
.signo-field > textarea:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
.signo-field > .signo-field__helper { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-small); }