:root {
	/* Scaling Factor */
	--s:1;
	
	/* Spacing */
	--space-xs:calc(0.25rem * var(--s));
	--space-sm:calc(0.5rem * var(--s));
	--space-md:calc(1rem * var(--s));
	--space-lg:calc(1.5rem * var(--s));
	--space-xl:calc(2rem * var(--s));
	
	/* Content Sizing Variables */
	--page-width:100vw;
	--content-max-width:920px; /* Adjustable maximum content width */
	--content-intrusion:33; /* How much of height content can overlay */

	--side-padding:max(var(--space-md), calc((100vw - var(--content-max-width)) / 2)); /* Calculates side paddings and ensures minimum padding */
	--content-width:min(var(--content-max-width), calc(100% - 2 * var(--side-padding)));
	
	/* Borders */
	--border-radius:calc(0.25rem * var(--s));
	--border-width:calc(1px * var(--s));
	
	/* Typography */
	--font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-family-button:'Verdana', 'Geneva', sans-serif;
	--font-size:calc(1rem * var(--s));
	--line-height:1.6;
	
	/* Colors - Neutral */
	/* Greyscale - depth, shadows, and highlighting elements */
	--c-gr1:rgb(5,5,5);
	--c-gr2:rgb(25,25,25);
	--c-gr3:rgb(55,55,55);
	--c-gr4:rgb(115,115,115);
	--c-gr5:rgb(128,128,128);
	--c-gr6:rgb(140,140,140);
	--c-gr7:rgb(200,200,200);
	--c-gr8:rgb(230,230,230);
	--c-gr9:rgb(250,250,250);
	/* Brown - backgrounds or to soften the design */
	--c-br1:rgb(72,54,38);
	--c-br2:rgb(160,110,80);
	--c-br3:rgb(235,195,160);
	
	/* Colors - Primary */
	/* Red - alerts, important buttons, or to draw attention */
	--c-r1:rgb(120,30,30);
	--c-r2:rgb(200,60,60);
	--c-r3:rgb(245,180,180);
	/* Green - success messages, confirmations, or eco-friendly themes */
	--c-g1:rgb(30,80,30);
	--c-g2:rgb(80,160,80);
	--c-g3:rgb(180,235,180);
	/* Blue - links, informational messages, or to convey trust and stability */
	--c-b1:rgb(30,30,120);
	--c-b2:rgb(60,100,200);
	--c-b3:rgb(180,200,245);
	/* Yellow - warnings, highlights, or to add vibrancy */
	--c-y1:rgb(150,120,30);
	--c-y2:rgb(220,180,60);
	--c-y3:rgb(245,235,100);
	
	/* Colors - Secondary */
	/* Cyan - accents, backgrounds, or to convey freshness */
	--c-cya1:rgb(20,100,120);
	--c-cya2:rgb(100,200,220);
	/* Magenta - call-to-action elements or highlights */
	--c-mag1:rgb(120,30,90);
	--c-mag2:rgb(200,60,140);
	/* Orange - buttons, alerts, or to draw attention */
	--c-ora1:rgb(180,80,20);
	--c-ora2:rgb(245,140,60);
	/* Purple - headings, highlights, or premium content */
	--c-pur1:rgb(70,40,120);
	--c-pur2:rgb(140,100,200);
	
	/* Colors - Additional */
	--c-pink:rgb(255,192,203); /* Pink - highlighting or feminine designs */
	--c-beige:rgb(245,245,220); /* Beige - backgrounds or to create a minimalist look */
	--c-turquoise:rgb(64,224,208); /* Turquoise - accents or to evoke a sense of tranquility */
	--c-gold:rgb(255,215,0); /* Gold - premium features or to highlight important elements */
	--c-silver:rgb(192,192,192); /* Silver - borders, icons, or to add a metallic touch */
	
	/* Colors - Branded & Per Use Case */
	--c-email:rgb(112, 128, 144); 				/* Universal Email Slate Gray */
	--c-phone:rgb(34, 120, 96); 				/* Universal Phone Call Teal */
	--c-whatsapp:rgb(37, 211, 102); 			/* WhatsApp Green */
	--c-skype:rgb(0, 175, 240); 				/* Skype Blue */
	--c-facebook-messenger:rgb(0, 132, 255);    /* Messenger Blue */
	--c-telegram:rgb(0, 136, 204);              /* Telegram Blue */
	--c-viber:rgb(105, 70, 145);                /* Viber Purple */
	--c-wechat:rgb(9, 187, 7);                  /* WeChat Green */
	--c-line:rgb(0, 195, 0);                    /* LINE Green */
	--c-signal:rgb(45, 141, 235);               /* Signal Blue */
	--c-discord:rgb(114, 137, 218);             /* Discord Blurple */
	--c-zoom:rgb(0, 122, 255);                  /* Zoom Blue */
	--c-google-duo:rgb(46, 134, 222);           /* Google Duo Blue */
	--c-slack:rgb(74, 21, 75);                  /* Slack Purple */
	--c-microsoft-teams:rgb(70, 112, 167);      /* Teams Blue */

	/* Colors - Internal Links */
	--c-link-tx:rgb(40, 110, 210);          	/* Default link text */
	--c-link-hov:rgb(30, 90, 180);          	/* Hover state */
	--c-link-vis:rgb(70, 130, 220);         	/* Visited state */
	--c-link-act:rgb(20, 80, 160);          	/* Active state */
	--c-link-foc:rgb(80, 140, 230);         	/* Focus state */
	
	/* Colors - External Links */
	--c-link-out-tx:rgb(0, 150, 136);       	/* Default text */
	--c-link-out-hov:rgb(0, 130, 120);      	/* Hover state */
	--c-link-out-vis:rgb(38, 166, 154);     	/* Visited state */
	--c-link-out-act:rgb(0, 110, 100);      	/* Active state */
	--c-link-out-foc:rgb(0, 170, 155);      	/* Focus state */
}

