body.custom-html-template { margin: 0; }                 /* removes the default 8px body margin */
.custom-html-template #app.custom-wrap { padding: 0; max-width: none; }  /* <main> has no side padding */
.custom-html-template main > section { margin: 0; }      /* prevent section margins from creating gaps */
.custom-html-template h1, 
.custom-html-template p { margin-top: 0; }  

/* 1) Transparent overlay header*/
.custom-html-template .site-header--overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000; background: transparent;
}
.custom-html-template .site-header--overlay .container {
  height: var(--header-h, 80px);
  display: flex; align-items: center; justify-content: space-between;
}

/* 2) Full-bleed hero background (image goes under header, no side padding) */
.custom-html-template .hero {
  position: relative;
  width: 100%;
  background: var(--hero-img) center/cover no-repeat;  /* set in the <section style="--hero-img:url(...)" */
  color: #fff; 
  padding-bottom: 56px;
  height: calc(100dvh - var(--header-h));;
  /* DO NOT add left/right padding here – the inner .container handles content width */
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
}

.custom-html-template .hero__scroller {
  position: absolute;
  inset: 0;
  overflow: hidden;
  height: 100%;
}

.custom-html-template .hero__track {
  display: flex;
  width: calc(2500px * 2); /* two images wide */
  animation: slide 50s linear infinite;
  height: 100%;
}

.custom-html-template .hero__track img {
  width: 2500px;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-2500px); }
}

/* Content on top */
.custom-html-template .hero__content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 10% 10px 10px 10px;
  height: calc(100% - 80px);
  width:100%;
  display:flex;
  justify-content: flex-start;
  align-items: center;
}
.custom-html-template .hero__content .content-title {
  font-size: 75px;
  font-weight: 400;
  text-align: left;
  margin-top: -160px;
  line-height:100px;
}

.custom-html-template .aboutus-section {
  width: 100%;
  height:75vh;
  display: flex;
    align-items: center;
}

.custom-html-template .aboutus-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 50vh;
}
.custom-html-template .aboutus-container .aboutus-left {
  padding-right:20px;
  width: 40%;
  height:100%;
}
.custom-html-template .aboutus-container .aboutus-left .title-1 {
  font-size:22px;
  height: 20%;;
  font-family: "Host Grotesk";
  color:#7B8899;
  font-weight: 300;
  margin-bottom: 60px;

}
.custom-html-template .aboutus-container .aboutus-left .aboutus-img{
  background:var(--logo-img2);
  background-repeat: no-repeat;
  background-size:contain;
  height:80%;
      height: calc(83% - 20px);
    margin-top: 20px;
}
.custom-html-template .aboutus-container  .aboutus-right {
  display:flex;
  width: 60%;
  flex-direction: column;
  height:100%;
}


.custom-html-template .aboutus-container .aboutus-right .title-1{
  font-size:54px;
  font-family: "Funnel Display";
  font-weight: 400;
  line-height: 70px;
  margin-bottom: 30px;
}
.custom-html-template .aboutus-container .aboutus-right .title-1 span{
  color:#001738;
  text-decoration: underline;
}
.custom-html-template .aboutus-container .aboutus-right .title-2{
  font-family: "Host Grotesk";
  color:#001738;
  font-weight: 300;
  font-size: 22px;
  margin-top:5px;
}

.custom-html-template .aboutus-container .aboutus-right .title-3{
  font-size:clamp(28px, 4vw, 60px);
  font-family: "Funnel Display";
  font-weight: 400;
  display:flex;
}
.custom-html-template .aboutus-container .aboutus-right .title-3-left{
  width:200px
}
.custom-html-template .aboutus-container .aboutus-right .title-3-number{
  font-size: 64px;
}
.custom-html-template .aboutus-container .aboutus-right .title-3-text{
  font-size: 22px;
  font-family: "Host Grotesk";
  font-weight: 300;
}
.custom-html-template .aboutus-container .aboutus-right .title-3-right{
  width:200px;
}

/* optional contrast overlay for readability */
.custom-html-template .hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
  z-index: 0;
}
.custom-html-template .hero__grid { display:flex;position: relative; z-index: 1; }
.custom-html-template .hero__left { display:flex;position: relative; width:80%; z-index: 1; }
.custom-html-template .hero__right { width:20%;}

