/* Institutional pages: home (slideshow, intro blocks, featured projects), text pages
   (Company, Areas of expertise) and the Clients logo grid. Mobile first. */

/* ---- Shared ------------------------------------------------------------------------ */

.section-title {
  margin-block: 1.5rem 0.6rem;
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.4;
}

.section-title--center {
  text-align: center;
}

.section-subtitle {
  margin-block: 1rem 0.25rem;
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 600;
}

.divider {
  height: 2px;
  margin: 1.5rem 0;
  border: 0;
  background: linear-gradient(to right, rgb(228 228 228 / 0), rgb(228 228 228 / 0.8), rgb(228 228 228 / 0));
}

/* Legacy text pages: justified paragraphs and disc lists, with the same side margins as
   the home page (the section gutter). */
.text-page {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
}

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

.bullet-list {
  margin: 0.3rem 0 0.3rem 1.25rem;
  padding: 0;
  list-style: disc;
}

.bullet-list li {
  padding: 0.2rem 0 0.2rem 0.3rem;
}

/* ---- Home: slideshow --------------------------------------------------------------- */

.site-main--home {
  padding-top: 0;
}

.slideshow {
  --color-slideshow-control: #b4b4b4;
  position: relative;
  margin-bottom: 1.5rem;
  background: #1d1d1d;
}

/* Legacy height rule: 60% of the viewport width, at most 600 px. */
.slideshow__track {
  display: grid;
  height: clamp(220px, 60vw, 600px);
  overflow: hidden;
  touch-action: pan-y;
}

.slideshow__slide {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
}

.slideshow__photo,
.slideshow__drawing,
.slideshow__photo img,
.slideshow__drawing img {
  width: 100%;
  height: 100%;
}

.slideshow__photo,
.slideshow__drawing {
  position: absolute;
  inset: 0;
}

.slideshow__photo img,
.slideshow__drawing img {
  object-fit: cover;
}

.slideshow__photo {
  z-index: 1;
}

.slideshow__drawing {
  display: none;
  z-index: 0;
}

.slideshow__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  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;
}

/* With the script: slides are stacked; the next one is staged over the current one. */
.slideshow.is-enhanced .slideshow__slide.is-waiting {
  visibility: hidden;
}

.slideshow.is-enhanced .slideshow__slide.is-next {
  z-index: 1;
}

.slideshow.is-enhanced .slideshow__slide.is-next .slideshow__photo {
  clip-path: inset(0 100% 0 0);
}

.slideshow.is-enhanced .slideshow__slide.is-drawing .slideshow__drawing {
  display: block;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow.is-enhanced .slideshow__slide.is-next {
    opacity: 0;
  }

  .slideshow.is-enhanced .slideshow__slide.is-next .slideshow__photo {
    clip-path: none;
  }
}

/* Controls in the bottom right corner, just above the caption strip (whose height the
   script keeps in --caption-height, as captions wrap on narrow screens). */
.slideshow__controls {
  position: absolute;
  right: 0.5rem;
  bottom: calc(var(--caption-height, 40px) + 0.5rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  max-width: calc(100% - 1rem);
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: rgb(40 40 40 / 0.45);
}

.slideshow__controls[hidden] {
  display: none;
}

.slideshow__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.slideshow__dot,
.slideshow__toggle,
.slideshow__next {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Neutral grey dots: rings, the current one filled. */
.slideshow__dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-slideshow-control);
  border-radius: 50%;
}

.slideshow__dot[aria-current='true']::before {
  background: var(--color-slideshow-control);
}

.slideshow__dot:hover::before {
  border-color: #e0e0e0;
}

.slideshow__dot:focus-visible,
.slideshow__toggle:focus-visible,
.slideshow__next:focus-visible {
  outline: 2px solid #e0e0e0;
  outline-offset: 0;
  border-radius: 50%;
}

/* Pause (two bars) / play (triangle) icon. */
.slideshow__toggle::before {
  content: '';
  width: 10px;
  height: 12px;
  border-inline: 3px solid var(--color-slideshow-control);
}

.slideshow__toggle.is-paused::before {
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  border-inline: 10px solid var(--color-slideshow-control);
  border-right-width: 0;
}

/* Phones: only pause/play and a "next" arrow; the dots appear from tablet width. */
.slideshow__next::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-top: 3px solid var(--color-slideshow-control);
  border-right: 3px solid var(--color-slideshow-control);
  transform: rotate(45deg);
}

