/* ==========================================================================
   Carta Digital — estilos públicos
   ========================================================================== */

.cdig {
	--cdig-primary: #2f5d50;
	--cdig-on-primary: #fff;
	--cdig-accent: var(--cdig-primary);
	--cdig-bg: #f3f4f3;
	--cdig-sheet: #fafafa;
	--cdig-card: #fff;
	--cdig-text: #222;
	--cdig-heading: #2b2b2b;
	--cdig-muted: #6f7472;
	--cdig-border: #e4e6e5;
	--cdig-icon: #3b4a44;
	--cdig-shadow: 0 1px 2px rgba(16, 24, 20, .06), 0 2px 10px rgba(16, 24, 20, .07);
	--cdig-shadow-hover: 0 4px 18px rgba(16, 24, 20, .13);
	--cdig-radius: 12px;
	--cdig-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cdig-sticky-top: 0px;

	font-family: var(--cdig-font);
	color: var(--cdig-text);
	background: var(--cdig-bg);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.cdig--oscuro {
	--cdig-bg: #0f1211;
	--cdig-sheet: #161a18;
	--cdig-card: #1f2421;
	--cdig-text: #eceeed;
	--cdig-heading: #f4f5f4;
	--cdig-muted: #a4aca8;
	--cdig-border: #2c322f;
	--cdig-icon: #d7ddda;
	--cdig-accent: color-mix(in srgb, var(--cdig-primary) 50%, #fff);
	--cdig-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 12px rgba(0, 0, 0, .35);
	--cdig-shadow-hover: 0 6px 22px rgba(0, 0, 0, .55);
}

.cdig *, .cdig *::before, .cdig *::after { box-sizing: border-box; }
.cdig svg { display: block; flex-shrink: 0; }
.cdig img { max-width: 100%; }
.cdig a { color: inherit; text-decoration: none; }
.cdig button { font-family: inherit; }
.cdig .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cdig-body { margin: 0; background: #f3f4f3; }
.cdig-body--oscuro { background: #0f1211; }
.admin-bar .cdig { --cdig-sticky-top: 32px; }
@media (max-width: 782px) { .admin-bar .cdig { --cdig-sticky-top: 46px; } }
@media (max-width: 600px) { .admin-bar .cdig { --cdig-sticky-top: 0px; } }

/* ---------- Encabezado ---------- */

.cdig-hero {
	position: relative;
	min-height: 220px;
	padding: 18px 24px 120px;
	background-color: #1e2a25;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .1)), var(--cdig-cover, none);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.cdig-hero:not(.cdig-hero--cover) {
	background-image: linear-gradient(135deg, color-mix(in srgb, var(--cdig-primary) 85%, #000), color-mix(in srgb, var(--cdig-primary) 55%, #000));
}

.cdig-hero__inner {
	max-width: 1360px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	flex-wrap: wrap;
}

.cdig-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cdig-brand__logo {
	width: 76px; height: 76px; flex: none;
	border-radius: 12px; overflow: hidden;
	background: #111; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	display: grid; place-items: center;
}
.cdig-brand__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cdig .cdig-brand__name {
	margin: 0; font-family: var(--cdig-font); font-size: 22px; font-weight: 700; line-height: 1.2; color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35); letter-spacing: 0;
}

.cdig-contact {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; flex-wrap: wrap;
	font-size: 12px;
}
.cdig-contact__item { display: flex; align-items: center; gap: 8px; padding: 2px 16px; }
.cdig-contact__item + .cdig-contact__item { border-left: 1px solid rgba(255, 255, 255, .45); }
.cdig-contact__item > a, .cdig-contact__stack a { display: inline-flex; align-items: center; gap: 7px; }
.cdig-contact__stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.cdig-contact a:hover span { text-decoration: underline; }
.cdig-contact__label { font-weight: 700; max-width: 120px; line-height: 1.25; }
.cdig-round {
	width: 32px; height: 32px; border-radius: 50%;
	background: #fff; color: #1b1b1b !important;
	display: grid !important; place-items: center;
	transition: transform .15s ease;
}
.cdig-round:hover { transform: scale(1.08); }

/* ---------- Hoja principal ---------- */

.cdig-sheet {
	position: relative;
	max-width: 1360px;
	margin: -104px auto 0;
	background: var(--cdig-sheet);
	border-radius: 16px 16px 0 0;
	min-height: 60vh;
	padding: 0 24px 48px;
	container: cdig-sheet / inline-size;
}
.cdig--shortcode .cdig-hero + .cdig-sheet,
.cdig--tema .cdig-hero + .cdig-sheet { border-radius: 16px; }
.cdig-sheet:first-child { margin-top: 0; }

.cdig-toolbar {
	position: sticky;
	top: var(--cdig-sticky-top);
	z-index: 20;
	background: var(--cdig-sheet);
	padding: 20px 0 0;
	border-bottom: 1px solid var(--cdig-border);
	border-radius: 16px 16px 0 0;
}

.cdig-search { position: relative; display: block; }
.cdig-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cdig-muted); pointer-events: none; }
.cdig .cdig-search__input {
	width: 100%; margin: 0;
	height: 40px; padding: 0 14px 0 36px;
	font: 500 14px/1 var(--cdig-font);
	color: var(--cdig-text);
	background: var(--cdig-card);
	border: 1px solid var(--cdig-border);
	border-radius: 8px;
	box-shadow: none;
	-webkit-appearance: none; appearance: none;
}
.cdig .cdig-search__input::placeholder { color: var(--cdig-muted); opacity: 1; }
.cdig .cdig-search__input:focus { outline: none; border-color: var(--cdig-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdig-accent) 22%, transparent); }

.cdig-nav {
	margin: 10px -24px 0;
	padding: 0 24px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cdig-nav::-webkit-scrollbar { display: none; }
.cdig .cdig-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.cdig .cdig-nav__list li { margin: 0; padding: 0; }
.cdig-nav__link {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	min-width: 84px; max-width: 128px;
	padding: 10px 8px 12px;
	color: var(--cdig-muted) !important;
	text-align: center;
	border-radius: 8px;
	transition: color .15s ease, background-color .15s ease;
}
.cdig-nav__icon { width: 26px; height: 26px; color: var(--cdig-icon); transition: transform .2s ease; }
.cdig-nav__label { font-size: 12px; font-weight: 600; line-height: 1.2; }
.cdig-nav__link:hover { color: var(--cdig-heading) !important; }
.cdig-nav__link:hover .cdig-nav__icon { transform: translateY(-2px); }
.cdig-nav__link::after {
	content: ""; position: absolute; left: 18%; right: 18%; bottom: 0;
	height: 3px; border-radius: 3px 3px 0 0;
	background: var(--cdig-accent);
	transform: scaleX(0); transition: transform .2s ease;
}
.cdig-nav__link.is-active { color: var(--cdig-heading) !important; }
.cdig-nav__link.is-active .cdig-nav__icon { color: var(--cdig-accent); }
.cdig-nav__link.is-active::after { transform: scaleX(1); }
.cdig-nav__link:focus-visible { outline: 2px solid var(--cdig-accent); outline-offset: -2px; }

/* ---------- Secciones ---------- */

.cdig-content { padding-top: 6px; }

.cdig-section { padding-top: 22px; scroll-margin-top: 170px; }
.cdig-sub { scroll-margin-top: 170px; }
.cdig .cdig-section__title {
	margin: 0 0 14px; padding: 0;
	font: 700 16px/1.3 var(--cdig-font);
	color: var(--cdig-heading);
	letter-spacing: 0; text-transform: none;
}
.cdig .cdig-sub__title {
	margin: 10px 0 14px 6px; padding: 0;
	font: 500 14px/1.3 var(--cdig-font);
	color: var(--cdig-heading);
	letter-spacing: 0; text-transform: none;
}
.cdig .cdig-sub__desc { margin: -8px 0 14px 6px; font-size: 13px; color: var(--cdig-muted); }
.cdig-sub { padding-top: 8px; }
.cdig-section__title + .cdig-sub { padding-top: 0; }

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

/* ---------- Tarjeta ---------- */

.cdig .cdig-card {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	min-height: 124px;
	width: 100%;
	background: var(--cdig-card);
	border-radius: var(--cdig-radius);
	box-shadow: var(--cdig-shadow);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	color: var(--cdig-text);
	font-family: var(--cdig-font);
	transition: box-shadow .2s ease, transform .2s ease;
}
.cdig .cdig-card:hover { box-shadow: var(--cdig-shadow-hover); transform: translateY(-2px); }
.cdig .cdig-card:focus-visible { outline: 2px solid var(--cdig-accent); outline-offset: 2px; }

.cdig-card__body {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 14px 14px 16px;
}
.cdig-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--cdig-heading); }
.cdig-card__desc {
	font-size: 12.5px; line-height: 1.4; color: var(--cdig-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cdig-card__price { margin-top: auto; padding-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--cdig-accent); }

.cdig-card__media {
	flex: none; width: 140px; position: relative;
	background: color-mix(in srgb, var(--cdig-border) 45%, var(--cdig-card));
}
.cdig-card__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .35s ease;
}
.cdig .cdig-card:hover .cdig-card__media img { transform: scale(1.04); }
.cdig-card__media--empty { display: grid; place-items: center; border-left: 1px solid var(--cdig-border); background: var(--cdig-card); }
.cdig-placeholder { width: 64px; height: 64px; color: color-mix(in srgb, var(--cdig-muted) 60%, transparent); }

.cdig-empty { margin: 32px 0; text-align: center; color: var(--cdig-muted); font-size: 14px; }
.cdig-note { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--cdig-border); font-size: 12.5px; color: var(--cdig-muted); text-align: center; }

