/* ----------------------------------------------------------------
	Custom CSS
-----------------------------------------------------------------*/

:root{
	--bluedark:#134472;
	--bluelight: #358fc1;
	--sky: #cfedfd;
	--cnvs-themecolor: #134472;
}

.bd{color: var(--bluedark) !important;} .bgbd{background-color: var(--bluedark) !important;}
.bl{color: var(--bluelight) !important;} .bgbl{background-color: var(--bluelight) !important;}
.sky{color: var(--sky) !important;} .bgsky{background-color: var(--sky) !important;}

.brand{width: 600px; filter: drop-shadow(5px 5px 10px #000000); margin-top: -5em; margin-bottom: 1em;}

a.button.button-border.button-darks.button-rounded {background-color: #138e40; color: white; border-color: #138e40;}
a.button.button-border.button-darks.button-rounded:hover {background-color: #16ad4e;}

a.menu-link {color: rgb(184, 230, 230) !important;}
a.menu-link:hover {color: rgb(172, 188, 188) !important;}
.menu-item.current > .menu-link {color: white !important; font-weight: 600 !important;}
.bold{font-weight: bold;}
.txtlo{letter-spacing: 1px; color: white !important; font-size: 0.75rem !important;}
.tit{max-width: 950px; font-size: 40px; margin-bottom: 0 !important;}

.ribbon {
  --s: 70px; /* ribbon size */ --d: 20px; /* depth */ --c: 20px; /* cutout */
  padding: 0 calc(var(--s) + var(--d)) var(--d);
  background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%, #0008 0 37.5%, #0004 0) 0 / 50% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%, #0008 0 75%, #0000 0) 100% / 50% no-repeat; clip-path: polygon( 0 var(--d), var(--s) var(--d), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--d), 100% var(--d), calc(100% - var(--c)) calc(50% + var(--d)/2), 100% 100%, calc(100% - var(--s) - var(--d)) 100%, calc(100% - var(--s) - var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) 100%, 0 100%, var(--c) calc(50% + var(--d)/2));
  background-color: #CC333F;
  width: 90%; max-width: 800px; margin: auto; color: white; font-size: clamp(1rem, 5vw, 2.5rem); /* 💡 texto responsivo */
  text-align: center; font-weight: bold; line-height: 1.2;
}

.ribbon2 {
  --s: 70px; /* ribbon size */ --d: 20px; /* depth */ --c: 20px; /* cutout */
  padding: 0 calc(var(--s) + var(--d)) var(--d);
  background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%, #0008 0 37.5%, #0004 0) 0 / 50% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%, #0008 0 75%, #0000 0) 100% / 50% no-repeat; clip-path: polygon( 0 var(--d), var(--s) var(--d), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--d), 100% var(--d), calc(100% - var(--c)) calc(50% + var(--d)/2), 100% 100%, calc(100% - var(--s) - var(--d)) 100%, calc(100% - var(--s) - var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) 100%, 0 100%, var(--c) calc(50% + var(--d)/2));
  background-color: var(--bluedark);
  width: 90%; max-width: 800px; margin: auto; color: white; font-size: clamp(1rem, 5vw, 2.5rem); /* 💡 texto responsivo */
  text-align: center; font-weight: bold; line-height: 1.2;
  color: #222222;
}

.pricing > [class^=col-] {margin-top: 0;}
.mpa{border-radius: 5px;}
.fss{font-size: 24px;}

.check-list { list-style: none; padding-left: 0;}
.bdark{background-color: transparent !important;}
.check-list li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--bluelight); margin-right: 10px;}


.pbb0{padding-bottom: 0 !important;}
.darks{ color: #222222; background-color: aliceblue !important;}
.darks:hover{ color: #222222; background-color: var(--sky) !important; font-weight: bold;}
.text-right{text-align: right !important;}