.slideshow__dots {
  display: none;
}

@media (min-width: 48rem) {
  .slideshow__dots {
    display: flex;
  }

  .slideshow__next {
    display: none;
  }
}

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

  .slideshow__controls {
    right: 0.75rem;
  }
}

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

/* ---- Home: intro blocks and featured projects ---------------------------------------- */

.intro-blocks {
  display: grid;
  gap: 1.25rem;
}

.intro-block .section-title {
  margin-top: 0;
}

.intro-block__text {
  text-align: justify;
  hyphens: auto;
}

.intro-block__more {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  text-align: right;
}

.intro-block__more a {
  color: var(--color-text);
  text-decoration: none;
}

.intro-block__more a:hover {
  font-weight: 700;
}

.intro-block__more a:focus-visible {
  text-decoration: underline;
}

.featured .section-title {
  margin-top: 0;
}

.featured__cards {
  display: grid;
  gap: 1.75rem;
  margin-top: 0.5rem;
}

.featured-card__photo {
  display: block;
  border-radius: 5px;
  overflow: hidden;
}

.featured-card__photo img {
  width: 100%;
  height: clamp(180px, 45vw, 290px);
  object-fit: cover;
}

.featured-card__photo:hover,
.featured-card__photo:focus-visible {
  box-shadow: 0 0 2px 1px #555555;
}

.featured-card__title {
  margin-block: 0.75rem 0.4rem;
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
}

.featured-card p {
  text-align: justify;
  hyphens: auto;
}

@media (min-width: 48rem) {
  .intro-blocks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .featured__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .featured-card__photo img {
    height: clamp(200px, 22vw, 290px);
  }
}

/* Very large screens: keep the home blocks at a readable width. */
@media (min-width: 120rem) {
  .intro-blocks,
  .featured,
  .text-page {
    max-width: 100rem;
    margin-inline: auto;
  }
}

/* ---- Clients ----------------------------------------------------------------------- */

.client-group + .client-group {
  margin-top: 0.5rem;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Legacy tile: white, light border, rounded, logo shown at 100 x 40 px. */
.logo-tile {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 15px;
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  background: #ffffff;
}

.logo-tile img {
  width: 100px;
  height: 40px;
  object-fit: contain;
}

.logo-tile__name {
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (min-width: 120rem) {
  .client-group {
    max-width: 100rem;
    margin-inline: auto;
  }
}

/* ---- Lists: filter, count, "load more" (Projects, News) ----------------------------- */

/* Projects search bar: rounded field across the whole content width, with a "Filtros"
   button at its end (specs/006-seo-deploy). */
.project-search__bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.project-search__bar input[type='search'] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 2px 0 #555555;
  color: var(--color-text-strong);
  font: inherit;
}

.project-search__bar input[type='search']:focus {
  outline: none;
  box-shadow: 0 0 0 2px #234983;
}

.project-search__submit,
.filter-drawer__apply {
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: linear-gradient(#f4f4f4, #e4e4e4);
  box-shadow: 0 0 2px 0 #555555;
  color: var(--color-text-strong);
  font: inherit;
  cursor: pointer;
}

.project-search__submit[hidden],
.filter-toggle[hidden] {
  display: none;
}

/* "Filtros" button: white, rounded, with the Lucide sliders icon after the text. */
.filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  color: var(--color-text-strong);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.filter-toggle:hover,
.filter-toggle[aria-expanded='true'] {
  border-color: #234983;
  color: #234983;
  box-shadow: 0 2px 6px rgb(35 73 131 / 0.18);
}

.filter-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #234983;
}

.filter-toggle__icon {
  flex: none;
  display: block;
}

/* Number of selected filters, in the top right corner of the button. */
.filter-toggle__badge {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #234983;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Filter panel: under the bar without JavaScript; a side drawer with it. */
.filter-group {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.filter-group legend {
  margin-bottom: 0.4rem;
  color: var(--color-text-strong);
  font-weight: 700;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  cursor: pointer;
}

.filter-option input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #234983;
}

.filter-option__count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.filter-drawer__head h2 {
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
}

.filter-drawer__close[hidden] {
  display: none;
}

.filter-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.filter-drawer__clear {
  color: var(--color-text-strong);
}

.filter-drawer:not(.is-drawer) {
  margin: -0.5rem 0 1.5rem;
}

.filter-drawer.is-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(0 0 0 / 0.35);
}

.filter-drawer.is-drawer[hidden] {
  display: none;
}

.filter-drawer.is-drawer .filter-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(22rem, 92vw);
  background: #ffffff;
  box-shadow: -4px 0 16px rgb(0 0 0 / 0.2);
}

