:root {
   --brand: #1d2f46;
   --brand-600: #1d2f46;
   --accent: #b8860b;
   --text: #142022;
   --muted: #5c6b6f;
   --bg: #f6f7f8;
   --card: #ffffff;
   --shadow: 0 6px 20px rgba(0, 0, 0, .08);
   --radius: 14px;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth
 }

 body {
   margin: 0;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
   color: var(--text);
   background: var(--bg);
 }

 a {
   color: inherit;
   text-decoration: none
 }

 img {
   max-width: 100%;
   display: block
 }

 .container {
   max-width: 1200px;
   margin-inline: auto;
   padding: 0 20px
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   background: var(--brand);
   color: #fff;
   padding: .9rem 1.2rem;
   border-radius: 10px;
   border: 1px solid transparent;
   font-weight: 600;
   transition: .2s;
 }

 .btn:hover {
   background: var(--brand-600);
   transform: translateY(-1px)
 }

 .btn-outline {
   background: transparent;
   color: white;
   border-color: white
 }

 .badge {
   display: inline-block;
   padding: .25rem .6rem;
   border-radius: 999px;
   background: #eaf5ef;
   color: var(--brand);
   font-weight: 600;
   font-size: .8rem
 }


 .topbar {
   background: #1d2f46;
   color: #cfe7dc;
   font-size: .9rem
 }

 .topbar .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: .5rem 20px
 }

 .topbar .links {
   display: flex;
   gap: 1.2rem;
   flex-wrap: wrap
 }

 .topbar a {
   opacity: .9
 }


 header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: #fff;
   border-bottom: 1px solid #e7ecef;
   backdrop-filter: saturate(180%) blur(6px)
 }

 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 14px 0
 }

 .brand {
   display: flex;
   align-items: center;
   gap: .75rem
 }

 .brand-logo {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: var(--brand);
   display: grid;
   place-items: center;
   color: #fff;
   box-shadow: var(--shadow)
 }

 .brand strong {
   font-size: 1.1rem
 }

 nav ul {
   display: flex;
   gap: 1.2rem;
   list-style: none;
   margin: 0;
   padding: 0
 }

 nav a {
   padding: .6rem .4rem;
   border-radius: 8px
 }

 nav a:hover,
 nav a.active {
   background: #f0f5f3
 }

 .nav-cta {
   display: flex;
   align-items: center;
   gap: .6rem
 }

 .hamburger {
   display: none;
   border: 1px solid #d7e2e0;
   border-radius: 10px;
   padding: .4rem .6rem;
   background: #fff
 }


 .main {
   position: relative;
   isolation: isolate
 }

 .main .container {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 40px;
   align-items: center;
   padding: 56px 20px 24px
 }

 .main h1 {
   font-size: clamp(2rem, 3.5vw, 3rem);
   line-height: 1.15;
   margin: .25rem 0
 }

 .main p {
   font-size: 1.1rem;
   color: var(--muted);
   max-width: 60ch
 }

 .main-card {
   background: var(--card);
   padding: 22px;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   display: grid;
   gap: 14px
 }

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

 .stat {
   background: #fff;
   border: 1px solid #e9efec;
   border-radius: 14px;
   padding: 14px;
   display: grid;
   gap: 6px;
   justify-items: start
 }

 .stat b {
   font-size: 1.2rem
 }

 .stamp {
   display: flex;
   align-items: center;
   gap: .6rem;
   padding: .5rem .75rem;
   background: #f8f4e8;
   border: 1px dashed #ebd9a8;
   color: #7a5b06;
   border-radius: 999px;
   width: max-content
 }

 .illus {
   height: 420px;
   border-radius: var(--radius);
   background:
     linear-gradient(120deg, rgba(0, 99, 65, .1), rgba(184, 134, 11, .08)),
     repeating-linear-gradient(45deg, transparent 0 10px, rgba(0, 0, 0, .03) 10px 20px);
   box-shadow: var(--shadow);
   border: 1px solid #e7ecef;
   display: grid;
   place-items: center
 }


 section {
   padding: 64px 0
 }

 .section-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 22px
 }

 .section-head h2 {
   margin: 0;
   font-size: clamp(1.4rem, 2.4vw, 2rem)
 }

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

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

 .card {
   background: var(--card);
   border: 1px solid #e7ecef;
   border-radius: var(--radius);
   padding: 18px;
   box-shadow: var(--shadow)
 }

 .card span i {
  font-size: 1.8rem;
  color: #1d2f46;

}


 .practice .item {
   display: grid;
   gap: 8px
 }

 .practice svg {
   width: 36px;
   height: 36px
 }

 .practice h3 {
   margin: .2rem 0
 }

 .practice p {
   color: var(--muted);
   margin: 0
 }


 .team .member {
   display: grid;
   gap: 10px
 }

 .avatar {
   aspect-ratio: 1/1;
   border-radius: 12px;
   background: linear-gradient(135deg, #dfeae6, #f2f6f4);
   border: 1px solid #e7ecef;
   display: grid;
   place-items: center;
   font-weight: 700
 }

 .member small {
   color: var(--muted)
 }

 .news article {
   display: grid;
   gap: 10px
 }

 .news time {
   color: var(--muted);
   font-size: .9rem
 }


 footer {
   background: #1d2f46;
   color: #d3e3dd;
   margin-top: 40px
 }

 .footer-top {
   padding: 38px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 22px
 }

 .footer-grid h4 {
   margin: .2rem 0
 }

 .footer-grid a {
   display: block;
   color: #cbe0d7;
   opacity: .9;
   padding: .2rem 0
 }

 .footer-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 16px 0;
   font-size: .95rem
 }


 @media (max-width: 980px) {
   .main .container {
     grid-template-columns: 1fr
   }

   .grid-3 {
     grid-template-columns: 1fr 1fr
   }

   .grid-4 {
     grid-template-columns: 1fr 1fr
   }

   .contact .content {
     grid-template-columns: 1fr
   }

   .nav ul {
     display: none
   }

   .hamburger {
     display: inline-flex
   }
 }

 @media (max-width:640px) {

   .grid-3,
   .grid-4 {
     grid-template-columns: 1fr
   }

   .form-row {
     grid-template-columns: 1fr
   }

   .topbar .container {
     flex-direction: column;
     align-items: flex-start
   }
 }


 .skip-link {
   position: absolute;
   left: -999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden
 }

 .skip-link:focus {
   left: 10px;
   top: 10px;
   width: auto;
   height: auto;
   background: #fff;
   padding: .6rem 1rem;
   border-radius: 10px;
   box-shadow: var(--shadow);
   z-index: 100
 }

 /*wpp section*/
 /*wpp section*/
