/*Setup*/
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { color-scheme:light dark; }
:root {
/*Brand - Applied: Brand Name [Purple, Green]*/
--c-brand-1:rgb(160,20,140);--c-brand-2:rgb(10,130,20);--c-brand-3:rgb(150,40,25);--c-brand-4:rgb(70,80,80);--c-brand-5:rgb(20,140,230);

/*Neutral Tones [Name 1, Name 2, Name N..]*/
--c-br-co:rgb(230,90,50);--c-br-sa:rgb(200,120,90);--c-br-ea:rgb(120,90,60);--c-br-ch:rgb(100,50,30);--c-br-go:rgb(90,80,40);

/*Achromatic Tones [Absolute Black, Charcoal Black, Smoky Gray, Slate Gray, Soft Stone Gray, Cloud Gray, Frost Gray, Pure White]*/
--c-n-bl:rgb(0,0,0);--c-n-ch:rgb(25,25,25);
--c-n-sm: rgb(40,40,40);--c-n-sl: rgb(80,80,80);--c-n-st: rgb(160,160,160);--c-n-cl: rgb(195,195,195);
--c-n-fr: rgb(230,230,230);--c-n-wh: rgb(255,255,255);

/*Select Tones [Universal Email Slate Gray, Email Blue + hover, Universal Phone Call Teal, WhatsApp Green + copy + hover, ~other specific]*/
/*Placeholder, removal pending: --c-email:rgb(112, 128, 144);--c-whatsapp:rgb(37, 211, 102);*/
--c-email:rgb(80,130,230);--c-email-hov:rgb(60,110,220);
--c-whatsapp:rgb(90,200,100);--c-whatsapp-hov:rgb(55,190,80);

--c-brand-5-lt:rgb(6,120,210);

--key:var(--c-brand-1);
--alt:var(--c-brand-2);
--aux:var(--c-brand-3);
--mut:var(--c-brand-4);
--area:var(--c-n-fr);
--wrap:var(--c-n-wh);
--unit:var(--c-n-wh);
--diag:var(--c-n-cl);
--link:var(--c-brand-5-lt);
--txt-clr:var(--c-n-ch);
--txt-inv-clr:var(--c-n-wh);
--hed-clr:var(--c-n-sm);
--he1-clr:var(--c-brand-2);
--he2-clr:var(--c-brand-1);
--btn:var(--c-brand-2);
--btn-hov:var(--c-br-go);
--btn-clr:var(--c-n-fr);
--btn-clr-hov:var(--c-n-wh);
--nav:var(--c-n-sm);
--nav-hov:var(--c-brand-2);
--nav-clr:var(--c-n-wh);
--nav-clr-hov:var(--c-n-fr);
--fld:var(--c-n-fr);
--fld-clr:var(--c-n-ch);
--fld-plh-clr:var(--c-n-st);
--tbl:var(--c-n-fr);
--tbl-brc:var(--c-n-st);
--nav-cnt:var(--c-n-sm);
--nav-cnt-hov:var(--c-brand-5);
--nav-cnt-clr:var(--c-n-fr);
--nav-cnt-clr-hov:var(--c-n-fr);
--nav-loc:var(--c-n-fr);
--nav-loc-clr:var(--c-br-go);
--nav-lng:var(--c-n-cl);
--nav-lng-clr:var(--c-br-go);
--key-ftr:var(--c-br-ch);
--alt-ftr:var(--c-br-go);
--key-shw: 0 2px 4px rgba(0, 0, 0, 0.2);
--alt-shw: 0 4px 12px rgba(0, 0, 0, 0.3);
--he2-emp-shw: -2px -2px 3px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(0, 0, 0, 0.3) inset;
--cta-shw: none;
--unit-shw:none;
--key-wdt:860px;
--key-brr: 12px;  /* Primary */
--alt-brr: 8px;  /* Secondary */
--aux-brr: 32px; /* Auxiliary */
--brr: 50%;      /* Universal (for pill/full-circle effects) */
--alt-wdt:520px;
--cta:var(--c-n-cl);
	--cta-brc:var(--c-n-bl);
--brand-bgi:url(https://domain.com/img/logotype.svg);
--ico-inert:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
--ico-gl:var(--ico-inert);
--ico-wp:var(--ico-inert);
--ico-em:var(--ico-inert);
--ico-cl:var(--ico-inert);
--trn-x01:0.3s;
--trn-x02:0.2s;

/*Spacing*/
--gap-x03:6px;  /*Smallest*/
--gap-x04:8px;  /*Small (small gaps)*/
--gap-x06:12px; /*Medium(padding/margin)*/
--gap-x13:26px; /*Large*/
--gap-x18:36px; /*Extra-large*/
--gap-x24:48px; /*Extra-large-BIG*/
--gap-x36:72px; /*Huge*/

/*Font*/
--fnt-x08:0.8rem; /*Fine-print*/
--fnt-x09:0.9rem; /*Small text*/
--fnt-x10:1rem;   /*Baseline*/
--fnt-x12:1.2rem; /*Subheadings*/
--fnt-x14:1.4rem; /*Subtitles*/
--fnt-x20:2rem;   /*Standard big*/
--fnt-x25:2.5rem; /*Callout text*/
--fnt-x30:3rem;   /*Hero*/

/*Line Heights*/
--line-height:1.6;
--line-height-x2:3;

/*Border*/
--border-width:6px;
}
@media (min-width:768px) { :root { --cta-shw: 0 1px 7px 2px rgba(25, 25, 25, 0.2);--unit-shw:0 0 10px 3px rgba(25, 25, 25, 0.3); } }
/*Page Layout*/
body { padding:var(--gap-x12); line-height:var(--line-height); font-family:Verdana, Geneva, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--area); color:var(--txt-clr); }
.t_wrap { display:grid; gap:var(--gap-x04); max-width:var(--key-wdt); margin:0 auto; padding:var(--gap-x12) 0px; }