.cdig [data-cdig-group][hidden], .cdig .cdig-card[hidden], .cdig .cdig-nav__list li[hidden] { display: none !important; }

/* ---------- Popup ---------- */

.cdig-modal {
	position: fixed; inset: 0; z-index: 99999;
	display: grid; place-items: center;
	padding: 20px;
}
.cdig-modal[hidden] { display: none; }
.cdig-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(10, 12, 11, .6);
	opacity: 0; transition: opacity .22s ease;
}
.cdig-modal__dialog {
	position: relative;
	width: min(444px, 100%);
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	background: var(--cdig-card);
	color: var(--cdig-text);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	opacity: 0; transform: translateY(14px) scale(.98);
	transition: opacity .22s ease, transform .22s ease;
}
.cdig-modal.is-open .cdig-modal__backdrop { opacity: 1; }
.cdig-modal.is-open .cdig-modal__dialog { opacity: 1; transform: none; }

.cdig-modal__media { position: relative; aspect-ratio: 10 / 9; background: color-mix(in srgb, var(--cdig-border) 50%, var(--cdig-card)); }
.cdig-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdig-modal__img[hidden] { display: none; }
.cdig-modal__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.cdig-modal__placeholder[hidden] { display: none; }
.cdig-modal__placeholder .cdig-placeholder { width: 120px; height: 120px; }
.cdig-modal--noimg .cdig-modal__media { aspect-ratio: 16 / 7; }