.filter-drawer.is-drawer .filter-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.filter-drawer__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-strong);
  font-size: 1.6rem;
  cursor: pointer;
}

.filter-drawer__close:hover {
  background: rgb(0 0 0 / 0.06);
}

.filter-drawer.is-drawer .filter-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.filter-drawer.is-drawer .filter-drawer__actions {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

html.has-drawer {
  overflow: hidden;
}

.list-empty {
  margin-block: 2rem;
  text-align: center;
}

/* Searching or filtering: the current list fades and a spinner with a text shows in the
   middle of the screen. */
[data-results] {
  position: relative;
}

[data-results][aria-busy='true'] > * {
  opacity: 0.35;
  transition: opacity 0.2s;
}

[data-results][aria-busy='true']::after,
.list-more.is-loading::after {
  content: '';
  width: 2.25rem;
  height: 2.25rem;
  border: 4px solid #dddddd;
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

[data-results][aria-busy='true']::after {
  position: fixed;
  top: calc(50% - 2.5rem);
  left: calc(50% - 1.125rem);
  z-index: 41;
}

[data-results][aria-busy='true'] {
  min-height: 9rem;
}

/* "Aguarde, buscando projetos…" under the spinner (text from data-loading-text), on a light
   card so it reads over any card of the list. */
[data-results][aria-busy='true']::before {
  content: attr(data-loading-text);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 40;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 4.25rem 1.5rem 1.1rem;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
  color: var(--color-text-strong);
  font-weight: 600;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* "Ver mais": a small spinner inside the button while the next items load. */
.list-more.is-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  cursor: progress;
}

.list-more.is-loading::after {
  width: 1.1rem;
  height: 1.1rem;
  border-width: 3px;
}

/* Like the form spinner, these keep turning (slower) with reduced motion: they are the only
   sign that something is loading. */
@media (prefers-reduced-motion: reduce) {
  [data-results][aria-busy='true']::after,
  .list-more.is-loading::after {
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
  }
}

.list-more {
  display: table;
  min-height: 44px;
  margin: 2rem auto 0.5rem;
  padding: 0.7rem 1.75rem;
  border-radius: 3px;
  box-shadow: 0 0 5px #aaaaaa;
  color: var(--color-text);
  text-decoration: none;
}

.list-more:hover {
  box-shadow: 0 0 6px #777777;
  color: var(--color-text-strong);
}

/* ---- Projects grid ------------------------------------------------------------------ */

.project-grid {
  display: grid;
  gap: 2rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  min-width: 0;
}

.project-card:focus-visible {
  outline-offset: 6px;
}

.project-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 1px 0 #aaaaaa;
}

.project-card__media picture,
.project-card__media img {
  width: 100%;
  height: 100%;
}

.project-card__media img {
  object-fit: cover;
}

/* Projects without photo: the client logo on a light grey panel of the same size. */
.project-card__media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
}

/* The picture fills the panel and centres the logo with flex (in a grid, the picture's
   <source> elements became empty rows and pushed the logo down). */
.project-card__media--logo picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.project-card__media--logo img {
  width: min(160px, 60%);
  height: auto;
  border-radius: 3px;
  mix-blend-mode: multiply;
}

.project-card__client {
  font-weight: 600;
  text-align: center;
}

.project-card__title {
  margin-block: 0.9rem 0.4rem;
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.project-card__description {
  white-space: pre-line;
  overflow-wrap: break-word;
}

@media (min-width: 48rem) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 120rem) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-search,
  [data-results] {
    max-width: 100rem;
    margin-inline: auto;
  }
}

/* ---- News list ---------------------------------------------------------------------- */

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-item {
  display: grid;
  gap: 0.75rem;
  padding-block: 1.25rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, rgb(228 228 228 / 0), rgb(228 228 228 / 0.8), rgb(228 228 228 / 0)) 1;
}

.news-item__thumb {
  justify-self: center;
}

.news-item__thumb img {
  width: 200px;
  height: auto;
  border-radius: 3px;
}