.t_logotype { position:relative; text-align:center; padding:var(--gap-x08) 0 var(--gap-x16); }
.t_logotype a { display:inline-block; }
.t_logotype img { display:block; width:auto; height:clamp(50px, 8vw, 68px); max-width:92vw; }

header a, .wbi_button { text-decoration:none; }
h1, h2, h3, h4, h5, h6 { padding-bottom:var(--gap-x04); }
h1, h3, h4, h5, h6 { color:var(--hed-clr); }
h2 { color:var(--he2-clr); }

nav .wbi_menu_content.wbo_navigation { display:grid; gap:var(--gap-x04); grid-template-columns:repeat(2, minmax(0, 1fr)); }
nav a { font-size:var(--fnt-x12); padding:var(--gap-x08) var(--gap-x02); white-space:nowrap; }

main { margin-bottom:var(--gap-x21); }
main .t_wrap { margin:var(--gap-x12) auto; padding:var(--gap-x12); background:var(--wrap); border-radius:var(--key-brr); box-shadow:var(--key-shw); }

main img { display:block; max-width:100%; height:auto; }
main p { padding-bottom:var(--gap-x08);
	& .wbo_action { display:block; width:max-content; margin-left:auto; } }

main ul, main ol { padding:var(--gap-x04) 0 var(--gap-x12) var(--gap-x12);
	& li { margin-bottom: var(--gap-x04); } }
main ul li { list-style:disc; }

main > .t_wrap:has(> nav.t_contents) { margin-top: calc(var(--gap-x21) * -1 - var(--gap-x12)); }

.wbi_link_heading { padding:0; }

button, .wbi_button { padding:var(--gap-x08) var(--gap-x12); color:var(--btn-clr); background:var(--btn); border:none; border-radius:var(--key-brr);
    &:active { color:var(--btn-clr-hov); background:var(--btn-hov); } }

footer { padding:var(--gap-x08); border-bottom:3px solid var(--key); border-radius:var(--key-brr); background:var(--unit); color:var(--txt-clr);
	& p.wbi_copy, & .wbi_cc { margin-bottom:var(--gap-x04); font-size:var(--fnt-x08); color:var(--alt-ftr); } }