.custom-html-template .ltag{
  display:flex;
  justify-content: center;
  align-items: center;
}
.custom-html-template .ltag-content{
  border-radius: 40px;
  padding:10px;
  color:#7E0000;
  background: #FAEFE0;
  width: 120px;
  height:20px;
  text-align: center;
  margin-bottom: 15px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.custom-html-template .separator{
  width:100%;
  height:1px;
  background: gray;
}

/* ===== respect user’s motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  [data-anim], .modal, .modal__panel, .modal__backdrop { 
    animation: none !important; transition: none !important; 
  }
}

/* ===== generic animation tokens ===== */
[data-anim] { 
  --anim-name: fade-in;       /* default */
  --anim-dur: .7s;
  --anim-ease: cubic-bezier(.22,.61,.36,1);
  --anim-delay: 0s;
  opacity: 0;
}
[data-anim].is-inview { 
  animation: var(--anim-name) var(--anim-dur) var(--anim-ease) var(--anim-delay) forwards; 
}

/* map data-anim="…" to keyframes */
[data-anim="fade"]       { --anim-name: fade-in; }
[data-anim="up"]         { --anim-name: fade-up; transform: translateY(16px); }
[data-anim="left"]       { --anim-name: slide-left; transform: translateX(24px); }
[data-anim="right"]      { --anim-name: slide-right; transform: translateX(-24px); }
[data-anim="blur"]       { --anim-name: blur-in; filter: blur(6px); }
[data-anim="scale"]      { --anim-name: scale-in; transform: scale(.96); }

/* keyframes */
@keyframes fade-in   { to { opacity: 1; } }
@keyframes fade-up   { to { opacity: 1; transform: translateY(0); } }
@keyframes slide-left{ to { opacity: 1; transform: translateX(0); } }
@keyframes slide-right{to { opacity: 1; transform: translateX(0); } }
@keyframes blur-in   { to { opacity: 1; filter: blur(0); } }
@keyframes scale-in  { to { opacity: 1; transform: scale(1); } }

/* ===== text stagger (per-word/per-char) ===== */
.text-stagger .piece { 
  opacity: 0; transform: translateY(.5em); 
  animation: fade-up .6s var(--anim-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger, .05s));
}
.text-stagger.is-inview .piece { opacity: 1; transform: none; }

/* Scroll suave nativo */
html { scroll-behavior: smooth; }

/* Alturas/gutters y offset del header (solo en esta plantilla) */
body.custom-html-template {
  --header-h: 80px;                  /* ajústalo a tu header real */
   --headerm-h: 55px; 
  --admin-bar: 0px;                    /* WP admin bar (32px si estás logueado en desktop) */
  --anchor-offset: calc(var(--header-h) + var(--admin-bar) + 8px);
}

/* Que los anclajes no queden tapados por el header */
.section{
  overflow-x: hidden;
  scroll-margin-top: 80px;
}
.section, .hero, [id] { scroll-margin-top: var(--anchor-offset); }

/* La primera sección ocupa toda la pantalla (y respeta el header overlay) */
.vh-section {
  min-height: calc(100dvh - var(--header-h));
  position:relative;
  
}
.custom-html-template .services-section{
  padding-top: 50px;
  height:108vh;
  overflow: hidden;
}
.custom-html-template .services-title{
  font-size: clamp(24px, 4vw, 64px);
  text-align: center;
  font-family: "Funnel Display";
  font-weight: 400;
  color:#001738;
  line-height: 70px;
  margin-bottom: 80px;
  padding: 0 150px;
}
.custom-html-template .services-container{
  display:flex;
  gap: 5%;
  margin-bottom: 60px;
}
.custom-html-template .services-img-container{
  overflow:hidden;
  height: 550px;
  position:relative;
  width:450px;
}
.custom-html-template .services-img-pan{
   position: relative;
    top: 0;
    height: 550px;                             /* full screen window */
    overflow: hidden;
    width:450px;
    border-radius: 20px;
}
.custom-html-template .services-img-pan img {
  position: absolute; left: 0; top: 0;
  width: 100%;
  height: auto;
  min-height: 250%;         /* at least as tall as the 500px window */
  object-fit: cover;
  transform: translateY(0); /* will be updated in JS (px) */
  will-change: transform;
}

@keyframes panY {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }       /* move up by half its height */
}

.custom-html-template .services-img-container .services-img{
  background: var(--texture-2);
  height: 100%;
  width:100%;
  border-radius: 0 20px 20px 0;
}
.custom-html-template .services-acc{
  width: 55%;
}

