/*!
 * Torres — header and footer
 * edilandertorres.com · loaded on every page by TMCE_Public
 *
 * The Elementor Theme Builder templates carry markup only; all of their styling
 * and behaviour lives here and in site.js, so the two global templates stop
 * adding ~67 KB of inline CSS/JS to every single page view.
 */

/* ============================================================ HEADER */

.et-hd {
  position: fixed;
  top: var(--et-top, 0px);
  left: 0;
  right: 0;
  z-index: 9990;
  height: var(--et-h);
  background: rgba(12, 14, 18, 0.82);
  border-bottom: 1px solid transparent;
  transition: background var(--t2) var(--ez), border-color var(--t2) var(--ez);
}

/* The blur is applied only once the header is over content. A fixed,
   full-width backdrop-filter recomputes on every scroll frame; at the top of
   the page there is nothing behind it to blur. */
.et-hd.is-stuck {
  background: rgba(12, 14, 18, 0.9);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}

/* Reserves the space the fixed header takes out of the flow. This lives in the
   header template rather than as body padding because Elementor emits a
   per-page body rule that outranks a bare `body` selector. */
.et-hd__spacer {
  height: var(--et-h);
  flex: none;
  pointer-events: none;
}

.et-hd__prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cop), var(--copl));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.et-hd__in {
  max-width: var(--wrap);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.et-hd__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  text-decoration: none;
  color: var(--p);
  flex: none;
}

.et-hd__brand img {
  width: 27px;
  height: 17px;
  display: block;
}

.et-hd__brand b {
  font-family: var(--fd);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.et-hd__brand b i {
  font-style: normal;
  color: var(--cop);
}

@media (max-width: 379px) {
  .et-hd__brand b {
    display: none;
  }
}

.et-hd__nav {
  display: none;
  margin-inline: auto;
}

.et-hd__nav ul {
  display: flex;
  align-items: center;
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.et-hd__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 0;
  background: none;
  border: 0;
  color: var(--p72);
  font-family: var(--fb);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t1) var(--ez);
}

.et-hd__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cop);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t2) var(--ez);
}

.et-hd__link:hover,
.et-hd__link.is-here {
  color: var(--p);
}

.et-hd__link:hover::after,
.et-hd__link.is-here::after {
  transform: scaleX(1);
}

.et-hd__link svg {
  width: 10px;
  height: 10px;
  transition: transform var(--t2) var(--ez);
}

.et-hd__link[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.et-hd__has-drop {
  position: relative;
}

.et-hd__drop {
  pointer-events: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  width: min(620px, 78vw);
  padding: var(--s3);
  background: rgba(21, 23, 28, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez), visibility 0s linear var(--t2);
}

.et-hd__drop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez), visibility 0s;
}

.et-hd__drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.et-hd__sub {
  display: grid;
  gap: 2px;
  padding: 11px 13px;
  border-radius: var(--r1);
  text-decoration: none;
  transition: background var(--t1) var(--ez);
}

.et-hd__sub:hover {
  background: var(--cops);
}

.et-hd__sub b {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--p);
}

.et-hd__sub span {
  font-size: var(--fs-xs);
  color: var(--p58);
  line-height: 1.4;
}

.et-hd__drop-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line2);
}

.et-hd__drop-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cop);
  text-decoration: none;
}

.et-hd__drop-foot a:hover {
  color: var(--copl);
}

.et-hd__act {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
}

.et-hd__wa {
  display: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--p72);
  transition: all var(--t1) var(--ez);
}

.et-hd__wa:hover {
  border-color: var(--ok);
  color: var(--ok);
}

.et-hd__wa svg {
  width: 16px;
  height: 16px;
}

.et-hd__cta {
  display: none;
}

.et-hd__burger {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.et-hd__burger i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--p);
  border-radius: 2px;
  transition: transform var(--t2) var(--ez), opacity var(--t1) var(--ez);
}

.et-hd__burger[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.et-hd__burger[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}

.et-hd__burger[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (min-width: 1000px) {
  .et-hd__nav {
    display: block;
  }

  /* inline-flex, not block: .et-btn centres its label with align-items and
     justify-content, and both are inert on a block box. Overriding the display
     here is what pushed the label to the top of the pill. */
  .et-hd__cta {
    display: inline-flex;
  }
  .et-hd__wa {
    display: grid;
  }
  .et-hd__burger {
    display: none;
  }
}

/* --- drawer --- */

.et-hd__scrim {
  position: fixed;
  inset: 0;
  z-index: 9991;
  background: rgba(6, 7, 10, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t2) var(--ez);
}

.et-hd__scrim.is-on {
  opacity: 1;
  pointer-events: auto;
}

.et-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9992;
  width: min(340px, 88vw);
  padding: var(--s4) var(--s4) var(--s5);
  background: var(--srf);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t2) var(--ez);
}