footer .t_unit { text-align:center; }
footer h2 { font-size:var(--fnt-x12); color:var(--key-ftr); }
footer a { color:var(--link); }

dialog nav.wbi_locale { overflow-y:scroll; max-height:70vh; }

.t_wrap#sticky_menu { transition:transform .5s cubic-bezier(0.31, 0.63, 0.95, 0.43); position:fixed; left:50%; transform:translate3d(-50%,130%,0);
	bottom:var(--gap-x08); padding:var(--gap-x08); border-radius:var(--key-brr); background:var(--wrap); box-shadow:var(--alt-shw); }
.t_wrap#sticky_menu.wbo_open { transform:translate3d(-50%,0,0); }
.t_menu_sticky { display:flex; gap:var(--gap-x08); padding:var(--gap-x02) var(--gap-x04); }
.t_menu_sticky .wbi_button { padding:var(--gap-x16); box-shadow:var(--cta-shw); border-radius:var(--brr); }

nav.wbi_locale { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:var(--gap-x08); padding:var(--gap-x08) var(--gap-x12) var(--gap-x16); }

.wbi_locale a { display:block; }
.wbi_locale button:last-child { grid-column:-2; }
nav.wbi_locale :is(a, button) { background:var(--nav-loc); color:var(--nav-loc-clr); font-size:var(--fnt-x09); transition:color 0.3s ease; }
nav.wbi_locale button#dialog_locale_open_button::before { content:"\00a0"; visibility:hidden; }

.wbi_button.wbo_confirm { float:right; }
.wbi_button.wbo_close.wbo_icon { position:absolute; top:0; right:0; }

/*Navigation*/
nav a { color:var(--nav-clr); text-align:center; }

/*Buttons*/


/*Blocks [Contents, Table]*/
.t_contents ul { display:grid; gap:var(--gap-x02); contain:inline-size; & li { list-style:none; color:var(--nav-cnt-clr); } & .wbi_link_heading { text-decoration:none; font-size:var(--fnt-x10); display:block; width:auto; max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word; } }
main .wbi_link_heading { padding:var(--gap-x04) var(--gap-x02); text-align:left; background:var(--nav-cnt); color:var(--nav-cnt-clr); }

.table_container { overflow-x:auto; contain:inline-size; }
.t_unit table { border-collapse:collapse; max-width:100%;
	& tbody > tr > * { white-space:nowrap; padding:var(--gap-x04); }
	& th { background:var(--tbl); }
	& td { border-top:1px solid var(--tbl-brc); }
}

/**/

#dialog_locale_open_button.wbi_button { --bgi:var(--ico-gl); --bgc:var(--nav-lng); --bgc-hov:var(--nav-hov); }
.wbi_button.wbo_close.wbo_icon { --bgi:var(--ico-cl); --bgc:var(--mut); --bgc-hov:var(--aux); }
.cta_mail { --bgi:var(--ico-em); --bgc:var(--c-email); --bgc-hov:var(--c-email-hov); }
.cta_whatsapp { --bgi:var(--ico-wp); --bgc:var(--c-whatsapp); --bgc-hov:var(--c-whatsapp-hov); }


#dialog_locale_open_button.wbi_button,
.wbi_button.wbo_close.wbo_icon,
.cta_mail,
.cta_whatsapp { background:var(--bgc) var(--bgi) center / 55% 55% no-repeat;
	&:active, &:focus-visible { background-color:var(--bgc-hov); background-size:63% 63%; } }

/*Dialog Module*/
footer { margin-bottom:var(--gap-x64); }
aside#dialog_panel { display:none; }

aside#dialog_panel.active { display:grid; max-width:100vw; position:fixed; overflow-y:auto; inset:0; z-index:1000;
	background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)); }

dialog { border:none; margin:auto; padding:var(--gap-x08); border-radius:var(--alt-brr); box-shadow:var(--unit-shw); background:var(--diag);
    max-height:calc(100vh - var(--gap-x21)); width:var(--alt-wdt); animation:fadeIn var(--trn-x01) ease-in-out; max-width:calc(100vw - (var(--gap-x12) * 4)); }

