/* ipax-backdrop example page. */


/* Main tokens */

:root {
	--ex-bg: #f0f0f0;
	--ex-fg: #15171c;
	--ex-mut: #566070;
	--ex-line: #d3d7df;
	--ex-link: #1f4fd1;
	--ex-ok: rgb(29, 189, 29);
	--ex-blur: 16px;
	box-sizing: border-box;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* ===== THE EFFECT: four declarations that are handled by the JS engine ===== */
.ex-glass {
	--ipax-backdrop-contrast: 4.5; /* WCAG ratio, up to 15. Default: 4.5 */
	--ipax-backdrop-feather: 14; /* soft edge, from the element border inward, in px. Default: 0 */
	--ipax-backdrop-blur: var(--ex-blur); /* optional. default: 0 */
	--ipax-backdrop-mode: default; /* optional. values: default | tricontrast */
}

.example-title{
	--ipax-backdrop-contrast: 3;
	--ipax-backdrop-blur: 16;
	--ipax-backdrop-feather-bottom: 128; /* the backdrop fades from the bottom. Units are always px */
}
.example-hero-block{
	--ipax-backdrop-contrast: 4.5; /* override the value declared before */
	/* --ipax-backdrop-feather-top: 32; */
	--ipax-backdrop-blur: 0;
	padding:16px 32px 32px;
}

/* 
--ipax-backdrop-feather can be expanded as TRBL shorthand or individual properties:

1 value:  all four edges
--ipax-backdrop-feather: 14px;

2 values: top/bottom | right/left
--ipax-backdrop-feather: 10px 20px;

3 values: top | right/left | bottom
--ipax-backdrop-feather: 10px 20px 30px;

4 values: top | right | bottom | left
--ipax-backdrop-feather: 10px 20px 30px 40px;

Shorthand + Longhand directional override:
--ipax-backdrop-feather: 14px;
--ipax-backdrop-feather-right: 0;
…that will result in a clean cut on the right, soft on all other edges.
 */





@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ex-bg: #121418;
		--ex-fg: #e9ebf0;
		--ex-mut: #9aa3b2;
		--ex-line: #2a2f38;
		--ex-link: #86a8ff;
	}
}
:root[data-theme="dark"] {
	--ex-bg: #121418;
	--ex-fg: #e9ebf0;
	--ex-mut: #9aa3b2;
	--ex-line: #2a2f38;
	--ex-link: #86a8ff;
}

A, A:visited{
	color:var(--ex-link);
}

html {
	scroll-padding-top: env(safe-area-inset-top, 0px);
}
body {
	margin: 0;
	background: var(--ex-bg);
	color: var(--ex-fg);
	font:
		12pt/1.75 system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
}
.ex-page {
	max-width: 60em;
	margin: 0 auto;
	padding: 0 12px 32px;
}

.ex-page p {
	margin: 8px 0;
}
.ex-page p.destacado{
font-size:16pt; margin-bottom: 6pt;
}

.ex-page H2{
	font-size:24pt;
	margin:24pt 0 4pt;
}
.ex-small {
	font-size: 12pt;
	color: var(--ex-mut);
}