@import url("https://fonts.googleapis.com/css?family=Roboto");
/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
@keyframes pulse {
0% {
  transform: scale(1, 1);
}
50% {
  opacity: 0.3;
}
100% {
  transform: scale(1.45);
  opacity: 0;
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}

.nav-bottom {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
width: auto;
height: auto;
position: fixed;
z-index: 1000;
bottom: 0px;
right: 0px;
padding: 5px;
margin: 0px;
}
@media (max-width: 360px) {
.nav-bottom {
  width: 320px;
}
}

.whatsapp-button {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 60px;
height: 60px;
z-index: 8;
transition: 0.3s;
margin: 10px;
padding: 10px;
border: none;
outline: none;
cursor: pointer;
border-radius: 50%;
background-color: white;
/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
-webkit-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
-moz-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
}

.circle-anime {
display: flex;
position: absolute;
justify-content: center;
align-content: center;
width: 60px;
height: 60px;
top: 15px;
right: 15px;
border-radius: 50%;
transition: 0.3s;
background-color: #77bb4a;
animation: pulse 1.2s 4s ease 4;
}

.popup-whatsapp {
  background: white;
  display: none;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 19em;
  height: auto;
  padding: 10px;
  bottom: 85px;
  right: 15px;
  transition: 0.5s;
  border-radius: 10px;
  -webkit-box-shadow: 2px 1px 6px 0px rgb(68 68 68 / 71%);
  -moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  box-shadow: 0px 0px 6px -2px rgb(68 68 68 / 71%);
  animation: slideInRight 0.6s 0s both;

}
.popup-whatsapp > div {
margin: 5px;
}

@media (max-width: 768px) {
.popup-whatsapp {
  background: white;
}
.popup-whatsapp p {
  font-size: 0.9em;
}
}
.popup-whatsapp > .content-whatsapp.-top {
  display: flex;
  flex-direction: column;
  width: 95%;

}
.popup-whatsapp > .content-whatsapp.-top p {
  color: #585858;
  font: var(--font_10);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
.popup-whatsapp > .content-whatsapp.-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.closePopup {
  background: none;
  display: flex;
  margin: 0px 0px 15px 0px;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
  align-items: baseline;
  align-self: flex-end;
  height: 0;

}

.send-msPopup {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;   
  border: 1px solid #ddd;      
  cursor: pointer;
  color: #1d2f46;             
  font-size: 1.2rem;        
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}

.send-msPopup:hover {
  background-color: #d1d1d1;   
}

.is-active-whatsapp-popup {
display: flex;
animation: slideInRight 0.6s 0s both;
}

input.whats-input[type=text] {
flex: 1;
height: 40px;
box-sizing: border-box;
border: 1px solid #eaeaea;
border-radius: 20px;
font-size: 1em;
background-color: #ffffff;
padding: 0px 12px;
-webkit-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
outline: none;
transition: 0.3s;
}

.custom-btn {
  width: 14em;
  height: 4em;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.btn-11 {
  border: none;
  background: rgb(251,33,117);
    background: linear-gradient(0deg, rgb(56, 190, 75) 0%, rgb(56, 190, 75) 100%);
    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

.types{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 5em;
}
.card_type{
width: 30%;
border-bottom: 1px solid rgb(var(--color_4));
margin: 10px;
/* border-left: 1px solid rgb(var(--color_4)); */
}
.card_type p{
  text-align: center;
  font: var(--font_10);
  width: auto;
 
}
.card_type h1{
  color: rgb(var(--color_6));
}

@-webkit-keyframes shiny-btn1 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@media (max-width: 420px) {
input.whats-input[type=text] {
  width: 225px;
}
}
input.whats-input::placeholder {
/* Most modern browsers support this now. */
color: rgba(68, 68, 68, 0.705);
opacity: 1;
}
input.whats-input[type=text]:focus {
background-color: #f8f8f8;
-webkit-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
transition: 0.3s;
}
.icon-whatsapp-small {
width: 24px;
height: 24px;
}
.icon-whatsapp {
  width: 40px;
  height: 40px;
}
.icon-font-color {
  font-style: normal;
}
.icon-font-color--black {
  color: #333333;
  font-size: 22px;
  transform: rotate(321deg);
}