/* Additions to the frozen styles.css, enqueued after it (migration plan S6, S9). */

/* Page to page cross-fade, the WordPress stand-in for the static router's pageIn. Like pageIn,
   it does not run under reduced motion. Browsers without it (Firefox today) just navigate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* The language switcher's spacer while the site has one language (inc/chrome.php): its space is
   kept, nothing of it shows. The descendants too, since the card and the panel set visible. */
.nav .is-placeholder,
.nav .is-placeholder * { visibility: hidden !important; }

/* Consent banner (Complianz free, S9; Rodrigo, 2026-10-03): the site's raised panel, greys,
   Montserrat, three equal outlined buttons (refusing is as easy as accepting). Complianz's own sheet
   loads after this one, so the site's tokens reach it through its own custom properties and every
   other rule carries the banner container's id. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--color-bg-raised);
  --cmplz_banner_border_color: var(--color-hairline);
  --cmplz_banner_border_width: 1px;
  --cmplz_banner_border_radius: var(--media-radius);
  --cmplz_text_color: var(--color-text-secondary);
  --cmplz_hyperlink_color: var(--color-text);
  --cmplz_text_font_size: 13px;
  --cmplz_link_font_size: 12px;
  --cmplz_category_body_font_size: 12px;
  --cmplz_category_header_title_font_size: 13px;
  --cmplz_category_header_active_font_size: 11px;
  --cmplz_category_header_always_active_color: var(--color-text-muted);
  --cmplz_button_border_radius: 0;
  --cmplz_slider_active_color: var(--ref-white);
  --cmplz_slider_inactive_color: var(--ref-stone);
  --cmplz_slider_bullet_color: var(--ref-ink);
  padding: 22px 24px;
  font-family: var(--font-sans);
  box-shadow: inset 0 1px 0 var(--ref-white-06);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { grid-template-columns: 1fr; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  display: block; justify-self: start; grid-column-start: 1;
  font-size: 10px; font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--color-text-muted);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { font-weight: 300; line-height: 1.6; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--color-wash); border: 1px solid var(--color-hairline);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title { font-weight: 400; color: var(--color-text); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-weight: 300; line-height: 1.6; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-toggle { min-width: 24px; min-height: 24px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: 0 0 0 2px var(--ref-white); }
/* Complianz names each toggle with a .screen-reader-text label; styles.css has no such class. */
#cmplz-cookiebanner-container .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  min-height: 44px; padding: 12px 18px;
  border: 1px solid var(--cta-border); background: transparent; color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { border-color: var(--cta-border-hover); background: var(--color-wash); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents .cmplz-link {
  font-weight: 300; text-decoration: none; color: var(--color-text);
  border-bottom: 1px solid var(--color-hairline-strong); transition: border-color var(--dur-fast) ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents .cmplz-link:hover { border-bottom-color: var(--cta-border-hover); }
@media (min-width: 769px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right { right: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 32px); }
}
@media (max-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner { border-width: 1px 0 0; border-radius: var(--media-radius) var(--media-radius) 0 0; padding: 18px 6vw 22px; }
}

/* The map until the visitor allows it (S9; Rodrigo, 2026-10-03). Complianz's cookie blocker serves
   the iframe empty and marks it cmplz-iframe; this panel shows while the iframe is not yet
   cmplz-activated and gives way to it once the map is allowed. Without Complianz the iframe has no
   such class, so the panel stays out and the map shows as before. */
.contacto__map { position: relative; }
.contacto__consent {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: clamp(20px, 4vw, 40px);
  text-align: center; background: var(--color-bg-raised);
}
.contacto__map:has(> iframe.cmplz-iframe:not(.cmplz-activated)) > iframe { visibility: hidden; }
.contacto__map:has(> iframe.cmplz-iframe:not(.cmplz-activated)) .contacto__consent { display: flex; }
/* a button does not inherit the font: the design law's Montserrat, set here for the new button */
.contacto__consent .cta-button { font-family: var(--font-sans); }
.contacto__consent-text {
  margin: 0; max-width: 42ch;
  font-weight: 300; font-size: var(--fs-body-sm); line-height: 1.65;
  color: var(--color-text-secondary); text-wrap: pretty;
}

/* Footer: the legal line on its own row under the policy row, and "Gerir cookies" last in that row,
   in the policy links' type but the muted grey, which passes AA contrast on the footer's black where
   the links' stone grey does not (S9; Rodrigo, 2026-10-03). */
.footer__legal { margin: 20px 0 0; font-size: 11px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); }
.footer__manage {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px; font-weight: 300; line-height: inherit; color: var(--color-text-muted);
  transition: color 0.18s ease;
}
.footer__manage:hover { color: var(--color-text); }
@media (max-width: 760px) {
  .footer__manage { display: inline-block; padding-block: 6px; }
}