.cdig .cdig-modal__back {
	all: unset;
	position: absolute; top: 12px; left: 12px;
	width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center;
	background: #fff; color: #1b1b1b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	cursor: pointer;
}
.cdig .cdig-modal__back:hover { transform: scale(1.06); }
.cdig .cdig-modal__back:focus-visible { outline: 2px solid var(--cdig-accent); outline-offset: 2px; }

.cdig-modal__body { padding: 18px 16px 16px; }
.cdig .cdig-modal__title { margin: 0 0 8px; padding: 0; font: 600 21px/1.25 var(--cdig-font); color: var(--cdig-heading); letter-spacing: 0; text-transform: none; }
.cdig .cdig-modal__desc { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--cdig-muted); white-space: pre-line; }
.cdig .cdig-modal__desc:empty { display: none; }
.cdig .cdig-modal__price { margin: 0; font-size: 16px; font-weight: 700; color: var(--cdig-accent); }
.cdig .cdig-modal__sep { margin: 14px 0 20px; border: 0; border-top: 2px solid var(--cdig-border); height: 0; background: none; }
.cdig .cdig-modal__cta {
	all: unset;
	box-sizing: border-box;
	display: block; width: 100%;
	padding: 10px 16px;
	text-align: center;
	font: 700 16px/1.2 var(--cdig-font);
	color: var(--cdig-on-primary);
	background: var(--cdig-primary);
	border-radius: 999px;
	cursor: pointer;
	transition: filter .15s ease;
}
.cdig .cdig-modal__cta:hover { filter: brightness(1.1); }
.cdig .cdig-modal__cta:focus-visible { outline: 2px solid var(--cdig-accent); outline-offset: 3px; }

html.cdig-lock, html.cdig-lock body { overflow: hidden; }

/* ---------- Responsive ---------- */

@container cdig-sheet (max-width: 940px) {
	.cdig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container cdig-sheet (max-width: 580px) {
	.cdig-grid { grid-template-columns: 1fr; gap: 12px; }
	.cdig .cdig-card { min-height: 112px; }
	.cdig-card__media { width: 112px; }
}

@media (max-width: 700px) {
	.cdig-hero { min-height: 0; padding: 16px 16px 92px; }
	.cdig-hero__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
	.cdig-brand__logo { width: 58px; height: 58px; border-radius: 10px; }
	.cdig .cdig-brand__name { font-size: 19px; }
	.cdig-contact { gap: 8px 0; font-size: 11.5px; }
	.cdig-contact__item { padding: 0 12px 0 0; }
	.cdig-contact__item + .cdig-contact__item { border-left: 0; }
	.cdig-contact__label { display: none; }

	.cdig-sheet { margin-top: -76px; padding: 0 14px 36px; border-radius: 16px 16px 0 0; }
	.cdig-toolbar { padding-top: 14px; }
	.cdig-nav { margin: 6px -14px 0; padding: 0 14px; }
	.cdig-nav__link { min-width: 0; width: 88px; padding: 8px 4px 11px; }
	.cdig-nav__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.cdig-nav__icon { width: 24px; height: 24px; }
	.cdig-nav__label { font-size: 11px; }
	.cdig-section, .cdig-sub { scroll-margin-top: 150px; }

	.cdig-modal { padding: 0; place-items: end center; }
	.cdig-modal__dialog {
		width: 100%;
		max-height: 92vh; max-height: 92dvh;
		border-radius: 18px 18px 0 0;
		transform: translateY(40px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdig *, .cdig *::before, .cdig *::after { transition: none !important; }
}