/* Artenga - Scaling */
@media (min-width:600px) and (max-width:595px) { :root { --s:1.05; } }
@media (min-width:960px) and (max-width:1279px) { :root { --s:1.07; } }
@media (min-width:1280px) and (max-width:1599px) { :root { --s:1.11; } }
@media (min-width:1600px) and (max-width:1919px) { :root { --s:1.17; } }
@media (min-width:1920px) and (max-width:2559px) { :root { --s:1.29; } }
@media (min-width:2560px) { :root { --s:1.46; } }

/* Artenga - Reset */
html { overflow-y:scroll; }
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; font-family:var(--font-family); }
body { font-size:var(--font-size); line-height:var(--line-height); background-color:var(--color-main-bg); color:var(--color-main-tx); &.noscroll { overflow:hidden; height:100vh; } }
a { text-decoration:none; }
main a:not([class^="cta_"]) { color:var(--color-link-tx); &:hover { color:var(--color-link-hov); } &:visited { color:var(--color-link-vis); } &:active { color:var(--color-link-act); } &:focus { color:var(--color-link-foc); } }

/* Artenga - Layout Base */
header, main, footer, .wb_component, .wb_hull, .wb_block, .wbi_button { position:relative; }
.wb_component { width:100%; max-width:var(--content-width); margin:0 auto; }
.wb_hull { width:100%; }
.wb_block { margin:var(--space-lg) auto; padding:var(--space-sm); }
/* Shared rules any .wb_block */
.wb_block > * { margin-bottom:var(--space-md); }
.wb_block > *:is(h1,h2,h3,h4,h5,h6) { margin-top:1.071em; }
/* Shared rules across different .wb_component, but excluding other */
:is(main, footer) .wb_block { --padding:calc(var(--side-padding) + var(--space-sm)); padding-left:var(--padding); padding-right:var(--padding); }
header:has(.wb_hero), main .wb_hull:has(.wbo_banner, .wbo_hero, .wbo_cover), footer.wb_component { width:calc(var(--page-width) + var(--side-padding)); max-width:100vw; padding:0; margin:0; }
header{background:silver;}/* del */
/* Artenga - Header */
header.wb_component { }
header .wb_hull { display:flex; align-items:center; justify-content:space-between; }
header .wb_block { width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; padding:var(--space-sm); }

