/* Components of the shared frame. */

/* ---- Logo -------------------------------------------------------------------- */

.site-logo {
  flex: none;
  display: block;
  padding: 5px;
}

.site-logo img {
  width: auto;
  height: 52px;
}

@media (min-width: 48rem) {
  .site-logo img {
    height: 56px;
  }
}

/* ---- Language switch: pill with the current language filled -------------------- */
/* Header order: logo | menu | language switch | menu toggle (DOM keeps the toggle
   before the menu for a logical tab order). */

.language-switch {
  order: 2;
  flex: none;
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-background);
}

.language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: var(--text-menu);
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.language-switch a:hover {
  background: var(--color-border);
  color: var(--color-text-strong);
}

/* #757575 is the lightest grey that keeps white text at WCAG AA (4.6:1). */
.language-switch a[aria-current='true'] {
  background: var(--color-text-muted);
  color: #ffffff;
  view-transition-name: language-indicator;
}

/* Site tooltip (language switch options, footer share link): below the element by default,
   on hover and keyboard focus. Decorative: the accessible name comes from aria-label. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 6px;
  /* Fallback without backdrop-filter: solid grey with the same contrast. */
  background: rgb(110 110 110 / 0.96);
  color: #ffffff;
  font-size: var(--text-menu);
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--tooltip-x, -50%), -2px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tooltip-x, -50%), 0);
}

/* Glassmorphism: translucent grey with the background blurred behind it. The alpha keeps
   white text at 4.7:1 even over the white header (worst case). */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-tooltip]::after {
    background: rgb(80 80 80 / 0.8);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}

/* Tooltips follow the side their group is aligned to, so none leaves the screen: in a
   right-aligned group the rightmost one is anchored to its element's right edge, in a
   left-aligned group the leftmost one to its left edge; the others stay centred. Header:
   right-aligned (in the drawer the switch is not a child of the header). Footer and drawer
   bottom: see their sections. */
.site-header > .language-switch a:last-child::after {
  --tooltip-x: 0;
  left: auto;
  right: 0;
}

/* The filled pill slides from one language to the other when switching (cross-document
   view transitions); browsers without support just switch instantly. Only the pill is
   animated: the page itself swaps without a transition. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  ::view-transition-group(language-indicator) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ---- Main menu ----------------------------------------------------------------- */
/* Default: inline from 64rem, collapsed into a toggle below it. menu.js measures the
   real width and overrides the breakpoint with data-menu="inline|collapsed". Without
   scripting the menu is always shown and wraps. */

.main-menu {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.main-menu ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.main-menu li + li {
  border-left: 1px solid var(--color-border);
}

.main-menu li > a {
  display: block;
  padding: 0.15rem 0.55rem;
  color: var(--color-text-muted);
  font-size: var(--text-menu);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.main-menu li > a[aria-current='page'] {
  color: var(--color-text-strong);
}

.main-menu li > a[aria-current='page'] span {
  border-bottom: 2px solid var(--color-accent);
}

.menu-toggle {
  order: 3;
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
}

/* Collapsed state (phones and tablets): toggle visible, menu as a drawer that slides in
   from the right over a dimmed, blurred backdrop. menu.js sets .is-menu-open. */
/* With the language switch moved into the drawer, the toggle sits at the right itself. */
.site-header[data-menu='collapsed'] .menu-toggle {
  display: inline-flex;
  margin-left: auto;
}

.site-header[data-menu='collapsed'] .main-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(82vw, 320px);
  padding: 0 0 1.5rem;
  overflow-y: auto;
  background: var(--color-background);
  box-shadow: -8px 0 28px rgb(0 0 0 / 0.16);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}

.site-header[data-menu='collapsed'].is-menu-open .main-menu {
  transform: translateX(0);
  visibility: visible;
}

.site-header[data-menu='collapsed'] .main-menu ul {
  flex-direction: column;
  padding: 0.5rem 0;
}

.site-header[data-menu='collapsed'] .main-menu li + li {
  border-top: 1px solid var(--color-border);
  border-left: 0;
}

.site-header[data-menu='collapsed'] .main-menu li > a {
  padding: 0.95rem 1.5rem;
  border-left: 3px solid transparent;
  font-size: 0.875rem;
}

.site-header[data-menu='collapsed'] .main-menu li > a[aria-current='page'] {
  border-left-color: var(--color-accent);
  background: #faf8f4;
}

.site-header[data-menu='collapsed'] .main-menu li > a[aria-current='page'] span {
  border-bottom: 0;
}

.main-menu__top {
  display: none;
}

/* Drawer top bar: close button on the right. */
.site-header[data-menu='collapsed'] .main-menu__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border-strong);
  background: #f5f5f5;
}