/*accordion*/

.custom-html-template .acc{ --acc-div:#e5e7eb; --acc-pad:20px; --acc-dur:580ms; }
.custom-html-template .acc__item{ border-bottom:2px solid var(--acc-div); }
.custom-html-template .acc__title{ margin:0; }

.custom-html-template .acc__btn {
  appearance:none; -webkit-appearance:none; background:none; border:0;
  width:100%; text-align:left;
  padding: var(--acc-pad) 0;
  font-family: "Host Grotesk";
  cursor:pointer; display:flex; align-items:center; gap:12px; position:relative;
  color:#003F62; font-weight:600; font-size:30px;
}

.custom-html-template .acc__btn span {
  font-family: "Host Grotesk";
  cursor:pointer; color:#003F62;
  font-weight:300; font-size:20px;
  margin-top:7px;
}

/* the icon container */
.custom-html-template .acc__btn::after,
.custom-html-template .acc__btn::before {
  content: "";
  position: absolute;
  right: 0;                     /* place at the far right */
  top: 50%;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: translateY(-50%);
  transition: transform .25s ease, opacity .25s ease;
}

/* vertical bar of the plus (we'll rotate it away later) */
.custom-html-template .acc__btn::before {
  transform: translateY(-50%) rotate(90deg);
}

/* when open — remove vertical bar so it becomes a minus */
.custom-html-template .acc__item.is-open .acc__btn::before {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.custom-html-template .acc__content{
  
  height:0;
  transition: height var(--acc-dur) cubic-bezier(.22,.61,.36,1);
  will-change: height;
  padding-right: 0; /* no side padding here; keep it in container if needed */
  font-family:"Host Grotesk";
  font-size: 18px;
  font-weight:300;
  color:#7B8899;
  max-height: 300px; /* or whatever you want */
  overflow-y: auto;
  padding-right: 8px; /* avoids scrollbar overlap */
  scroll-behavior: smooth;
}
/*.acc__item.is-open .acc__content{  JS will set height; this is just a state hook }*/ 
.acc__content::-webkit-scrollbar {
  width: 6px;
}
.acc__content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}
.custom-html-template .team-section{
  height: 76vh;
}

.custom-html-template .team-detail .team-img{
  height: 311px;
  width: 95%;
  cursor:pointer;
  overflow:hidden;
  display:flex;
  align-items: flex-end;
}
.custom-html-template .team-detail .team-img:hover{
  background:#fff;
  overflow:hidden;
}
.custom-html-template .team-detail .team-img img{
  opacity:0.7;
  transition: opacity 0.5s ease, transform 0.5s ease;;
  width: 100%;
}
.custom-html-template .team-detail .team-img img:hover{
  opacity:1;
  transform: scale(1.3)
}

.custom-html-template .team-container{
  display:flex;
  width: 100%;
  height: 66%;
  padding-top: 30px;
  gap:2%;
}
.custom-html-template .team-title{
  font-size: 64px;
  text-align:center;
  font-weight:400;
  line-height: 70px;
  color:#001738;
  font-family:"Funnel Display";
  padding-top: 50px;
}
.custom-html-template .team-detail{
  width: 225px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.custom-html-template .team-detail .team-name{
  font-family: "Host Grotesk";
  font-size: 18px;
  font-weight:500;
  color: #001738;
  padding: 10px 0px 0px 0px;
}
.custom-html-template .team-detail .team-position{
  font-family: "Host Grotesk";
  font-size: 16px;
  font-weight:300;
  color: #001738;
  padding: 10px 0px 0px 0px;
}
.custom-html-template .team-detail .team-email{
  font-family: "Host Grotesk";
  font-size: 16px;
  font-weight:300;
  color: #003F62;
  padding: 10px;
}
.team-background{
  background:#F5F7FA;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .acc__content{ transition:none; }
}

/* ===== modal (over hero, bottom-right) ===== */
.custom-html-template  .hero__modal { 
  position: absolute; bottom: 100px; right:0px; width: 680px; height:230px; display: block; z-index: 20; background: purple;
  border-radius:20px 0px 0px 20px;
  overflow: hidden;
  cursor:pointer;
}
.custom-html-template  .hero__modal .hero__modal-txt { 
  position: absolute; bottom: 0px; left:0px; width: 90%; height:100%; z-index: 25;
  border-radius:20px 0px 0px 20px;
  color:#fff;
  font-family: "Funnel Display";
   display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}
.custom-html-template  .hero__modal .hero__modal-icon { 
  position: absolute; bottom: 20px; right:30px;z-index:30;
  width: 35px;
  padding: 20px;
}
.custom-html-template  .hero__modal .hero__modal-icon img{ 
 width: 100%;
}
.custom-html-template  .hero__modal .hero__modal-txt img { 
  height: 200%;
  width: 100%;
}
.custom-html-template .modal-txt-title{
  font-size: 22px;
  height:30%;
  font-weight: 500;
  width: 100%;
  padding: 0 20px 0px 10px;
  margin-bottom:10px;
  font-family:"Funnel Display";
  line-height: 30px;
}
.custom-html-template .modal-txt-subtitle{
  font-size: 18px;
  height:15%;
  font-weight: 300;
  width: 100%;
   padding: 0 20px 0px 10px;
   font-family: "Host Grotesk";
}
.custom-html-template .hero__modal-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  width:100%;
  height:100%;
  background: linear-gradient(
    to bottom,
    transparent 20%,          /* top half transparent */
    rgba(0,0,0,0.6) 35%,      /* fading zone */
    #001738 80%                 /* solid at bottom */
  );
}
.custom-html-template .team-modal{
  width: 100%;
  height: 100%;
  position: fixed;
  right:0;
  top:0;
  background: rgba(2, 34, 51, 0.7);
  z-index:100;
  display:none;
}
.custom-html-template .team-modal.active{
  display:block;
}
.custom-html-template .team-modal__content{
  width: 60%;
  height: 66%;
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  left:0;
  margin:auto;
  background: white;
  display:flex;
  gap: 2%;
  padding: 20px;
   border-radius:20px;
   box-shadow:1px 1px 3px rgba(0,0,0,0.2);
   display: none;
}
.custom-html-template .team-modal__content.active {
   display: flex;
}
.custom-html-template .team-modal__close{
  position:absolute;
  right:10px;
  top:20px;
  width: 30px;
  height: 30px;
  cursor:pointer;

}
.custom-html-template .team-modal__content .content-img{
  width: 35%;
}
.custom-html-template .team-modal__content .content-img img{
  width: 100%;
}
.custom-html-template .team-modal__content .content-txt{
  width: 65%;
}
.custom-html-template .team-modal__content .content-txt__name{
  font-family:"Funnel Display";
  font-size: 40px;
  color: #001738;
  font-weight: 400;
  padding:20px 20px 0px 0px;
}
.custom-html-template .team-modal__content .content-txt__lang{
  font-family:"Host Grotesk";
  font-size: 16px;
  color: #003F62;
  font-weight:300;
  font-style: italic;
  padding:10px 0;
}
.custom-html-template .team-modal__content .content-txt__desc{
  font-family:"Host Grotesk";
  font-size: 16px;
  color: #7B8899;
  font-weight:300;
  padding:10px 20px 20px 0px;
}
.modal__panel {
  position: absolute; right: 24px; bottom: 24px;
  width: min(55vw, 960px); height: 312px;
  background: #0b0f1a url("") center/cover no-repeat; /* set an image if you want */
  color: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: translateX(40px); opacity: 0;
  animation: modal-in .5s var(--anim-ease) forwards;
}
@keyframes modal-in { to { transform: translateX(0); opacity: 1; } }
@keyframes modal-out{ to { transform: translateX(40px); opacity: 0; } }

/* title gradient overlay above bg, below text */
.modal__title-wrap { position: relative; padding: 20px 24px 28px; }
.modal__title-wrap::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 120px; 
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index: 0; pointer-events: none;
}
.modal__title { position: relative; z-index: 1; font-size: clamp(20px, 3vw, 32px); margin: 0; }