/* Artenga - Main */
main.wb_component { }
main .wb_hull { }
main .wb_block { }
main .wb_hull:has(.wbo_hero) { min-height:70vh; }
main .wb_hull:has(.wbo_cover) { min-height:100vh; }

/* Artenga - Footer */
footer.wb_component { }
footer .wb_hull {  background-color:var(--color-expo-2-bg); color:var(--color-expo-2-tx); }
footer .wb_block { & > * { color:var(--color-expo-2-tx); } }/* removed -  !important, padding moved to SHARED - del this?*/

/* Streamlined overrides */
.wb_component {  }
.wb_hull {  }
.wb_block {  }
:is(header, footer) { margin-left:unset; margin-right:unset; }
footer .wb_hull > :last-child { margin-bottom:0; padding-bottom:0; }

/* Streamlined stacking */
.wbi_logotype { z-index:496; }
.wbi_navigation { z-index:495; }
.wbo_menu_toggle { z-index:496; &.wbi_nav_toggle { z-index:497; } }

/* Streamlined buttons */
.wbi_button { font-family:var(--font-family-button); }
header .wbo_menu_toggle { display:flex; flex-shrink:0; }
.wbi_button[class^="cta_"] { padding:var(--space-md); overflow:hidden; font-weight:100; letter-spacing:0.5px; font-variant:small-caps; color:var(--color-button-2-tx); }
.wbi_button[class^="cta_"]::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--c-cta-bg); z-index:-1;  border-radius:var(--border-radius); pointer-events:none; transition:filter 0.15s; }
.wbi_button[class^="cta_"]:hover { color:var(--color-button-2-tx-hov); }
.wbi_button[class^="cta_"]:hover::before { filter:brightness(110%) grayscale(20%) contrast(70%) saturate(150%) drop-shadow(0 0 2px var(--color-button-2-shad)); }

header .wbi_button { background-color:var(--color-button-3-bg); color:var(--color-button-3-tx); border-radius:var(--space-sm); user-select:none; }

/* Artenga - CTA */
.cta_call { --c-cta-bg:var(--c-phone); }
.cta_wp { --c-cta-bg:var(--c-whatsapp); }


/* Artenga - Specific Block Behavior */
	/* wb_top_bar */
header .wbi_button { font-size:1.55rem; padding:var(--space-sm) var(--space-xl); cursor:pointer; }
.wb_bar_top { }
.wbi_logotype { margin:0; font-size:1.55rem; color:inherit; }
.wbi_logotype a { width:100%; height:100%; }

.wbo_menu_toggle:before { color:inherit; width:22px; }.wbo_menu_toggle.open:before {content:'✕'; }
.wbi_nav_toggle:before { content:'☰'; }
.wbi_loc_toggle:before { content:'\1F310'; filter: grayscale(100%) brightness(25%); } /* ������ Globe with Meridians */

	/* wb_plain */

	/* wb_quote */
main .wb_hull :is(.wb_quote) { width:calc(100% - var(--space-lg) * 2); left:var(--space-lg); padding:var(--space-lg) var(--space-xl); margin:var(--space-xl) 0; }
blockquote { background-color:var(--color-expo-1-bg); border-left:calc(var(--border-width) * 5 * var(--s)) solid var(--color-expo-1-br); border-radius:var(--border-radius); }

	/* wb_faq_spoiler */
main .wb_hull .wb_faq_spoiler { border-right:calc(var(--border-width) * 5 * var(--s)) solid var(--color-expo-1-br); border-radius:var(--border-radius); }



/* Artenga - Specific Item Behavior */


.wbi_question { color:var(--color-question-tx); filter:brightness(80%); &:hover { cursor:pointer; color:var(--color-question-hov); } }
.wbi_answer { display:none; &.expand { display:block; } }



/* Artenga - Adjusted Behavior */


/* Artenga - Header - Navigation Menu */
.wbi_navigation { position:fixed; top:0; left:0; right:0; bottom:0; display:none; flex-direction:column; align-items:flex-start; padding:var(--space-md); background-color:var(--color-overlay-bg); }
.wbi_navigation.expand { display:flex; }
.wbi_navigation > * { display:flex; flex-direction:column; gap:var(--space-sm); width:100%; }