.et-drawer.is-open {
  transform: none;
}

.et-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.et-drawer__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--p);
  cursor: pointer;
}

.et-drawer nav {
  display: grid;
  gap: 2px;
}

.et-drawer__link {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line2);
  color: var(--p);
  font-family: var(--fd);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.et-drawer__link.is-here {
  color: var(--cop);
}

.et-drawer__group {
  padding: var(--s2) 0 var(--s3);
  border-bottom: 1px solid var(--line2);
}

.et-drawer__group > p {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p58);
  margin-bottom: var(--s2);
}

.et-drawer__group a {
  display: block;
  padding: 7px 0;
  color: var(--p72);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.et-drawer__group a:hover {
  color: var(--cop);
}

.et-drawer__foot {
  margin-top: var(--s4);
  display: grid;
  gap: var(--s2);
}

.et-drawer__meta {
  font-family: var(--fm);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--p58);
  text-decoration: none;
}

.et-drawer__meta:hover {
  color: var(--cop);
}

/* ============================================================ FOOTER */

.et-ft {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.et-ft__top {
  position: relative;
  padding-block: var(--sec);
}

.et-ft__cta {
  display: grid;
  gap: var(--s4);
  align-items: end;
}

@media (min-width: 900px) {
  .et-ft__cta {
    grid-template-columns: var(--gr-a) var(--gr-b);
    gap: var(--s6);
  }
}

.et-ft__grid {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s5);
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
  .et-ft__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .et-ft__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--s4);
  }
}

.et-ft__col > p:first-child {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p58);
  margin-bottom: var(--s3);
}

.et-ft__col nav {
  display: grid;
  gap: 5px;
}

.et-ft__col nav a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--p72);
  font-size: var(--fs-sm);
  text-decoration: none;
  width: fit-content;
  transition: color var(--t1) var(--ez);
}

.et-ft__col nav a:hover {
  color: var(--cop);
}

.et-ft__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: var(--s3);
  text-decoration: none;
  color: var(--p);
}

.et-ft__brand img {
  width: 30px;
  height: 19px;
}

.et-ft__brand b {
  font-family: var(--fd);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.et-ft__brand b i {
  font-style: normal;
  color: var(--cop);
}

.et-ft__meta {
  display: grid;
  gap: 5px;
  margin-top: var(--s3);
}

.et-ft__meta button,
.et-ft__meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--p72);
  font-family: var(--fm);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  width: fit-content;
  transition: color var(--t1) var(--ez);
}

.et-ft__meta button:hover,
.et-ft__meta a:hover {
  color: var(--cop);
}

.et-ft__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}

.et-ft__bar p,
.et-ft__bar a {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.09em;
  color: var(--p58);
  text-decoration: none;
}

.et-ft__bar a:hover {
  color: var(--cop);
}

.et-ft__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.et-ft__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}

.et-ft__clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.et-ft__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(93, 190, 133, 0.5);
  animation: etPulse 2.6s var(--ez) infinite;
}

@keyframes etPulse {
  70% {
    box-shadow: 0 0 0 7px rgba(93, 190, 133, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(93, 190, 133, 0);
  }
}

.et-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9989;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--srf2);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--p);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez), border-color var(--t1) var(--ez);
}

.et-top.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.et-top:hover {
  border-color: var(--cop);
  color: var(--cop);
}

/* ============================================================ LANGUAGE */

/* English is served at the site root; every other language sits under its own
   prefix (/nl/, /fr/, /pt/, /de/, /it/, /es/). The markup ships static links to
   each language home so the switcher works with JavaScript off and is
   crawlable; site.js rewrites them to the equivalent of the current page.

   Deliberately no flags: a flag names a country, not a language, and the same
   language is spoken in several. The two-letter code carries the meaning and
   the native name confirms it. */

.et-lang {
  position: relative;
  flex: none;
}

/* --- trigger --- */

.et-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px 0 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--p72);
  font-family: var(--fm);
  font-size: var(--fs-mi);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color var(--t1) var(--ez), color var(--t1) var(--ez), background var(--t1) var(--ez);
}