/* modal body */
.modal__body { padding: 0 24px 24px; }

/* close button */
.modal__close {
  position: absolute; top: 10px; right: 10px; 
  background: rgba(255,255,255,.12); border:0; color:#fff; 
  width:36px;height:36px;border-radius:50%; cursor:pointer;
}

/* small screens */
@media (max-width: 900px){
  .modal__panel{ left: 16px; right: 16px; width: auto; height: auto; min-height: 320px; }
}




.custom-html-template .contact-section{
 width:100%;
 height: 66vh;
 position:relative;
}
.custom-html-template .contact-panel{
  width: 100%;
  display:flex;
  justify-content: center;
}
.custom-html-template .contact-panel01{
  background:#F5F7FA;
  width:100%;
  height: 70%;
 
}
.custom-html-template .contact-panel02{
    background:#011738;
  width:100%;
  height:30%;
 
}
.custom-html-template .contact-panel .contact-card{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width: 63%;
  height: fit-content;
  display:flex;
  padding: 50px 30px 10px 30px;
  background:#fff;
  border-radius: 20px;
}
.custom-html-template .contact-panel .contact-card-left{
  width: 60%;
  padding-right: 20px;
}
.custom-html-template .contact-card-left .info-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
  grid-template-rows: repeat(2, auto);   /* 2 rows */
  gap: 5px 5px; /* optional spacing */
  width: 100%; /* example fixed width */
}