/* ===== Hero ===== */
.ex-hero {
	position: relative;
	height:80vh;
	min-height: 800px;
	margin: 0 -12px;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ex-hero-header {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 100;
	background: rgba(0,0,0, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 8px 16px;
	border-radius: 99px;
	color: #fff;
}

.ex-toggle-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11pt;
	font-weight: 500;
	cursor: pointer;
}

/* Switch port (from ipax-forms) */
.ex-switch {
	appearance: none; position: relative; flex: none; margin: 0;
	width: 44px; height: 24px;
	background-color: var(--ex-line); 
	/* border: 1px solid var(--ex-mut); */
	border-radius: 99px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
	  box-shadow: inset 0 1px 2px #00000099;
}
.ex-switch::before {
	content: ""; position: absolute; top: 50%; transform: translateY(-50%);
	left: 3px; width: 16px; height: 16px;
	border-radius: 50%; background-color: var(--ex-bg); transition: left 0.15s, background-color 0.15s;
	box-shadow: 0px 1px 4px black;
}
.ex-switch:checked { background-color: var(--ex-ok); border-color: var(--ex-ok); }
.ex-switch:checked::before { left: 23px; background-color: #fff; }

/* Fixed contrast overrides for the Hero Header (always dark) */
.ex-hero-header .ex-switch {
	background-color: rgba(255,255,255,0.2); 
	border: 1px solid rgba(255,255,255,0.4);
}
.ex-hero-header .ex-switch::before { background-color: #fff; }
.ex-hero-header .ex-switch:checked { background-color: var(--ex-ok); border-color: var(--ex-ok); }


.ex-hero, .ex-photo1{
	background-color: var(--ex-line);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	background-image: url("../img/ipax-couple-2026-11.jpg");
}

H1.example-title {
	margin: 0;
	padding: 16px 32px;
	font-size: 72pt;
	line-height: 1.1;
	color: #fff;
	font-weight: normal;
	
	text-shadow: 0px 2px 4px black;
}





@media only screen and (max-width: 640px) {
	.ex-hero{ background-position: center; }
	H1.example-title{ font-size: 64pt; }
}

@media only screen and (min-width: 641px) {
	.ex-hero{ background-position: center -20px; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 768px) {
	.ex-hero{ background-position: center -60px; }
}











.example-hero-block{
	font-size:21pt;
	color:#fff;
}


.example-hero-block P STRONG{
	color: lime;
}



/* ===== Stage and draggable boxes ===== */
.ex-stage {
	position: sticky;
	top: -16px;
	z-index: 50;
	box-shadow: 0 2px 8px #000000cc;

	min-height: 380px;
	height:50vh;
	/* min-height: 340px; */

	margin:10pt 0;

	overflow: hidden;
	border-radius: 6px;
	background-color: var(--ex-line);
	background-size: cover;
	background-position: center;
}
.ex-box {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.75);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: move;
	overflow: hidden;
}

.ex-box SMALL{
	font-weight: normal;
	display: block;
	font-size: 10pt;
	line-height: 12pt;
	opacity: .7;
}



.ex-picture {
	background-size: cover;
	background-position: center;
	background-color: var(--ex-line);
}
.ex-flat {
	background: rgba(40, 90, 160, 0.55);
	color: #fff;
}
.ex-grad {
	background-image: linear-gradient(135deg, #f6d365, #fda085);
	color: #222;
}
.ex-rot {
	transform: rotate(8deg);
	background: #e07a2d;
	color: #fff;
}
.ex-t {
	padding: 6px;
	font-weight: 700;
	font-size: 14pt;
}

.ex-stage-label, .ex-pic-label{
	font-size:9pt; text-transform: uppercase; letter-spacing: .2em;
}

.ex-stage-label {
	position: absolute;
	top: 12px; left: 12px;
	font-size: 10pt; font-weight: bold;
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
	pointer-events: none; z-index: 10;
}

.ex-pic-label {
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.ex-glass {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px;
	font-weight: 700;
	font-size: 14pt;
	line-height: 1.15;
	color: #fff;
}

.ex-custom-text {
	color: var(--ex-custom-color, #ffd54a);
}
.ex-k {
	color: #000;
}
.ex-s-overlay .ex-glass {
	background-color: rgba(0, 0, 0, 0.2);
}
.ex-s-grad .ex-glass {
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 0.35)
	);
}
.ex-raw ipax-backdrop-layer {
	display: none;
}
.ex-grip {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 24px;
	height: 24px;
	cursor: nwse-resize;
	background: linear-gradient(
		135deg,
		transparent 55%,
		rgba(255, 255, 255, 0.85) 55%
	);
}

/* ===== Report and controls ===== */
.ex-report {
	margin: 10px 0;
	padding: 8px 10px;
	border: 1px solid var(--ex-line);
	border-radius: 6px;
	font-size: 10pt;
	color: var(--ex-mut);
	white-space: pre-line;
}
.ex-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--ex-line);
	line-height: .5;
}
.ex-row input[type="range"] {
	width: 130px;
	accent-color: var(--ex-link);
}
.ex-row select {
	font: inherit;
}




/* Pair container for slider + numeric input */
.ex-pair {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}

.ex-row input[type="number"] {
	width: 3.8rem;
	padding: 2px 4px;
	font-family: inherit;
	font-size: 0.9em;
	text-align: right;
}

/* Directional feather disclosure layout */
.ex-disclosure {
	margin: 0;
	border-bottom: 1px solid var(--ex-line);
}

.ex-summary {
	cursor: pointer;
	user-select: none;
}

.ex-summary:hover span {
	opacity: 0.85;
}

.ex-summary .ex-row {
	display: inline-grid;
	width: calc(100% - 24px);
	vertical-align: middle;
	border-bottom: none;
}

.ex-hint {
	opacity: 0.6;
	font-weight: normal;
	font-size: 0.85em;
	margin-left: 6px;
}

.ex-disclosure-body {
	padding-left: 16px;
	border-left: 2px solid rgba(128, 128, 128, 0.25);
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}