.wbi_nav_browse { margin-top:calc( (1.5rem * var(--s) * var(--line-height)) + (var(--space-sm) * 3) + var(--space-lg) ); }
.wbi_nav_locale { margin-top:auto; padding-top:var(--space-md); }

.wbo_menu_content { padding-left:var(--space-sm); padding-right:var(--space-sm); }

.wbi_menu_item { padding:var(--space-md) var(--space-lg); }


.wbi_nav_locale {
  display: none;
  transition: all 0.3s ease;
}

.wbi_nav_locale.expand {
  display: block;
}

.wbi_loc_toggle {
  cursor: pointer;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

.wbi_loc_toggle.open {
  background-color: #ccc;
}



/* .wbo_menu_toggle { line-height:var(--line-height); */




/* Artenga - HTML Styling */
ul, ol { margin:0 var(--space-md); padding-left:var(--space-md); list-style-position:inside;}
li { margin-bottom:var(--space-xs); &:has(a) { color:var(--color-link-tx); } }

h1, h2, h3, h4, h5, h6 { color:var(--color-heading-tx); }
main h1 { color:var(--color-heading-1-tx); }
main h2 { color:var(--color-heading-2-tx); }
main h2 { color:var(--color-heading-3-tx); }




/* Artenga - Media Query for Desktop */
@media (min-width:600px) and (max-width:959px) {
	.wbi_navigation { left:50%; }
}
@media (min-width:960px) {
	:focus { outline:2px solid var(--color-link-foc); outline-offset:min(3px, 3vw); }
	main .wb_hull .wb_block { padding:var(--space-sm) var(--space-lg); }
	.wb_hull:has(.wbo_banner, .wbo_hero, .wbo_cover) .wb_block {--padding:calc(var(--side-padding) + var(--space-lg)) !important;}

	header .wb_block { flex-wrap:nowrap; align-items:center; height:auto; & > * {white-space:nowrap;} }
	.wbi_logotype h1, .wbi_menu_item { line-height:2rem; }

	.wbi_navigation { position:static; display:flex; flex-direction:row; align-items:center; padding:0; z-index:auto; background-color:unset; }
	.wbi_navigation > * { flex-direction:row; width:auto; margin-top:0; }
	.wbi_nav_locale { padding-top:unset; }
	.wbi_menu_item { padding:var(--space-sm) var(--space-md); width:auto; }
}

/* Weblock Automatic Grid Column Module */
.wb_block:has([class*="wbo_col_"]) { display:grid; gap:var(--space-md); grid-auto-flow:dense; }
.wb_block:has(.wbo_col_2) {grid-template-columns:repeat(2, 1fr);}
.wb_block:has(.wbo_col_3) {grid-template-columns:repeat(3, 1fr);}
.wb_block:has(.wbo_col_4) {grid-template-columns:repeat(4, 1fr);}
.wb_block:has(.wbo_col_5) {grid-template-columns:repeat(5, 1fr);}
.wb_block:has(.wbo_col_6) {grid-template-columns:repeat(6, 1fr);}

[class*="wbo_col_"] {grid-column-end: span 1;}
.wbo_col_stretch {grid-column: 1 / -1;}
.wbo_col_1 {grid-column-start: 1;}
.wbo_col_2 {grid-column-start: 2;}
.wbo_col_3 {grid-column-start: 3;}
.wbo_col_4 {grid-column-start: 4;}
.wbo_col_5 {grid-column-start: 5;}
.wbo_col_6 {grid-column-start: 6;}
.wbo_col_span_2 {grid-column-end: span 2;}
.wbo_col_span_3 {grid-column-end: span 3;}
.wbo_col_take_2 {grid-row-end: span 2;}
.wbo_col_take_3 {grid-row-end: span 3;}
/* Weblock Automatic Grid Column Module */
@media (max-width:961px) {
	[class*="wbo_col_"] {grid-column: 1 / -1;}
}


/* Keyframes for fade-in effect */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); } /* Slide up slightly */
    to { opacity: 1;transform: translateY(0); } /* Normal position */
}

/* Top navigation links - .wbi_nav_browse and .wbi_nav_locale commonly under .wbi_menu_item */
.wbi_menu_item { opacity: 0; animation: fadeIn 0.22s ease forwards; } /* Start invisible */