.custom-html-template .contact-card-left .info-cell .title{
  color:#003F62;
  font-family:"Host Grotesk";
  font-size:18px;
  font-weight:500;
}
.custom-html-template .contact-card-left .info-cell .subtitle{
  color:#001738;
  font-family:"Host Grotesk";
  font-size:18px;
  font-weight:300;
}

.custom-html-template .contact-card-left .title-xl{
  font-size:64px;
  font-family:"Funnel Display";
  color:#001738;
  margin-top: 10px;
}
.custom-html-template .contact-card-left .contact-desc{
  font-size:22px;
  font-family:"Host Grotesk";
  color:#7B8899;
  margin-bottom: 30px;
}

.custom-html-template .contact-panel .contact-card-right{
  width:40%;
}
.custom-html-template .contact-card-right .pill-group{
    display: flex;
  flex-wrap: wrap;       
  gap: 8px;              
  align-content: flex-start; 
  margin-bottom:20px;
}
.custom-html-template .contact-card-right .title-md{
    font-size:30px;
    color:#003F62;
    font-family:"Host Grotesk";
    margin-bottom:20px;
    font-weight:600;
}
.custom-html-template .contact-card-right .label{
    font-size:18px;
    color:#606060;
    font-family:"Host Grotesk";
    font-weight:300;
    margin-bottom:10px;
}
.custom-html-template .contact-card-right .pill{
    padding: 5px;
    border: 1px solid #003F62;
    border-radius: 5px;
    color:#001738;
    font-family:"Host Grotesk";
}

/* hover state */
.custom-html-template .contact-card-right .pill:hover {
  background: rgba(0, 63, 98, 0.05);
  cursor:pointer;
}

/* checked (selected) state */
.custom-html-template .contact-card-right input:checked + .pill {
  background: #003F62;
  color: #fff;
  border-color: #003F62;
}

.custom-html-template .contact-form {
  display: flex;
  flex-direction: column;  /* stack children vertically */
  gap: 12px;               /* space between fields */
  
}

.custom-html-template .contact-form .field,
.custom-html-template .contact-form .btn {
  width: 100%;             /* make inputs/buttons fill container */
  box-sizing: border-box;  /* include padding in width */
  background:#003F6299;
  color:#606060;
}

.custom-html-template .contact-form .btn {
  border-radius:10px;
  height:40px;
  border:none;
  cursor:pointer;
  font-family:"Host Grotesk";
  font-size:18px;
  font-weight:300;
  color:#fff;
}

.custom-html-template .contact-form .field {
  border: none;                  /* remove all borders */
  border-bottom: 2px solid #ccc; /* keep only bottom border */
  background: transparent;       /* no gray background */
  padding: 8px 4px;              /* some breathing room */
  outline: none;                 /* remove browser’s blue outline */
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
}

.custom-html-template .contact-form .field:focus {
  border-bottom-color: #1f73ff;
}
.custom-html-template .contact-form textarea.field {
  resize: none;                  /* optional: disable resizing */
  min-height: 40px;              /* make it not huge */
}

/*// animations //*/
.custom-html-template .slidein-top {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity 1s ease, transform 1s ease;
}

.custom-html-template .section.animate .slidein-top {
  opacity: 1;
  transform: translateY(0);
}

.slidein-left {
  opacity: 0;
  transform: translateX(100px);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* When section becomes visible */
.section.animate .slidein-left {
  opacity: 1;
  transform: translateX(0);
}
.slidein-bottom {
  opacity: 0;
  transform: translateY(-100px);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* When section becomes visible */
.section.animate .slidein-bottom {
  opacity: 1;
  transform: translateY(0);
}