.news-item__title {
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
}

.news-item__title a {
  color: inherit;
  text-decoration: none;
}

.news-item__title a:hover {
  text-decoration: underline;
}

.news-item__summary {
  margin-top: 0.35rem;
  text-align: justify;
  white-space: pre-line;
}

.news-item__more {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  text-align: right;
}

.news-item__more a {
  color: var(--color-text);
  text-decoration: none;
}

.news-item__more a:hover {
  font-weight: 700;
}

@media (min-width: 48rem) {
  .news-item {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
  }

  .news-item__thumb {
    margin-left: 2.5rem;
  }
}

@media (min-width: 120rem) {
  .news-list {
    max-width: 100rem;
    margin-inline: auto;
  }
}

/* ---- News article ------------------------------------------------------------------- */

/* Legacy title strip: bold title on a light grey gradient. */
.news-article__title {
  padding: 1.25rem 1rem;
  background: linear-gradient(to right, rgb(228 228 228 / 0.8), rgb(228 228 228 / 0.4), rgb(228 228 228 / 0.3));
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
}

/* Photos are centered; paragraphs stay justified as on the legacy page. */
.news-article__body {
  margin-top: 1.25rem;
  padding-inline: 0.25rem;
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
}

.news-article__body p {
  text-align: justify;
}

.news-article__body h2 {
  margin-block: 1.25rem 0.4rem;
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 700;
  text-align: left;
}

.news-article__body p + p {
  margin-top: 0.75rem;
}

/* Photos at their own size, side by side when they fit (legacy inline images). */
.news-article__photo {
  display: inline-block;
  max-width: 100%;
  margin: 0.75rem 0.5rem;
  vertical-align: top;
  text-align: center;
}

.news-article__photo img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.news-article__photo figcaption {
  margin-top: 0.4rem;
  font-size: var(--text-small);
  white-space: pre-line;
}

.news-article__back {
  margin-top: 2rem;
}

.news-article__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
}

.news-article__back a:hover {
  color: var(--color-text-strong);
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .news-article__body {
    padding-inline: 1.25rem;
  }
}

@media (min-width: 120rem) {
  .news-article {
    max-width: 100rem;
    margin-inline: auto;
  }
}

/* ---- Forms (Contact, Work with us) ---------------------------------------------------- */

.careers-page__intro {
  margin-bottom: 1rem;
  color: var(--color-text-strong);
  font-size: var(--text-title);
  font-weight: 600;
  text-align: center;
}

/* Legacy layout: two fields per row from tablet width, message across the whole form. */
.site-form {
  display: grid;
  gap: 0.25rem 1rem;
}

.form-field {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}

.form-field label {
  color: var(--color-text-strong);
  font-size: var(--text-small);
  font-weight: 600;
}

.form-field__optional {
  font-weight: 400;
}

/* Rounded fields with the legacy grey icons. */
.site-form input[type='text'],
.site-form input[type='email'],
.site-form input[type='tel'],
.site-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem 0.55rem 2.25rem;
  border: 1px solid #ffffff;
  border-radius: 5px;
  background: #ffffff no-repeat 0.6rem 0.75rem / 17px 17px;
  box-shadow: 0 0 2px 0 #555555;
  color: var(--color-text-strong);
  font: inherit;
}

.site-form textarea {
  min-height: 12rem;
  resize: vertical;
}

#f-nome { background-image: url('../img/forms/name.png'); }
#f-telefone { background-image: url('../img/forms/phone.png'); }
#f-email { background-image: url('../img/forms/email.png'); }
#f-assunto { background-image: url('../img/forms/subject.png'); }
#f-cargo { background-image: url('../img/forms/position.png'); }
#f-mensagem { background-image: url('../img/forms/message.png'); }

/* Focus: a thin ring in the logo blue following the rounded corners, instead of the default
   black outline (still clearly visible, WCAG 2.4.7). Fields with an error keep the red ring. */
.site-form input:focus,
.site-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #234983;
}

/* Every field with an error gets the red border (more specific than the field styles above);
   the message under the field says what to fix, so colour is never the only sign. */
.site-form .form-field--error input,
.site-form .form-field--error textarea,
.site-form .form-field--error .form-file {
  box-shadow: 0 0 0 2px #b3261e;
}

.form-field__error {
  color: #b3261e;
  font-size: var(--text-small);
}