/* Stagger the animation using animation-delay for .wbi_nav_browse */
.wbi_nav_browse a:nth-child(1) { animation-delay: 0s; } /* First link */
.wbi_nav_browse a:nth-child(2) { animation-delay: 0.04s; } /* Slight delay */
.wbi_nav_browse a:nth-child(3) { animation-delay: 0.08s; }
.wbi_nav_browse a:nth-child(4) { animation-delay: 0.12s; }
.wbi_nav_browse a:nth-child(n+5) { animation-delay: 0.15s; }

/* Stagger the animation using animation-delay for .wbi_nav_locale */
.wbi_nav_locale a:nth-child(1) { animation-delay: 0s; }
.wbi_nav_locale a:nth-child(2) { animation-delay: 0.04s; }
.wbi_nav_locale a:nth-child(3) { animation-delay: 0.08s; }
.wbi_nav_locale a:nth-child(4) { animation-delay: 0.12s; }
.wbi_nav_locale a:nth-child(n+5) { animation-delay: 0.15s; }

/* Artenga - Color Scheme */
:root {
	--color-main-tx:var(--c-gr2);
	--color-main-bg:var(--c-gr9);
	--color-main-br:var(--c-br1);

	--color-logotype:var(--c-gr9);
	--color-logotype-hov:var(--c-gr3);

	--color-heading-tx:var(--c-brandB);
	--color-heading-1-tx:var(--color-heading-tx);
	--color-heading-2-tx:var(--color-heading-tx);
	--color-heading-3-tx:var(--color-heading-tx);

	--color-overlay-bg:var(--c-gr8);

	--color-link-tx:var(--c-gr5);
	--color-link-hov:var(--c-gr5);
	--color-link-vis:var(--c-gr5);
	--color-link-out-tx:var(--c-gr5);
	--color-link-out-hov:var(--c-gr5);

	--color-link-tx:var(--c-link-tx); 
	--color-link-hov:var(--c-link-hov);
	--color-link-vis:var(--c-link-vis);
	--color-link-act:var(--c-link-act);
	--color-link-foc:var(--c-link-foc);

	--color-link-out-tx:var(--c-link-out-tx);
	--color-link-out-hov:var(--c-link-out-hov);
	--color-link-out-vis:var(--c-link-out-vis);
	--color-link-out-act:var(--c-link-out-act);
	--color-link-out-foc:var(--c-link-out-foc);

	--color-button-1-tx:var(--c-br1);/* Default */
	--color-button-1-tx-hov:var(--color-button-1-tx);
	--color-button-1-br:var(--c-gr3);
	--color-button-1-bg:var(--c-cya2);
	--color-button-1-bg-hov:var(--color-button-1-bg);
	--color-button-1-shad:var(--color-button-1-bg);
	--color-button-2-tx:var(--c-gr9);/* CTA */
	--color-button-2-tx-hov:var(--color-button-2-tx);
	--color-button-2-br:var(--c-gr3);
	--color-button-2-bg:var(--c-cya2);
	--color-button-2-bg-hov:var(--color-button-2-bg);
	--color-button-2-shad:var(--color-button-2-bg);
	--color-button-3-tx:var(--c-b1);/* Navigation */
	--color-button-3-tx-hov:var(--mag1);
	--color-button-3-br:var(--c-gr3);
	--color-button-3-bg:var(--c-silver);
	--color-button-3-bg-hov:var(--color-button-3-bg);
	--color-button-3-shad:var(--color-button-3-bg);
	
	--color-expo-1-tx:var(--c-gr4);
	--color-expo-1-bg:var(--c-gr8);
	--color-expo-1-br:var(--c-br1);
	--color-expo-2-tx:var(--c-gr8);
	--color-expo-2-bg:var(--c-gr3);
	--color-expo-2-br:var(--c-br2);

	--color-question-tx:var(--c-cya1);
	--color-question-tx-hov:var(--color-question-tx);

	--c-brandA:var(--c-br1);
	--c-brandB:var(--c-gr3);
	--c-brandC:var(--c-silver);
	--c-brandD:var(--c-brandC);
	--c-brandE:var(--c-brandC);
}