/* The Contactos form as Contact Form 7 prints it (S9, WP-EXPORT 12). CF7's own stylesheet is not
   loaded on this page (functions.php), so its functional rules are here, scoped to the form: the
   hidden fields, the screen-reader region, the control's wrapper. CF7 wraps each control in
   span.wpcf7-form-control-wrap, where the static's sibling rules (.cform__input:focus ~ .cform__label)
   cannot reach, so the floating label and the drawn line follow the field through :focus-within and
   :has(), with the static's values; the original rules are untouched. The honeypot is out of view,
   of the Tab order and of the accessibility tree. Invalid: CF7's message takes its own row under the
   input (the field is a one-column grid, the wrapper adds no box, the drawn line belongs to the input's
   row, which never stretches, so a field beside a taller one keeps its line level with it): a message
   of any length pushes the next field down instead of running into it; the line stays drawn in the
   muted grey; the form's response line under the actions. Without a message the field is one row,
   the input's height, as in the static. */
.cform .hidden-fields-container { display: none; }
.wpcf7 .screen-reader-response {
  position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal; word-break: normal;
}
.cform .cform__field { display: grid; align-content: start; }
.cform .wpcf7-form-control-wrap { display: contents; }
.cform .cform__line { grid-row: 1 / 2; }
.cform .cf7apps-honeypot-wrap { display: none !important; }
/* The empty field's label in the muted grey (7.04:1 on the black) instead of the static's stone
   (3.72:1, under AA's 4.5:1 for its 14 px): Rodrigo, 2026-10-03, as for the footer's legal line. */
.cform .cform__label { color: var(--color-text-muted); }
.cform__field:focus-within .cform__label,
.cform__field:has(.cform__input:not(:placeholder-shown)) .cform__label {
  transform: translateY(-22px) scale(0.8);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--color-text-muted);
}
.cform .cform__field:focus-within .cform__label { color: var(--ref-white); }
.cform__field:focus-within .cform__line { transform: scaleX(1); background: var(--ref-white); }
.cform__field:has(.cform__input:not(:placeholder-shown)):not(:focus-within) .cform__line { transform: scaleX(1); background: var(--color-hairline-strong); }
.cform__field:has(.cform__input[aria-invalid="true"]):not(:focus-within) .cform__line { transform: scaleX(1); background: var(--color-text-muted); }
.cform .wpcf7-not-valid-tip {
  display: block; margin-top: 8px;
  font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--color-text-secondary);
}
.cform .wpcf7-response-output { margin: 18px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--color-text-secondary); }
.cform.init .wpcf7-response-output,
.cform.submitting .wpcf7-response-output,
.cform.resetting .wpcf7-response-output,
.cform.sent .wpcf7-response-output { display: none; }

/* The footer's newsletter as Contact Form 7 prints it (FINAL-PHASE 1.3). The form element is CF7's
   (class footer__nl); the static's box is the template's div.footer__nl-form, which styles.css draws
   as before, its input a flex item again through CF7's wrapper. The label is the static's aria-label,
   for screen readers only. The box is one row, so the field's own message stays for screen readers
   and the form's response line, under the box, says what happened (a wrong address, the sent step).
   The box's border turns white while the field or the button has focus (the static showed none:
   WCAG 2.4.7; Rodrigo, 2026-10-10) and the muted grey after an invalid submission, as the Contactos
   lines do. Then the notice line, in the type of the footer's legal line, its link's name kept on one line. */
.footer__nl .hidden-fields-container,
.footer__nl .wpcf7-not-valid-tip { display: none; }
.footer__nl .cf7apps-honeypot-wrap { display: none !important; }
.footer__nl .wpcf7-form-control-wrap { display: contents; }
.footer__nl-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.footer__nl .footer__nl-form { transition: border-color var(--dur-fast) ease; }
.footer__nl .footer__nl-form:has([aria-invalid="true"]) { border-color: var(--color-text-muted); }
.footer__nl .footer__nl-form:focus-within { border-color: var(--ref-white); }
.footer__nl .wpcf7-response-output { margin: 10px 0 0; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--color-text-secondary); }
.footer__nl.init .wpcf7-response-output,
.footer__nl.submitting .wpcf7-response-output,
.footer__nl.resetting .wpcf7-response-output { display: none; }
.footer__nl-notice { margin: 12px 0 0; font-size: 11px; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); }
.footer__nl-notice a { color: var(--color-text); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--color-hairline-strong); transition: border-color var(--dur-fast) ease; }
.footer__nl-notice a:hover { border-bottom-color: var(--cta-border-hover); }