dialog > * { position:relative; color:var(--txt-clr);
	& h2 { line-height:var(--line-height-x2); } }

@keyframes fadeIn { from { transform:scale(0.95); opacity:0; } to { transform:scale(1); opacity:1; } }
body.no-scroll { overflow:hidden; position:fixed; width:100%;
	& .t_menu_sticky { opacity:0; pointer-events:none; } }

dialog h2 {
    margin-bottom: var(--gap-x08);
    font-size:var(--fnt-x12);
    text-align: center;
}

#dialog_locale .wbi_button.wbo_close { padding:var(--gap-x08); width:calc(var(--ico-siz)* 1.2); height: calc(var(--ico-siz)* 1.2);
    border-radius:var(--brr); transition:background-color var(--trn-x02); }
#dialog_locale h2 { line-height:inherit; }

/*Form Module*/
#form_email { padding:var(--gap-x08); }
#form_email label { display:block; font-weight:bold; margin-bottom:var(--gap-x02); }
#form_email input[type="email"],
#form_email textarea { width:100%; padding:var(--gap-x04); margin-bottom:var(--gap-x08); border:1px solid var(--cta-brc);
	border-radius:var(--alt-brr); font-size:var(--fnt-x10); box-sizing:border-box; background-color:var(--fld); color:var(--fld-clr); }
#form_email input::placeholder,
#form_email textarea::placeholder { color:var(--fld-plh-clr); }
#form_email .wbo_confirm { background-color:var(--btn); color:var(--btn-clr); }
#form_email .wbo_confirm:hover { background-color:var(--btn-hov); }
#form_email .wbo_close { background-color:var(--mut); color:var(--btn-clr); }
#form_email .wbo_close:hover { background-color:var(--aux); color:var(--btn-clr-hov); }
#form_email input:focus,
#form_email textarea:focus { border-color:var(--key); outline:none; }

@media (max-width: 768px) {
	nav a { background-color:var(--nav); border-radius:var(--key-brr); box-shadow:var(--key-shw); transition:background-color var(--trn-x02); }
}

@media (min-width: 768px) {
	nav .wbi_menu_content.wbo_navigation { display:flex; gap:0; justify-content:space-between; padding:0 var(--gap-x12); background:var(--nav); border-radius:var(--key-brr); box-shadow:var(--key-shw); }
	nav a { flex:1; font-size:var(--fnt-x10); padding:var(--gap-x08) var(--gap-x12); transition:background-color var(--trn-x02); }

	main .t_wrap h2:first-child:before { --ico-siz: 2.6em; }
	main :is(h1, h2, h3, h4, h5, h6):first-child { padding-bottom:var(--gap-x12); }

	button, .wbi_button { cursor:pointer; transition:background-color var(--trn-x01), color var(--trn-x01); }

	.t_contents ul li { list-style:square; }
	.t_unit table { width:100%; & tbody > tr > * { padding:var(--gap-x04) var(--gap-x08); } }
	dialog { padding:var(--gap-x12); }

    #form_email { max-width:600px; padding:var(--gap-x12); }
}

/*Ensure Hover Effects Are Only Applied to Devices that Support Hover - GPT was here */
@media (hover: hover) {
	nav.wbi_locale :is(a, button):hover { background:var(--nav-hov); color:var(--nav-clr-hov); }
	button:hover, .wbi_button:hover { background:var(--btn-hov); color:var(--btn-clr-hov); }
	main .wbi_link_heading:hover { background:var(--nav-cnt-hov); color:var(--nav-cnt-clr-hov); }
	#dialog_locale_open_button.wbi_button,
	.wbi_button.wbo_close.wbo_icon,
	.cta_mail,
	.cta_whatsapp { &:hover { background:var(--bgc-hov) var(--bgi) center / 63% 63% no-repeat; } }
	nav.t_menu_navigation a:hover { background:var(--nav-hov); color:var(--nav-clr-hov); }
	@media (min-width: 768px) {
		.t_logotype:hover, .t_logotype a:focus img { filter:brightness(0.87); }
	}
	html { overflow-y:scroll; }
}