.main-menu__bottom {
  display: none;
}

/* Drawer bottom: language switch after the items (pushed to the bottom when they are
   short), its left edge on the item text (item padding + the 3px current-page border). */
.site-header[data-menu='collapsed'] .main-menu__bottom {
  display: block;
  margin-top: auto;
  padding: 1rem 1.5rem 0 calc(1.5rem + 3px);
  border-top: 1px solid var(--color-border-strong);
}

.site-header[data-menu='collapsed'] .main-menu__bottom .language-switch {
  margin-left: 0;
}

/* Tooltips open above the switch at the bottom of the drawer; the group is aligned left. */
.site-header[data-menu='collapsed'] .main-menu__bottom .language-switch a::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.site-header[data-menu='collapsed'] .main-menu__bottom .language-switch a:first-child::after {
  --tooltip-x: 0;
  left: 0;
}

.menu-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.menu-close svg {
  width: 22px;
  height: 22px;
}

.site-header[data-menu='collapsed'] .menu-close {
  display: inline-flex;
}

.menu-backdrop {
  display: none;
}

.site-header[data-menu='collapsed'] .menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  background: rgb(40 40 40 / 0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.site-header[data-menu='collapsed'].is-menu-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
}

/* While the drawer is open the page behind it does not scroll. */
html.has-menu-open {
  overflow: hidden;
}

@media (max-width: 63.999rem) {
  .site-header:not([data-menu]) .menu-toggle {
    display: inline-flex;
  }

  .site-header:not([data-menu]) .main-menu {
    display: none;
  }
}

@media (scripting: none) {
  .site-header {
    flex-wrap: wrap;
    padding-block: 1.25rem 0.5rem;
  }

  .site-header .menu-toggle {
    display: none !important;
  }

  .site-header .main-menu {
    order: 4;
    display: block !important;
    flex-basis: 100%;
  }

  .site-header .main-menu ul {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
}

/* ---- Photo bands ------------------------------------------------------------------ */
/* The photo stays fixed while the page scrolls over it (legacy "parallax" look), anchored
   to the top like the legacy background (50% 0). The clipped container + fixed image
   technique also works on iOS Safari. Like the legacy, it does not depend on the
   reduced-motion preference: the photo itself never moves, only the page scrolls over it.
   On portrait screens a viewport-sized photo would be heavily cropped, so there the photo
   fills the band instead. object-fit keeps it undistorted. */

/* Visible heights match the legacy site, whose fixed header covered the first 80 px of
   the top band: top 220/280/380 px, bottom 320/350/450 px. */
.band {
  --band-height: 220px;
  position: relative;
  height: var(--band-height);
  overflow: hidden;
  clip-path: inset(0);
  background: var(--color-band-fallback);
}

.band--bottom {
  --band-height: 320px;
}

.band__picture,
.band__picture img {
  width: 100%;
  height: 100%;
}

.band__picture img {
  object-fit: cover;
  object-position: 50% 0;
}

/* The fixed photo takes the screen width at its own proportion and is only enlarged when
   it would not cover the part of the screen its band can pass over (less zoom than
   covering the whole screen, and no uncovered gaps): the top band stays between the top
   of the screen and its own height below the sticky header; the bottom band can pass
   over the whole screen except the area hidden behind the header. */
@media (orientation: landscape) {
  .band__picture img {
    position: fixed;
    left: 0;
    width: 100vw;
    height: auto;
  }

  .band--top .band__picture img {
    top: 0;
    min-height: calc(var(--header-height) + var(--band-height));
  }

  .band--bottom .band__picture img {
    bottom: 0;
    min-height: calc(100vh - var(--header-height));
  }

  /* Per-page framing. A top photo can move down up to the header height (the gap above it
     stays hidden behind the sticky header). */
  .band--areas-top .band__picture img {
    top: var(--header-height);
  }

  /* Pages whose two bands read as one photo: the top photo gets the bottom band's size, so
     both share the same zoom; it starts right below the header with its top edge, and the
     bottom photo ends with its lower edge at the bottom of the screen. Sized only for what
     the bottom band passes over (its own height plus the site footer below it), which
     needs less zoom. */
  .band--careers-top .band__picture img {
    top: calc(var(--header-height) - 30px);
  }

  .band--contact-top .band__picture img {
    top: var(--header-height);
  }

  .band--contact-top .band__picture img,
  .band--contact-bottom .band__picture img,
  .band--careers-top .band__picture img,
  .band--careers-bottom .band__picture img {
    min-height: var(--paired-photo-height);
  }
}

/* Bottom band height (350/450 px) + 280 px for the site footer below it (about 250 px with
   two columns), never more than the visible screen. Below 48rem the footer stacks and is
   tall, so the photo covers the visible screen (below the header). */
.band--contact-top,
.band--contact-bottom,
.band--careers-top,
.band--careers-bottom {
  --paired-photo-height: calc(100vh - var(--header-height));
}

@media (min-width: 48rem) {
  .band--contact-top,
  .band--contact-bottom,
  .band--careers-top,
  .band--careers-bottom {
    --paired-photo-height: min(630px, calc(100vh - var(--header-height)));
  }
}

@media (min-width: 64rem) {
  .band--contact-top,
  .band--contact-bottom,
  .band--careers-top,
  .band--careers-bottom {
    --paired-photo-height: min(730px, calc(100vh - var(--header-height)));
  }
}

.band__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 20px;
  background: var(--color-strip);
  color: #ffffff;
  font-size: var(--text-caption);
  font-style: italic;
  line-height: 1.35;
}