.form-field__hint {
  font-size: var(--text-small);
}

/* File field: the native input covers the visible button, so it stays keyboard accessible. */
.form-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.3rem 0.75rem 0.3rem 2.25rem;
  border-radius: 5px;
  background: #ffffff url('../img/forms/file.png') no-repeat 0.6rem center / 17px 17px;
  box-shadow: 0 0 2px 0 #555555;
}

.form-file input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-file:focus-within {
  box-shadow: 0 0 0 2px #234983;
}

.form-file input[type='file']:focus {
  outline: none;
}

.form-file__button {
  flex: none;
  padding: 0.3rem 0.8rem;
  border-radius: 3px;
  background: #eeeeee;
  box-shadow: 0 0 2px #888888;
  font-size: var(--text-small);
}

.form-file__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hidden trap field for robots (never shown, never focused). */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Privacy notice right above the send button. */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Legacy grey send button. */
.form-submit {
  min-width: 10rem;
  min-height: 44px;
  padding: 0 1.5rem;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: linear-gradient(#f4f4f4, #e4e4e4);
  box-shadow: 0 0 2px 0 #555555;
  color: var(--color-text-strong);
  font: inherit;
  cursor: pointer;
}

.form-submit:hover {
  background: linear-gradient(#eeeeee, #d8d8d8);
}

.form-privacy {
  font-size: var(--text-small);
}

/* Sending: a light layer over the form with a spinner and a message (forms.js). */
.site-form {
  position: relative;
}

.form-sending {
  position: absolute;
  inset: -0.5rem;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.82);
  color: var(--color-text-strong);
  font-weight: 600;
  text-align: center;
}

.form-sending[hidden] {
  display: none;
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 4px solid #dddddd;
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* The spinner is the only sign that the message is being sent, so it keeps turning (slower)
   even when the system asks for reduced motion, overriding the global rule in base.css. */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
  }
}

.form-submit.is-sending {
  cursor: progress;
}

/* Result toast: fixed in the top right corner, just below the sticky header (across the
   top of the screen on phones). */
.toast {
  position: fixed;
  top: calc(var(--header-height) + 0.75rem);
  right: 1rem;
  left: 1rem;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem 0.85rem 1rem;
  border-left: 4px solid;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
  transition: opacity 0.3s, transform 0.3s;
}

.toast--success {
  border-color: #2e7d32;
  background: #eef6ee;
  color: #1e5122;
}

.toast--error {
  border-color: #b3261e;
  background: #fbeeed;
  color: #7a1912;
}

.toast.is-hidden {
  opacity: 0;
  transform: translateY(-0.75rem);
}

.toast__text {
  flex: 1;
  min-height: 1.5em;
}

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -0.6rem -0.25rem -0.6rem 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.toast__close[hidden] {
  display: none;
}

.toast__close:hover {
  background: rgb(0 0 0 / 0.06);
}

@media (min-width: 48rem) {
  .toast {
    left: auto;
    max-width: 26rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

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

  .form-field--mensagem,
  .form-actions,
  .form-field--curriculo {
    grid-column: 1 / -1;
  }

  .form-field--curriculo .form-file {
    max-width: calc(50% - 0.5rem);
  }
}

/* ---- Contact: form beside the details and the map button ----------------------------- */

.contact-page {
  display: grid;
  gap: 2rem;
}

.contact-details {
  display: grid;
  gap: 0.9rem;
  font-size: var(--text-small);
  font-style: normal;
}

/* Each detail in its own box, with the legacy icon on the left. */
.contact-details__item {
  min-height: 24px;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border-radius: 5px;
  background: #f2f2f2 no-repeat 1rem 0.95rem / 18px 18px;
  box-shadow: 0 0 2px 0 #555555;
}

.contact-details__item--address { background-image: url('../img/forms/contact-address.png'); }
.contact-details__item--phone { background-image: url('../img/forms/contact-phone.png'); }
.contact-details__item--email { background-image: url('../img/forms/contact-email.png'); }

.contact-details a {
  color: inherit;
}

/* "Ver no Google Maps" (.button-compact) at the end of the address box. */
.contact-details .button-compact {
  margin-top: 0.6rem;
}

@media (min-width: 64rem) {
  .contact-page {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
  }
}

@media (min-width: 120rem) {
  .contact-page,
  .careers-page {
    max-width: 100rem;
    margin-inline: auto;
  }
}