.et-lang__btn:hover {
  border-color: var(--copm);
  color: var(--p);
  background: rgba(217, 126, 78, 0.07);
}

.et-lang__btn[aria-expanded="true"] {
  border-color: var(--cop);
  color: var(--p);
  background: var(--cops);
}

.et-lang__globe {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--cop);
}

.et-lang__chev {
  width: 8px;
  height: 8px;
  flex: none;
  opacity: 0.6;
  transition: transform var(--t2) var(--ez), opacity var(--t1) var(--ez);
}

.et-lang__btn:hover .et-lang__chev {
  opacity: 1;
}

.et-lang__btn[aria-expanded="true"] .et-lang__chev {
  transform: rotate(180deg);
  opacity: 1;
}

/* --- panel --- */

.et-lang__menu {
  pointer-events: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: 318px;
  padding: 14px;
  background: linear-gradient(180deg, #1b1e24 0%, #15171c 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(242, 239, 233, 0.05) inset, 0 26px 60px -12px rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez),
    visibility 0s linear var(--t2);
}

.et-lang__menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez), visibility 0s;
}

/* Notch tying the panel to the trigger. */
.et-lang__menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 22px;
  width: 9px;
  height: 9px;
  background: #1b1e24;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.et-lang__head {
  display: block;
  padding: 0 6px 10px;
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p58);
}

.et-lang__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.et-lang__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--p72);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--t1) var(--ez), color var(--t1) var(--ez), border-color var(--t1) var(--ez);
}

.et-lang__item:hover {
  background: rgba(242, 239, 233, 0.05);
  border-color: var(--line);
  color: var(--p);
}

.et-lang__code {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 6px;
  background: rgba(242, 239, 233, 0.06);
  font-family: var(--fm);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--p58);
  transition: background var(--t1) var(--ez), color var(--t1) var(--ez);
}

.et-lang__item:hover .et-lang__code {
  background: rgba(217, 126, 78, 0.16);
  color: var(--copl);
}

/* Current language: filled, with a tick rather than a bare dot. */
.et-lang__item[aria-current="true"] {
  background: var(--cops);
  border-color: var(--copm);
  color: var(--p);
}

.et-lang__item[aria-current="true"] .et-lang__code {
  background: var(--cop);
  color: #16100b;
}

.et-lang__item[aria-current="true"]::after {
  content: "";
  margin-left: auto;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--cop);
  border-bottom: 1.5px solid var(--cop);
  transform: rotate(-45deg) translate(1px, -2px);
}

/* --- drawer --- */

.et-drawer__lang {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line2);
}

.et-drawer__lang > p {
  font-family: var(--fm);
  font-size: var(--fs-mi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p58);
  margin-bottom: var(--s2);
}

.et-langgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.et-langgrid a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--p72);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--t1) var(--ez), color var(--t1) var(--ez), background var(--t1) var(--ez);
}

.et-langgrid a:hover {
  border-color: var(--copm);
  color: var(--p);
}

.et-langgrid a[aria-current="true"] {
  border-color: var(--copm);
  background: var(--cops);
  color: var(--p);
}

.et-langgrid a[aria-current="true"] .et-lang__code {
  background: var(--cop);
  color: #16100b;
}


/* --- upward variant, for the footer ---
   Same component as the header, flipped to open above the trigger. The footer
   used to spell all seven languages across the full width, which gave a
   secondary control more visual weight than the contact details above it.

   The trigger sits at the right end of the legal row on wide screens and at the
   left once that row wraps, so the panel anchors to whichever edge keeps it on
   screen. Anchoring it left at every width pushed it ~200px past the viewport. */

.et-lang--up .et-lang__menu {
  top: auto;
  bottom: calc(100% + 12px);
  right: 0;
  left: auto;
  transform-origin: bottom right;
  transform: translateY(8px) scale(0.98);
}

.et-lang--up .et-lang__menu.is-open {
  transform: none;
}

.et-lang--up .et-lang__menu::before {
  top: auto;
  bottom: -5px;
  right: 22px;
  left: auto;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #15171c;
}

/* Once the footer bar wraps, the trigger is on the left instead. */
@media (max-width: 639px) {
  .et-lang--up .et-lang__menu {
    right: auto;
    left: 0;
    width: min(318px, calc(100vw - 2 * var(--gut)));
    transform-origin: bottom left;
  }

  .et-lang--up .et-lang__menu::before {
    right: auto;
    left: 22px;
  }
}