.band--fallback {
  background: linear-gradient(160deg, #6b6b6b, var(--color-band-fallback) 60%, #474747);
}

@media (min-width: 48rem) {
  .band {
    --band-height: 280px;
  }

  .band--bottom {
    --band-height: 350px;
  }
}

@media (min-width: 64rem) {
  .band {
    --band-height: 380px;
  }

  .band--bottom {
    --band-height: 450px;
  }

  .band__caption {
    min-height: 44px;
  }
}

@media (min-width: 120rem) {
  .band__caption {
    padding-inline: var(--gutter);
  }
}

/* ---- Footer ------------------------------------------------------------------------ */

/* LinkedIn, phone, email and address (map link) on the left, the menu pages (two columns) on
   the right; stacked on phones. Bottom bar: copyright and language switch. */
.site-footer__main {
  display: grid;
  gap: 2rem;
}

.site-footer__channels {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  font-style: normal;
}

.site-footer__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 24px;
}

.site-footer__channel svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* The address has two lines: icon aligned with the first one. */
.site-footer__channel--address {
  align-items: flex-start;
}

.site-footer__channel--linkedin:hover {
  color: #0a66c2;
}

.site-footer__menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}

.site-footer__menu li {
  break-inside: avoid;
  padding-bottom: 0.6rem;
}

.site-footer__menu a {
  display: inline-block;
  min-height: 24px;
}

.site-footer__menu a:hover {
  text-decoration: underline;
}

.site-footer__menu a[aria-current='page'] {
  color: var(--color-text-strong);
  font-weight: 600;
}

/* Phones: company name on top, share link and language switch below it. */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0 1rem;
  border-top: 1px solid var(--color-border-strong);
}

/* WhatsApp share link to the right of the language switch: icon only, darker on hover. */
.site-footer__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.site-footer__share:hover {
  color: var(--color-text-strong);
}

.site-footer .language-switch {
  order: 0;
  margin-left: 0;
}

/* At the bottom of the page the tooltips open above the controls, and only the header pill
   takes part in the language view transition (names must be unique). */
.site-footer [data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

/* Phones: the controls are aligned left, so the first tooltip is anchored left. */
.site-footer .language-switch a:first-child::after {
  --tooltip-x: 0;
  left: 0;
}

.site-footer .language-switch a[aria-current='true'] {
  view-transition-name: none;
}

@media (min-width: 48rem) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-footer__menu {
    justify-self: end;
  }

  /* From 48rem the controls are aligned right: first tooltip centred, share anchored right. */
  .site-footer .language-switch a:first-child::after {
    --tooltip-x: -50%;
    left: 50%;
  }

  .site-footer__share::after {
    --tooltip-x: 0;
    left: auto;
    right: 0;
  }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* Small plain button (also used for links that look like buttons, e.g. "Ver no Google
   Maps"). */
.button-compact {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 0.75rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #ffffff;
  color: var(--color-text-strong);
  text-decoration: none;
}

.button-compact:hover {
  border-color: #aaaaaa;
  background: #fafafa;
}

/* ---- Error pages ------------------------------------------------------------------- */

.error-page h1 {
  color: var(--color-text);
  font-size: var(--text-heading);
  font-weight: 600;
}

.error-page p {
  margin-top: 0.75rem;
}

.error-page {
  padding-block: 2rem 3rem;
}

.error-page a {
  color: var(--color-text-strong);
  text-decoration: underline;
}

.error-page h2 {
  margin-top: 2.5rem;
  font-size: var(--text-heading);
  font-weight: 600;
}

/* ---- Skip link ------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 20;
  padding: 0.5rem 0.9rem;
  background: var(--color-background);
  color: var(--color-text-strong);
  font-size: var(--text-small);
  box-shadow: 0 0 3px 1px var(--color-shadow);
}

.skip-link:focus {
  top: 8px;
}

.site-main:focus {
  outline: none;
}