/* Brand - Color Scheme */
:root {
	--c-brandA: rgb(235,161,124);     /* Base: Soft orange-brown */
	--c-brandB: rgb(45,24,5);         /* Base: Dark brown */
	--c-brandC: rgb(30,136,160);      /* Base: Teal blue */
	--c-brandD: rgb(254,226,205);     /* Base: Light peach */
	--c-brandE: rgb(210,234,246);     /* Base: Pale blue */
	
	/* Light Variants */
	--c-brandA-light: rgb(252,204,182);  /* Lighter version of A */
	--c-brandB-light: rgb(102,62,35);    /* Lighter version of B */
	--c-brandC-light: rgb(145,204,218);  /* Lighter version of C */
	--c-brandD-light: rgb(255,239,228);  /* Lighter version of D */
	--c-brandE-light: rgb(235,248,253);  /* Lighter version of E */
	
	/* Dark Variants */
	--c-brandA-dark: rgb(193,120,88);    /* Darker version of A */
	--c-brandB-dark: rgb(26,14,3);       /* Darker version of B */
	--c-brandC-dark: rgb(20,96,113);     /* Darker version of C */
	--c-brandD-dark: rgb(215,191,165);   /* Darker version of D */
	--c-brandE-dark: rgb(140,168,178);   /* Darker version of E */

	--color-logotype:var(--c-brandA-light);/* rgb(43,15,11); */
	--color-button-3-tx:var(--c-brandB);
	--color-button-3-tx-hov:var(--c-brandC);
	--color-button-3-bg:var(--c-brandD-dark);
	--color-button-3-bg-hov:var(--color-brandE);
	--color-button-3-shad:none;
}

body {
overflow-x:hidden;
}

header {
	background:var(--c-brandC);
	color:var(--color-main-tx);
	&.wb_component { max-width:var(--page-width); }
	& .wb_hull {  }
	& .wb_bar_top { display:block; margin: calc(1.2 * var(--space-xl)) auto calc(1.3 * var(--space-xl)); }
}
header h1.wbi_logotype {
	color:var(--color-logotype);
	font-variant:small-caps;
	text-align:center;
	font-size:4em;
	line-height:1;
	margin:0;
	font-weight:800;
	letter-spacing:7px;
	text-align:center;
	& a {
		text-decoration:none;
	color:var(--color-logotype);
	}
}

main :is(h1, h2){
	padding:0.5em 0 0.9em;
	text-align:center;
	border:5px solid transparent;
	border-bottom:7px solid var(--c-brandA-dark);
    border-bottom-right-radius: 25% 15%;
    border-bottom-left-radius: 25% 15%;
}

:is(header, footer) div.wb_hull section.wb_block :is(h1, h2, p) {
	color:var(--c-brandD-light);
	&:is(h1) {font-size:2.6em;text-align:center;margin-bottom:20px;}
}

.wb_plain_intro {
	display:grid;grid-gap:var(--space-md);
	& h1 {border:none;grid-row:1/2;grid-column:2/3;font-size: 2.8em;
        margin: 0;
        padding: 0;}
	& p {grid-row:2/3;grid-column:2/3;}
	& figure {grid-row:1/3;grid-column:1/2; position:relative; & img { width:100%; } & figcaption {position:absolute; bottom:1em;left:1em; padding:5px;background:white;} }
}

.wb_hull:has(.wb_plain_intro) + .wb_hull .wb_plain {
	display:grid;grid-gap:var(--space-md);grid-template-columns: repeat(4,1fr);
	& h2 {border:none;grid-row:1/2;font-size: 1em;margin:0;padding:0;}
	& figure {grid-row:2/3; position:relative; & img { width:100%; border-radius:7px; } & figcaption {position:absolute; bottom:11px;left:3px;right:3px; padding:2px;background:white;font-size:0.7em;border-radius: 0 0 5px 5px;} }
}

footer .wb_hull { padding-top:var(--space-xl); & a { color:var(--color-link-tx); } }

.wbi_copy, .wbi_cc { text-align:center; }

.wbi_cc { font-size:0.8em; margin-top:0; }