:root {
  --primary-color: #262626; 
  --accent-color: #fff; 
  --grey-color: #848484; 
  --dark-color: #494D4E; 
}

.template-section-full {
   width: 100%;
   margin-left: 0;
   margin-right: 0;
   padding: 0px;
   display: flex;
   flex-direction: row;
   gap: 20px;
   flex-wrap: wrap;
}

/* @media screen and (min-width: 768px) {
   .template-section-full {
      padding: 0px 30px;
      flex-wrap: nowrap;
   }
}

@media screen and (min-width: 1024px) {
   .template-section-full {
      padding: 0px;
      flex-wrap: nowrap;
   }
} */

.template-section {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 30px;
   padding-right: 30px; 
   padding-top: 0px;
   padding-bottom: 0px;
   display: flex;
   flex-direction: row;
   gap: 20px;
   flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
   .template-section {
      flex-wrap: nowrap;
      padding-left: 50px;
      padding-right: 50px; 
      padding-top: 0px;
      padding-bottom: 0px;
   }
}

@media screen and (min-width: 1270px) {
   .template-section {
      width: 1220px;
   }
}

.template-content {
   width: 100%;
   padding: 0px;
   display: flex;
   flex-direction: row;
   gap: 20px;
   margin-left: auto;
   margin-right: auto;
}

.template-column {
   flex-direction: column !important;
   gap: 20px !important;
}
.template-row {
   flex-direction: row;
   gap: 20px;
}
.template-wrap {
   flex-wrap: wrap;
}

/* ------------- */
.body_style { 
   background: #1C1C1C; 
   color: var(--accent-color);
	font-family: var(--e-global-typography-secondary-font-family);
   font-size: 20px;
   font-weight: 400px;
}

header {
   background-image: url("https://drguidoperezb.com/wp-content/uploads/2026/05/dr-guido-perez-fondo.png");
   background-size: cover;
   background-position: center;
   background-color: var(--primary-color);
}
.template-header-stiky{
   position: sticky;
   top: 0;
   z-index: 999;

   .template-header-info{
      display: flex;
      flex-direction: row;
      height: 50px;
      align-items: center;
      background-color: #000;
      color: #fff;
      font-family: var(--e-global-typography-primary-font-family);

      @media screen and (max-width:768px) {
         display: none;
      }

      @media screen and (min-width:768px) {
         font-size: 12px;
      }

      @media screen and (min-width:1024px) {
         font-size: 14px;
      }
   }


   .template-header-fixed-menu-content{
      justify-content: space-between;
      align-items: center;
   }

   .template-header-fixed-menu-logo{
      width: 50%;
   }
}

.template-menu-mobile-icon{
   width: 52px;
   height: 52px;
   stroke: #fff;
   fill: #fff;

   display: block;
   @media screen and (min-width:1025px) {
      display: none;
   }
}

.template-header-fixed-menu{
   background-color: rgba(0, 0, 0, 70%);
   padding: 10px 0px;
}

.template-header {
   padding-top: 30px;
   padding-bottom: 30px;
   justify-content: space-between;

   @media screen and (min-width:768px) {
      padding-top: 50px;
      padding-bottom: 50px;
   }
}

.template-header-logo {
   width: 50%;
   @media screen and (min-width:768px) {
      max-width: 221px;
   }
}

.template-header-menu{
   align-items: center;
   justify-content: flex-end;

   @media screen and (max-width:1024px) {
      display: none;
   }

   .template-menu-mobile-icon{
      display: none;

      @media screen and (max-width:1024px) {
         display: block;
      }
   }
}


.template-hero {
   img {
      height: 100%;
      width: 100%;
      object-fit: cover;
   }

   .template-hero-content {
      padding: 100px 0px;
   }

   @media screen and (max-width: 1024px) {
      flex-direction: column-reverse;

      img {
         height: 350px;
      }
   }
}

.img-fit{
   height: 100% !important;
   width: 100% !important;
   object-fit: cover;

   img {
      height: 100% !important;
      width: 100% !important;
      object-fit: cover;
   }
}

.template-article{
   padding: 100px 0px;
}

.template-archive{
   padding: 200px 0px;
}

.text-higlight {
   font-size: 22px;
   font-weight: 300;
}

.eyebrow {
   font-size: 15px;
   font-weight: 700;
}

.text-display {
   font-family: var(--e-global-typography-primary-font-family);
   font-size: 55px;
   font-weight: 400;
}

.template-menu{
   display: flex;
   gap: 26px;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   font-family: var(--e-global-typography-secondary-font-family);

   @media screen and (max-width:768px) {
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   a, a:visited, a:active, a:hover {
      color: var(--accent-color);
      text-decoration: none;
   }

   a:hover{
      text-decoration: underline;
   }
}

.button-primary {
   background: linear-gradient(180deg, #494D4E 0%, #262626 100%);
   color: var(--accent-color);
   padding: 10px 19px;
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
   border: 2px solid var(--accent-color);
   border-radius: 73px;
   text-decoration: none;
   display: inline-block;
   width: fit-content;

   &:hover {
      color: var(--accent-color);
   }
}

.template-social-btn{
   display: flex;
   gap: 20px;
   list-style: none;
}

footer {
   padding: 128px 0px 30px;
   background-color: var(--primary-color);

   .template-footer-blog{
      align-items: center;
   }

   .template-legal{
      color: var(--dark-color);
   }

   .template-footer-links{
      margin-top: 100px;
      flex-direction: column;
      & .template-content {
         justify-content: center;
         width: auto;
      }

      & .template-menu {
         justify-content: center;
      }

      @media screen and (min-width: 769px) {
         & .template-content {
            width: 100%;
         }
      }

      @media screen and (min-width:1204px) {
         justify-content: space-between;
         flex-direction: row;
         & .template-content {
            justify-content: space-between;
         }

         & .template-menu {
            justify-content: flex-start;
         }
      }

      
   }

   .template-legal {
      p {
         text-wrap-mode: wrap;
         font-size: 13px;
         font-weight: 700;
      }
   }
}

.template-mobile-menu {
   display: flex;
   flex-direction: column;
   gap: 40px;
   justify-content: center;
   align-items: center;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;

    justify-content: center;
    align-items: center;

    .template-menu{
      flex-direction: column;
      align-items: center;
    }
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
}

.lightbox video {
    width: 100%;
    max-height: 80vh;
    display: block;
}

.lightbox-close {
    position: relative;
    top: 0px;
    left: 90%;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
}