@charset "UTF-8";
/**
 * Clay 3.84.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
/**
 * Clay 3.84.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

.lfr-asset-column-details .lfr-asset-categories {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-categories .lfr-asset-category {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-description {
  color: #444;
  font-style: italic;
  margin: 0.5em auto 2em;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}
.lfr-asset-column-details .lfr-asset-icon {
  border-right: 1px solid transparent;
  color: #999;
  float: left;
  line-height: 1em;
  margin-right: 10px;
  padding-right: 10px;
}
.lfr-asset-column-details .lfr-asset-icon.last {
  border-width: 0;
}
.lfr-asset-column-details .lfr-asset-tags {
  color: #7d7d7d;
}
.lfr-asset-column-details .lfr-asset-tags .tag {
  color: #555;
}
.lfr-asset-column-details .lfr-asset-metadata {
  clear: both;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
}
.lfr-asset-column-details .lfr-panel {
  clear: both;
  margin-bottom: 0.2em;
}
.lfr-asset-column-details .lfr-panel.lfr-extended {
  border: 1px solid #ccc;
  margin-bottom: 0;
}
.lfr-asset-column-details .taglib-custom-attributes-list label,
.lfr-asset-column-details .lfr-asset-field label {
  display: block;
}
.lfr-asset-column-details .taglib-custom-attributes-list {
  margin-bottom: 1em;
}

.overlay {
  position: absolute;
}

.overlay-hidden,
.overlaymask-hidden {
  display: none;
}

.lfr-form-row {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 1px 5px 25px;
  position: relative;
}
.lfr-form-row:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.lfr-form-row:hover {
  border: solid #ccc;
  border-width: 1px 0;
  padding-top: 0;
}
.lfr-form-row.lfr-form-row-inline .form-group {
  margin-right: 5px;
}
.lfr-form-row legend .field-label {
  float: left;
  margin-right: 10px;
}
.lfr-form-row .handle-sort-vertical {
  background: url(../images/application/handle_sort_vertical.png) no-repeat 0 50%;
  cursor: move;
  padding-left: 20px;
}
.lfr-form-row fieldset {
  border-width: 0;
  margin: 0;
  padding: 0;
}

.lfr-autorow-controls {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

.datepicker-popover-content .popover-content {
  padding: 0.75rem 1rem;
}

.dropdown.open > .dropdown-menu, .overlay-content .open > .dropdown-menu {
  display: block;
}

.form-control-inline {
  background-color: transparent;
  font-size: 1.125rem;
  font-weight: 700;
}
.form-control-inline:not(:hover) {
  border-color: transparent;
}
.form-control-inline::placeholder {
  color: #a9afb5;
  font-style: italic;
}

.form-search .input-group {
  position: relative;
}
.form-search .input-group.advanced-search .search-query {
  padding-left: 40px;
  z-index: 0;
}
.form-search .input-group.advanced-search .toggle-advanced {
  cursor: pointer;
  left: 0;
  line-height: 1;
  padding: 8px 10px;
  position: absolute;
  top: 0;
}
.form-search .input-group.advanced-search .toggle-advanced .caret {
  margin-top: 7px;
}
.form-search .input-group.advanced-search .toggle-advanced .icon-search {
  font-size: 14px;
}
@media (max-width: 991.98px) {
  .form-search .input-group {
    width: 100%;
  }
  .form-search .input-group .btn {
    clip: rect(0, 0, 0, 0);
    left: -9999px;
    position: absolute;
  }
  .form-search .input-group input.search-query {
    width: 100%;
  }
}

.lfr-table {
  border-collapse: collapse;
  clear: both;
}
.lfr-table > tbody > tr > td,
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > td,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > td,
.lfr-table > tfoot > tr > th {
  padding: 0 5px;
  overflow-wrap: break-all;
  word-wrap: break-all;
}
.lfr-table > tbody > tr > td:first-child, .lfr-table > tbody > tr > td.first-child,
.lfr-table > tbody > tr > th:first-child,
.lfr-table > tbody > tr > th.first-child,
.lfr-table > thead > tr > td:first-child,
.lfr-table > thead > tr > td.first-child,
.lfr-table > thead > tr > th:first-child,
.lfr-table > thead > tr > th.first-child,
.lfr-table > tfoot > tr > td:first-child,
.lfr-table > tfoot > tr > td.first-child,
.lfr-table > tfoot > tr > th:first-child,
.lfr-table > tfoot > tr > th.first-child {
  padding-left: 0;
}
.lfr-table > tbody > tr > td:last-child, .lfr-table > tbody > tr > td.last-child,
.lfr-table > tbody > tr > th:last-child,
.lfr-table > tbody > tr > th.last-child,
.lfr-table > thead > tr > td:last-child,
.lfr-table > thead > tr > td.last-child,
.lfr-table > thead > tr > th:last-child,
.lfr-table > thead > tr > th.last-child,
.lfr-table > tfoot > tr > td:last-child,
.lfr-table > tfoot > tr > td.last-child,
.lfr-table > tfoot > tr > th:last-child,
.lfr-table > tfoot > tr > th.last-child {
  padding-right: 0;
}
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > th {
  font-weight: bold;
}

.lfr-pagination:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
.lfr-pagination .dropdown-menu {
  display: none;
}
.lfr-pagination .dropdown-toggle .icon-caret-down {
  margin-left: 5px;
}
.lfr-pagination .lfr-pagination-controls {
  float: left;
}
.lfr-pagination .lfr-pagination-controls .search-results {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  top: 10px;
}
.lfr-pagination .lfr-pagination-controls li .lfr-pagination-link {
  border-width: 0;
  clear: both;
  color: #333;
  display: block;
  font-weight: normal;
  line-height: 20px;
  padding: 3px 20px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.lfr-pagination .lfr-pagination-delta-selector {
  float: left;
}
@media (max-width: 991.98px) {
  .lfr-pagination .lfr-pagination-delta-selector .lfr-icon-menu-text {
    display: none;
  }
}
.lfr-pagination .pagination-content {
  float: right;
}

.lfr-panel.lfr-extended {
  border: 1px solid transparent;
  border-color: #dedede #bfbfbf #bfbfbf #dedede;
}
.lfr-panel.lfr-extended.lfr-collapsible .lfr-panel-button {
  display: block;
}
.lfr-panel.lfr-extended.lfr-collapsed .lfr-panel-titlebar {
  border-bottom-width: 0;
}
.lfr-panel.panel-default .panel-heading {
  border-bottom-width: 0;
}
.lfr-panel .toggler-header {
  cursor: pointer;
}

.sidebar-sm {
  font-size: 0.875rem;
}
.sidebar-sm .sheet-subtitle {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.sidebar-sm .form-group {
  margin-bottom: 1rem;
}
.sidebar-sm .form-control {
  border-radius: 0.1875rem;
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.5;
  min-height: auto;
  padding: 0.25rem 0.75rem;
}
.sidebar-sm .form-control.form-control-tag-group {
  height: auto;
}
.sidebar-sm .form-control.form-control-tag-group .form-control-inset {
  margin-bottom: 0;
  margin-top: 0;
}
.sidebar-sm .form-control.form-control-tag-group .label {
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 0.25rem;
}
.sidebar-sm .form-control[type=file] {
  padding: 0;
}
.sidebar-sm select.form-control {
  padding-right: 1.6rem;
}
.sidebar-sm select.form-control:not([size]) {
  height: 2rem;
}
.sidebar-sm .article-content-description .input-localized.input-localized-editor .input-group-item .wrapper .form-control {
  min-height: auto;
  padding: 0.285rem 0.75rem;
}
.sidebar-sm .btn:not(.btn-unstyled) {
  border-radius: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.15;
  padding: 0.4375rem 0.75rem;
}
.sidebar-sm .btn:not(.btn-unstyled).close {
  padding: 0.4375rem;
}
.sidebar-sm .btn.btn-monospaced, .sidebar-sm .btn.btn-monospaced.btn-sm {
  height: 2rem;
  padding: 0.1875rem 0;
  width: 2rem;
}
.sidebar-sm .btn.btn-monospaced.input-localized-trigger, .sidebar-sm .btn.btn-monospaced.btn-sm.input-localized-trigger {
  padding: 0;
}
.sidebar-sm .input-group-item .input-group-text {
  font-size: 0.875rem;
  height: 2rem;
  min-width: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.sidebar-sm .input-group-item .btn .btn-section {
  font-size: 0.5625rem;
}
.sidebar-sm .list-group-item-flex {
  padding: 0.5rem 0.25rem;
}
.sidebar-sm .list-group-item-flex .autofit-col {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.lfr-translation-manager {
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.5em;
  min-height: 1.8em;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-default-locale {
  display: inline-block;
  width: auto;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu {
  float: none;
  padding: 0.4em 0;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li,
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li strong {
  display: inline;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-translations-message {
  margin: 10px 0;
}
.lfr-translation-manager .lfr-translation-manager-available-translations {
  white-space: normal;
}
.lfr-translation-manager .lfr-translation-manager-available-translations .lfr-translation-manager-available-translations-links {
  line-height: 1;
}
.lfr-translation-manager .lfr-translation-manager-translation {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.3em 0.4em 0.5em;
  text-decoration: none;
}
.lfr-translation-manager .lfr-translation-manager-translation * {
  vertical-align: middle;
}
.lfr-translation-manager .lfr-translation-manager-translation img {
  margin-right: 0.3em;
}
.lfr-translation-manager .lfr-translation-manager-translation:hover {
  background-color: #d1e5ef;
}
.lfr-translation-manager .lfr-translation-manager-translation.lfr-translation-manager-translation-editing {
  background-color: #598bec;
  border-color: #224fa8;
  color: #fff;
}
.lfr-translation-manager .lfr-translation-manager-change-default-locale {
  margin: 0 0.4em;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation {
  display: inline-block;
  padding: 0 2px;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation svg {
  pointer-events: none;
}

.lfr-tree a {
  text-decoration: none;
}
.lfr-tree li {
  margin-bottom: 2px;
  padding-left: 0;
}
.lfr-tree li ul li, .lfr-tree li.tree-item {
  padding-left: 0;
}
.lfr-tree li.tree-item {
  padding-left: 5px;
}
.lfr-tree li.tree-item li {
  padding-left: 20px;
}
.lfr-tree li.tree-item ul {
  margin-left: 0;
  margin-top: 5px;
}

.lfr-upload-container {
  margin-bottom: 1rem;
}
.lfr-upload-container .upload-target {
  border: 3px dashed #e5e7e9;
  margin-bottom: 1rem;
  min-height: 2rem;
  padding: 2rem 0;
  position: relative;
  text-align: center;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  z-index: 100;
}
.upload-drop-active .lfr-upload-container .upload-target {
  background-color: #92e5a5;
  border-color: #69db83;
}
.lfr-upload-container .upload-target .drop-file-text {
  font-weight: normal;
}
.mobile .lfr-upload-container .upload-target .drop-file-text {
  display: none;
}
.lfr-upload-container .upload-target .small {
  display: block;
  margin: 5px 0;
  text-transform: lowercase;
}
.lfr-upload-container .manage-upload-target {
  padding-top: 5px;
  position: relative;
}
.lfr-upload-container .manage-upload-target .select-files {
  float: left;
  line-height: 0;
  margin: 0 1.125rem 1.125rem;
  padding: 0 0 0 5px;
}
.lfr-upload-container .cancel-uploads,
.lfr-upload-container .clear-uploads {
  background-repeat: no-repeat;
  float: right;
}
.lfr-upload-container .cancel-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAnFBMVEX////4YWP/dXjyS07/dXj9bXD6a234YWP4XWD2WVv2VFfsOTzoLzHmKSvkISP2VFf0TE/vREftPT/iHB72WVvvREf0TE//hon/gYX/fYD/e33/dXj/cXP9bXD/a236a23/Zmb4YWP4XWD/Wl32WVv/VVj2VFf3VFb0TE/yS072SUvvREfuQELtPT/sOTzrMzXoLzHnLC/mKSvkISPh2jkWAAAAF3RSTlMAESIiMzMzMzMzMzMzMzNERERERHd3qtw8lzkAAACOSURBVHjaZcjZDsIgEIXhcd+tu5YBKUixttS6vP+7OQKJTfxvTr4D7Tpxu/2w410SjDjwVvLQ805TPiRryfQeKM6OTI68K/BJPHGlJZJjSqSMofEOGXbJecsTgzkds58V5+J8refBU7Jx9yIrmkW0sA6gqbLyuaRjZZWtgXq58rEFan0jf3uTfRuIkf/7AO8DDcVPSSG3AAAAAElFTkSuQmCC);
  margin-right: 0;
}
.lfr-upload-container .clear-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEX///+6QwTEVx65RQPEVx3EWB64RQPDVxq5RAO5RAO5RQPATQ65RQO5RQO5RQPRczjJZCW9TQTLay28QgTdZAHhaAPmdyHqeQXrikDudgDvfxj0nWP1qHL2tY33tY34dgD+za7+1rj/dxH/fxj/hiH/kk3///9TM3sUAAAAFHRSTlMAbXd4eHh6gN3e3+Hi4+T5+/z8/mIsq5IAAABHSURBVBjTY2CgGWDlFuZhRuIz8cspyggxIgQ4ZFWVVCQ4EQLCCmpqalLCCAFeaWV5SVE+hAC7gJi4iCAbkqksXMK8bNRzNADCOQN++eLhCQAAAABJRU5ErkJggg==);
  padding-left: 16px;
}
.lfr-upload-container .upload-file.upload-complete.file-saved {
  padding-left: 25px;
}
.lfr-upload-container .upload-file .file-title {
  display: inline-block;
  max-width: 95%;
  overflow: hidden;
  padding-right: 16px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.lfr-upload-container .upload-file .icon-file {
  font-size: 40px;
}
.lfr-upload-container .upload-list-info {
  margin: 1em 0 0.5em;
}
.lfr-upload-container .upload-list-info h4 {
  font-size: 1.3em;
}
.lfr-upload-container .cancel-button {
  color: #6c757d;
  margin-top: 1px;
  position: absolute;
  right: 5px;
  top: 50%;
  white-space: nowrap;
}
.lfr-upload-container .cancel-button .cancel-button-text {
  display: none;
  margin-left: 5px;
}
.lfr-upload-container .cancel-button:hover .cancel-button-text {
  display: inline;
}
.lfr-upload-container .cancel-button .lexicon-icon {
  height: 12px;
}
.lfr-upload-container .delete-button {
  color: #6c757d;
}
.lfr-upload-container .delete-button-col {
  padding-right: 10px;
}
.lfr-upload-container .file-added .success-message {
  float: right;
  font-weight: normal;
}
.lfr-upload-container .upload-error {
  opacity: 1;
  padding-left: 25px;
}
.lfr-upload-container .upload-complete .cancel-button,
.lfr-upload-container .delete-button,
.lfr-upload-container .upload-complete.file-saved .delete-button,
.lfr-upload-container .upload-complete.upload-error .delete-button {
  display: none;
}
.lfr-upload-container .multiple-files .upload-error {
  background: #f5c4c9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=) no-repeat 5px 5px;
  border-color: #bd2130;
  color: #bd2130;
  font-weight: normal;
  margin-bottom: 16px;
  padding: 8px 8px 8px 24px;
}
.lfr-upload-container .multiple-files .upload-error .error-message {
  display: block;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .card-body,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .card-body {
  padding-left: 1rem;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .custom-control-label,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .custom-control-label {
  display: none;
}
.lfr-upload-container .single-file .upload-error {
  list-style: none;
  margin-top: 1em;
}
.lfr-upload-container .single-file .upload-error .upload-error-message {
  margin-bottom: 0.5em;
}
.lfr-upload-container .upload-complete {
  padding-left: 5px;
}
.lfr-upload-container .upload-complete .error-message,
.lfr-upload-container .upload-complete .success-message {
  font-weight: bold;
  margin-left: 1em;
}
.lfr-upload-container .upload-complete .delete-button {
  display: inline-block;
}
.lfr-upload-container .upload-complete .select-file:disabled + .custom-control-label {
  display: none;
}
.lfr-upload-container .progress {
  display: none;
  margin-top: 0.5rem;
}
.lfr-upload-container .file-uploading .progress {
  display: flex;
}

.lfr-alert-container {
  left: 0;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 430;
}
.lfr-alert-container.inline-alert-container {
  position: relative;
}
.lfr-alert-container.inline-alert-container .lfr-alert-wrapper {
  padding: 0;
}
.lfr-alert-container .lfr-alert-wrapper {
  margin-bottom: 5px;
  overflow: hidden;
}

.lfr-search-container td .overlay.entry-action {
  position: static;
}
.lfr-search-container td .overlay.entry-action .btn a {
  display: block;
  padding: 4px 12px;
}

.contextual-sidebar {
  height: calc(100vh - 49px);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 49px;
  transform: translateX(100%);
  transition: transform ease 0.5s;
  width: 320px;
  will-change: transform;
}
.contextual-sidebar.contextual-sidebar-visible {
  pointer-events: auto;
  transform: translateX(0);
}
body.has-control-menu .contextual-sidebar {
  height: calc(100vh - 98px);
  top: 98px;
}

@media (min-width: 576px) {
  .contextual-sidebar {
    height: calc(100vh - 64px);
    top: 64px;
  }
  body.has-control-menu .contextual-sidebar {
    height: calc(
				100vh - 120px
			);
    top: 120px;
  }
  .contextual-sidebar-content {
    transition: padding ease 0.5s;
    will-change: padding;
  }
  .contextual-sidebar-visible .contextual-sidebar-content,
  .contextual-sidebar-visible + .contextual-sidebar-content {
    padding-right: 320px;
  }
}
.taglib-diff-html div.diff-removed-image {
  background: #fdc6c6 url(../images/diff/minus.png);
}
.taglib-diff-html div.diff-added-image {
  background: #cfc url(../images/diff/plus.png) no-repeat;
}
.taglib-diff-html div.diff-removed-image, .taglib-diff-html div.diff-added-image {
  height: 300px;
  margin: 2px;
  opacity: 0.55;
  position: absolute;
  width: 200px;
}
.taglib-diff-html span.diff-html-added {
  background-color: #cfc;
  font-size: 1em;
}
.taglib-diff-html span.diff-html-added img {
  border: 2px solid #cfc;
}
.taglib-diff-html span.diff-html-changed {
  background: url(../images/diff/underline.png) bottom repeat-x;
}
.taglib-diff-html span.diff-html-changed img {
  border: 2px dotted #009;
}
.taglib-diff-html span.diff-html-removed {
  background-color: #fdc6c6;
  font-size: 1em;
  text-decoration: line-through;
}
.taglib-diff-html span.diff-html-removed img {
  border: 2px solid #fdc6c6;
}

.taglib-discussion {
  font-size: 0.875rem;
  margin-top: 1rem;
}
.taglib-discussion .actions-menu .component-action {
  display: inline-flex;
}
.taglib-discussion .button-holder {
  margin: 1rem 0;
}
.taglib-discussion .comment-container {
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion .lfr-discussion-form-edit .alloy-editor-placeholder {
  border-left-color: #dbdde1;
}
.taglib-discussion .lfr-discussion-body {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-body {
    padding-left: 3.5rem;
  }
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-details .taglib-user-display {
    word-wrap: break-word;
  }
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name {
  font-weight: bold;
  text-decoration: none;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name:hover {
  text-decoration: underline;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-profile-image .avatar {
  background-size: 50px;
}
.taglib-discussion .lfr-discussion-container {
  border-bottom: 1px solid #e7e7ed;
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:first-of-type {
  border-top: 1px solid #e7e7ed;
  padding-top: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:last-of-type {
  border-bottom: 0;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion {
  padding-left: 1rem;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion .lfr-discussion .lfr-discussion .lfr-discussion {
  padding-left: 0;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-container .lfr-discussion {
    padding-left: 3.5rem;
  }
}
.taglib-discussion .lfr-discussion-parent-link {
  color: #67678c;
  font-weight: 600;
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .taglib-discussion .lfr-discussion-parent-link {
    display: block;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.taglib-discussion .lfr-discussion-controls .autofit-col:first-of-type > .btn-outline-borderless {
  margin-left: -0.75rem;
}
.taglib-discussion .lfr-discussion-more-comments {
  border-top: 1px solid #e7e7ed;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}
.taglib-discussion .username {
  color: #272833;
  font-weight: 600;
}
.taglib-discussion .taglib-workflow-status {
  margin-left: 0.5rem;
}
.taglib-discussion .workflow-value {
  text-transform: uppercase;
}
@media (min-width: 576px) {
  .taglib-discussion .actions-menu {
    display: none;
  }
  .taglib-discussion .comment-container:hover .actions-menu,
  .taglib-discussion .actions-menu:focus,
  .taglib-discussion .actions-menu.open {
    display: inline-block;
  }
}

.drop-zone {
  min-height: 80px;
  padding: 20px;
  text-align: center;
}
.drop-zone.drop-enabled {
  outline: 2px dashed transparent;
}
.drop-zone.drop-enabled:not(.no-border) {
  outline-color: rgba(176, 180, 187, 0.5);
}
.drop-zone p {
  margin: 10px auto 0;
  max-width: 75%;
}

.drop-here-info {
  font-size: 25px;
  height: 100%;
  left: 0;
  min-height: 100px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  visibility: hidden;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info {
    transition: none;
  }
}
.drop-here-info .drop-here-indicator {
  height: 115px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.drop-here-info .drop-icons {
  display: inline-block;
  position: relative;
  width: 160px;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons {
    transition: none;
  }
}
.drop-here-info .drop-icons span {
  border-radius: 3px;
  position: absolute;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons span {
    transition: none;
  }
}
.drop-here-info .drop-icons span:nth-of-type(1) {
  box-shadow: 5px 4px 0 0 rgba(0, 0, 0, 0.08);
  height: 60px;
  left: 0;
  line-height: 60px;
  opacity: 0;
  top: 10px;
  transform: rotate(25deg);
  width: 60px;
}
.drop-here-info .drop-icons span:nth-of-type(2) {
  background: #00c2ff;
  color: #fff;
  height: 80px;
  left: 40px;
  line-height: 80px;
  width: 80px;
  z-index: 2;
}
.drop-here-info .drop-icons span:nth-of-type(3) {
  box-shadow: -5px 4px 0 0 rgba(0, 0, 0, 0.08);
  display: block;
  font-size: 45px;
  height: 70px;
  left: 90px;
  line-height: 70px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-25deg);
  width: 70px;
  z-index: 1;
}
.drop-here-info .drop-icons span:nth-of-type(1), .drop-here-info .drop-icons span:nth-of-type(3) {
  background: #e8e6e8;
  color: #a5a6ac;
}
.drop-here-info .drop-text {
  color: #fff;
  display: block;
  font-size: 20px;
  margin-left: 0;
  margin-top: 20px;
}
.drop-active .drop-here-info {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.drop-active .drop-here-info .drop-icons span:nth-of-type(1), .drop-active .drop-here-info .drop-icons span:nth-of-type(3) {
  opacity: 1;
}
.drop-active .drop-here-info span:nth-of-type(1) {
  transform: rotate(-20deg);
}
.drop-active .drop-here-info span:nth-of-type(2) {
  transform: scale(1);
}
.drop-active .drop-here-info span:nth-of-type(3) {
  transform: rotate(15deg);
}

.taglib-empty-result-message.sheet {
  margin-bottom: 24px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  color: #6c757d;
  margin-top: 8px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn,
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  max-width: 200px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(/o/classic-theme/images/states/empty_state.gif);
}
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(/o/classic-theme/images/states/search_state.gif);
  max-width: 210px;
  padding-top: 232px;
}
.taglib-empty-result-message .taglib-empty-state {
  background-image: url(/o/classic-theme/images/states/empty_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-success-state {
  background-image: url(/o/classic-theme/images/states/success_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-search-state {
  background-image: url(/o/classic-theme/images/states/search_state.gif);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-title {
  font-size: 1rem;
  margin-top: 48px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  font-size: 0.875rem;
}
.taglib-empty-result-message .taglib-empty-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-search-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-success-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-search-state + .taglib-empty-result-message-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-description, .taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-actions {
  font-size: 1rem;
  text-align: center;
}

.field-wrapper.form-inline .control-label {
  display: inline-block;
}

.field-wrapper-html .input-localized .input-group-item {
  flex-wrap: nowrap;
}

.taglib-header {
  border-bottom: 1px solid #c8c9ca;
  color: #555;
  margin-bottom: 1em;
  padding-bottom: 10px;
}
.taglib-header .header-title {
  display: inline-block;
  margin: 0.1em;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
}
.taglib-header .header-back-to {
  display: inline-block;
  vertical-align: middle;
}
.taglib-header .header-back-to a {
  display: block;
  font-weight: bold;
  padding: 0 0.3em 0 0;
  text-decoration: none;
}

.taglib-icon {
  text-decoration: none;
}
.taglib-icon:not(.btn):hover .taglib-text, .taglib-icon:not(.btn):focus .taglib-text {
  text-decoration: underline;
}
.taglib-icon[lang] > img {
  vertical-align: baseline;
  width: 16px;
}

.icon-monospaced {
  color: inherit;
  display: inline-block;
  height: 2rem;
  line-height: 34px;
  text-align: center;
  width: 2rem;
}
.icon-monospaced.lexicon-icon {
  padding: 8px;
}

.taglib-icon-list li {
  float: left;
  margin-right: 1em;
}
.taglib-icon-list:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}

.lfr-icon-menu .lfr-icon-menu-icon {
  max-width: none;
}
@media (max-width: 767.98px) {
  .table-cell.last .lfr-icon-menu .dropdown-toggle {
    text-align: center;
  }
  .table-cell.last .lfr-icon-menu .dropdown-toggle > img,
  .table-cell.last .lfr-icon-menu .dropdown-toggle .lfr-icon-menu-text {
    display: none;
  }
}

.lfr-menu-list {
  float: none;
  overflow-y: auto;
  position: relative;
}
.lfr-menu-list.direction-right {
  margin: 0 2px;
}
.lfr-menu-list.dropdown-menu {
  float: none;
  position: relative;
}
@media (max-width: 991.98px) {
  .lfr-menu-list.dropdown-menu > li > a {
    font-size: 22px;
    line-height: 40px;
    white-space: normal;
  }
  .lfr-menu-list.dropdown-menu > li > a img {
    margin-bottom: 3px;
  }
}
.lfr-menu-list.dropdown-menu .search-panel {
  margin-bottom: 0;
}
.lfr-menu-list.dropdown-menu .search-panel .form-group {
  margin: 0 16px;
}
.lfr-menu-list.dropdown-menu .search-panel .menu-item-filter {
  width: auto;
}
body > .lfr-menu-list ul {
  border-radius: 4px;
}

.lfr-icon-menu-open:after {
  clear: both;
  content: "";
  display: table;
}
.lfr-icon-menu-open .dropdown-menu {
  position: static;
}

.input-localized.input-localized-editor .form-control {
  border-width: 0;
  height: 100%;
  padding: 0;
}
.input-localized .input-group-item {
  flex-direction: column;
}
.input-localized .input-localized-content {
  margin-left: 6px;
}
.input-group .input-localized .input-localized-content {
  margin-top: 3px;
}
.input-localized .lfr-input-localized .lfr-input-localized-state {
  background-color: #ddd;
}
.input-localized .lfr-input-localized .lfr-input-localized-state.lfr-input-localized-state-error {
  background-color: #ff0047;
}
.input-localized .lfr-input-localized-default a {
  margin-right: 14px;
}
.input-localized .lfr-input-localized-state {
  height: 4px;
  margin: 3px 5px;
  width: 4px;
}
.input-localized .palette-item-inner .lfr-input-localized-flag {
  font-size: 16px;
  opacity: 0.5;
}
.input-localized .palette-item,
.input-localized .palette-item-hover,
.input-localized .palette-item-hover .palette-item-inner {
  border-color: transparent;
}
.input-localized .palette-item-inner {
  border-color: #666;
  display: block;
  height: 16px;
  width: 16px;
}
.input-localized .palette-item-selected .lfr-input-localized-state {
  background: #27c1f2;
}

.input-localized-palette-container .palette-items-container {
  font-size: 0;
  margin: 0;
  white-space: normal;
}
.input-localized-palette-container .palette-item {
  border-width: 0;
  padding: 0.5rem 1.25rem;
}
.input-localized-palette-container .palette-item-inner {
  border: 1px solid;
  margin-right: 4px;
  width: 16px;
}
.input-localized-palette-container .palette-item-inner img {
  display: block;
}

.taglib-move-boxes {
  margin-bottom: 1em;
}
.taglib-move-boxes label {
  border-bottom: 1px solid transparent;
  display: block;
  margin-bottom: 5px;
  padding: 5px;
}
.taglib-move-boxes .toolbar {
  text-align: center;
}
.taglib-move-boxes .arrow-button img {
  border-width: 0;
  height: 16px;
  width: 16px;
}
.taglib-move-boxes .choice-selector {
  width: 100%;
}
.taglib-move-boxes .choice-selector label {
  background: #ebf1f9;
  border-bottom-color: #8db2f3;
}
.taglib-move-boxes .field-content {
  margin-bottom: 0;
}
.taglib-move-boxes .move-arrow-buttons {
  margin-top: 5em;
}
.taglib-move-boxes .move-arrow-buttons .arrow-button {
  display: block;
}
.taglib-move-boxes .sortable-container {
  margin-top: 10px;
}
.taglib-move-boxes .sortable-container .btn.edit-selection {
  margin-bottom: 10px;
}
.taglib-move-boxes .sortable-container .move-option {
  background-color: transparent;
  border-top: 1px solid #ddd;
  display: none;
  margin: 2px 0;
  padding: 2px;
  position: relative;
}
.taglib-move-boxes .sortable-container .move-option.selected {
  display: block;
}
.taglib-move-boxes .sortable-container .move-option.move-option-dragging {
  background-color: #fafafa;
}
.taglib-move-boxes .sortable-container .move-option .checkbox,
.taglib-move-boxes .sortable-container .move-option .handle {
  position: absolute;
}
.taglib-move-boxes .sortable-container .move-option .checkbox {
  display: none;
  margin: 7px 0 0 5px;
}
.taglib-move-boxes .sortable-container .move-option .handle {
  color: #999;
  cursor: pointer;
  font-size: 1.5em;
  padding: 6px;
}
.taglib-move-boxes .sortable-container .move-option .title {
  font-size: 1.2em;
  margin: 1px 0 1px 30px;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option {
  display: block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .checkbox {
  display: inline-block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .handle {
  display: none;
}
.mobile .taglib-move-boxes .selector-container {
  display: none;
}

.item-selector .card-row > .autofit-col-expand {
  padding-top: 4px;
}
.item-selector .drop-zone {
  background-color: #f1f2f5;
  margin-top: 1rem;
}
.item-selector .input-file {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.item-selector .input-file + label {
  position: relative;
}
.item-selector .input-file + label::before {
  border-radius: 4px;
  bottom: -2px;
  content: "";
  display: block;
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: box-shadow 0.15s ease-in-out;
}
.item-selector .input-file:focus + label::before {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #75b8ff;
}
.item-selector .item-selector-list-row:hover {
  background-color: #e5f2ff;
  cursor: pointer;
}

.lfr-map {
  border: 1px solid #ccc;
  min-height: 400px;
  width: 100%;
}
.lfr-map .home-button {
  margin: 5px;
}
@media (max-width: 575.98px) {
  .lfr-map .home-button {
    height: 35px;
    width: 45px;
  }
}
.lfr-map .search-controls {
  font-size: 15px;
  margin-top: 5px;
  width: 100%;
}
@media (min-width: 576px) {
  .lfr-map .search-controls {
    width: 50%;
  }
}
.lfr-map .search-controls .search-input {
  width: 100%;
}

.navbar .navbar-collapse {
  max-height: none;
}
.navbar .navbar-collapse:after, .navbar .navbar-collapse:before {
  display: inline;
}
@media (max-width: 767.98px) {
  .navbar .navbar-search {
    background-color: #f3f3f3;
    border-top-width: 0;
    width: 100%;
  }
}
.navbar .navbar-search .form-search {
  margin: 8px 0;
}
@media (min-width: 768px) {
  .navbar .navbar-search .form-search {
    float: right;
    max-width: 275px;
  }
}
@media (max-width: 767.98px) {
  .navbar .navbar-search .form-search .input-group {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .navbar .container .navbar-btn,
  .navbar .container-fluid .navbar-btn {
    margin-bottom: 5px;
    width: 45px;
  }
  .navbar .container .navbar-collapse.open,
  .navbar .container-fluid .navbar-collapse.open {
    border-width: 0;
    display: block;
    height: auto;
    overflow: visible;
  }
}

.taglib-portlet-preview.show-borders {
  border: 1px solid #828f95;
  margin-bottom: 1em;
  padding: 3px 3px 1em;
}
.taglib-portlet-preview.show-borders .title {
  background-color: #d3dadd;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em;
}
.taglib-portlet-preview .preview {
  margin: 1em;
  min-height: 90px;
}

.lfr-search-container .entry-action {
  width: 1px;
}
.lfr-search-container .entry-action .taglib-icon {
  white-space: nowrap;
}

.lfr-search-container-wrapper.lfr-search-container-fixed-first-column {
  position: relative;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive {
    margin-left: 375px;
    width: auto;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table {
  position: static;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header {
  left: 12px;
  position: fixed;
  right: 12px;
  top: -1px;
  z-index: 1020;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th {
  display: block;
  padding: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
  overflow-x: hidden;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
    margin-left: 375px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table {
  border-collapse: collapse;
  width: 100%;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table th {
  border-radius: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td,
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  width: auto;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td:first-child,
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th:first-child {
    left: 0;
    position: absolute;
    right: 15px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  height: auto;
}
.lfr-search-container-wrapper a:not(.component-action):not(.btn) {
  color: #495057;
  font-weight: 500;
  text-decoration: underline;
}
.lfr-search-container-wrapper a:not(.component-action):not(.btn):focus, .lfr-search-container-wrapper a:not(.component-action):not(.btn):hover {
  color: #000;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle {
  color: #6c757d;
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle:hover {
  color: #343a40;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle {
  color: #6c757d;
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:active, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:focus, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:hover {
  background-color: #f7f8f9;
  border-radius: 4px;
  color: #343a40;
}
.lfr-search-container-wrapper .lfr-search-container-list .list-group:last-child .list-group-item:nth-last-child(2) {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.lfr-search-container-wrapper .lfr-search-container-list + .taglib-search-iterator-page-iterator-bottom {
  margin-top: 20px;
}
.lfr-search-container-wrapper .list-group {
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group + .list-group .list-group-header:first-child,
.lfr-search-container-wrapper .list-group + .list-group .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item h4 {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item h5,
.lfr-search-container-wrapper .list-group .list-group-item h6,
.lfr-search-container-wrapper .list-group .list-group-item .h5,
.lfr-search-container-wrapper .list-group .list-group-item .h6 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item span + h2.h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .list-group .list-group-item h6 + h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:first-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:first-child {
  border-bottom-left-radius: 0.25rem;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:last-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:last-child {
  border-bottom-right-radius: 0.25rem;
}

.user-info {
  display: flex;
}
.user-info .sticker {
  align-self: center;
}
.user-info .user-details {
  margin-left: 1rem;
}
.user-info .user-name {
  color: #343a40;
  font-weight: 600;
}
.user-info .date-info {
  color: #6c757d;
}

.user-status-tooltip .user-status-avatar {
  float: left;
  margin-right: 5px;
}
.user-status-tooltip .user-status-avatar .user-status-avatar-image {
  width: 27px;
}
.user-status-tooltip .user-status-info {
  display: inline-block;
  overflow: hidden;
}
.user-status-tooltip .user-status-info .user-status-date {
  font-size: 11px;
}

.lfr-search-container {
  margin-top: 1.5em;
  overflow: auto;
}
@media (max-width: 767.98px) {
  .lfr-search-container .selector-button {
    width: auto;
  }
}
.touch .lfr-search-container {
  -webkit-overflow-scrolling: touch;
}
.touch .lfr-search-container .searchcontainer-content .table {
  max-width: none;
}

.taglib-page-iterator {
  clear: both;
  height: auto;
  width: auto;
}
.taglib-page-iterator .lfr-pagination-buttons {
  float: right;
  margin: 0;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    width: 100%;
  }
}
@media (max-width: 991.98px) and (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    float: none;
    margin-top: 20px;
  }
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons > li {
    display: inline-block;
    width: 50%;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li.first, .taglib-page-iterator .lfr-pagination-buttons > li.last {
    display: none;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li > a {
    line-height: 20px;
    padding: 11px 19px;
  }
}
.taglib-page-iterator .lfr-pagination-config {
  float: left;
  line-height: 46px;
}
@media (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-config {
    float: none;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu {
    display: block;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu .btn {
    display: block;
  }
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector,
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-page-selector {
  display: inline;
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
  float: none;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
    display: none;
  }
}
.taglib-page-iterator .search-results {
  float: left;
  line-height: 46px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .search-results {
    display: none;
  }
}

.taglib-search-toggle .form-search {
  position: relative;
}
.taglib-search-toggle .form-search .input-group-btn {
  position: absolute;
}
@media (min-width: 992px) {
  .taglib-search-toggle .form-search .input-group-btn {
    position: static;
  }
}
.taglib-search-toggle .toggle-advanced {
  color: inherit;
  margin-left: 10px;
  position: absolute;
  top: 8px;
}
.taglib-search-toggle .toggle-advanced, .taglib-search-toggle .toggle-advanced:hover, .taglib-search-toggle .toggle-advanced:focus {
  text-decoration: none;
}

.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  background-color: #fcfcfc;
  border: solid #ddd;
  border-width: 0 1px 1px;
  margin-top: 0;
  padding: 15px 15px 0;
}
.navbar-search .taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  border-width: 1px 0 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content {
  position: relative;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields {
  margin-bottom: 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields-legend {
  color: #999;
  font-size: 13px;
}
.taglib-search-toggle-advanced-wrapper .btn.close {
  margin-right: 5px;
  position: relative;
  z-index: 1;
}

.taglib-user-display {
  padding: 0.5em;
}
.taglib-user-display .avatar {
  background: no-repeat center;
  background-size: 60px;
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px;
}
.taglib-user-display .avatar.author:after {
  background: rgba(50, 168, 230, 0.5);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
.taglib-user-display .user-details {
  margin-top: 1em;
}
.taglib-user-display .user-name {
  font-size: 1.1em;
  font-weight: bold;
}
.taglib-user-display a .user-name {
  text-decoration: underline;
}
.taglib-user-display.display-style-1 .user-profile-image {
  float: left;
  margin-right: 24px;
}
.taglib-user-display.display-style-1 .user-name {
  display: inline-block;
  margin-top: 10px;
}
.taglib-user-display.display-style-1 .user-details {
  margin-top: 0;
}
.taglib-user-display.display-style-2 .user-profile-image,
.taglib-user-display.display-style-2 .user-name {
  clear: both;
  display: block;
  min-height: 20px;
  text-align: center;
}
.taglib-user-display.display-style-3 {
  padding: 0;
}
.taglib-user-display.display-style-3 .user-profile-image {
  display: inline-block;
  vertical-align: middle;
}

.taglib-workflow-status .workflow-id,
.taglib-workflow-status .workflow-version,
.taglib-workflow-status .workflow-status {
  color: #999;
}
.table-cell .taglib-workflow-status {
  margin: 0;
}
.table-cell .taglib-workflow-status .workflow-status {
  padding-left: 0;
}

.lfr-autocomplete-input-list .yui3-aclist-list {
  margin: 0;
}

.portal-popup .sheet > .lfr-nav {
  margin-top: -24px;
}
.portal-popup .contacts-portlet .portlet-configuration-container .form {
  position: static;
}
.portal-popup .lfr-form-content {
  padding: 24px 12px;
}
.portal-popup .portlet-body,
.portal-popup .portlet-boundary,
.portal-popup .portlet-column,
.portal-popup .portlet-layout {
  height: 100%;
}
.portal-popup .portlet-column {
  position: static;
}
.portal-popup .dialog-body > .container-fluid-max-xl,
.portal-popup .dialog-body .container-view,
.portal-popup .export-dialog-tree > .container-fluid-max-xl,
.portal-popup .export-dialog-tree .container-view,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader .container-view,
.portal-popup .lfr-form-content > .container-fluid-max-xl,
.portal-popup .lfr-form-content .container-view,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content .container-view,
.portal-popup .process-list > .container-fluid-max-xl,
.portal-popup .process-list .container-view,
.portal-popup .roles-selector-body > .container-fluid-max-xl,
.portal-popup .roles-selector-body .container-view {
  padding-top: 20px;
}
.portal-popup .dialog-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .dialog-body .container-view .nav-tabs-underline,
.portal-popup .export-dialog-tree > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .export-dialog-tree .container-view .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader .container-view .nav-tabs-underline,
.portal-popup .lfr-form-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-form-content .container-view .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content .container-view .nav-tabs-underline,
.portal-popup .process-list > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .process-list .container-view .nav-tabs-underline,
.portal-popup .roles-selector-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .roles-selector-body .container-view .nav-tabs-underline {
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -20px;
}
.portal-popup .dialog-body > .lfr-nav + .container-fluid-max-xl,
.portal-popup .export-dialog-tree > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-form-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .process-list > .lfr-nav + .container-fluid-max-xl,
.portal-popup .roles-selector-body > .lfr-nav + .container-fluid-max-xl {
  padding-top: 0;
}
.portal-popup .login-container {
  padding: 1rem;
}
.portal-popup .management-bar-default {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
  border-top-width: 0;
  margin-bottom: 0;
}
.portal-popup .navbar ~ .portlet-configuration-setup,
.portal-popup .portlet-export-import-container {
  height: calc(100% - 48px);
  position: relative;
}
@media (min-width: 576px) {
  .portal-popup .navbar ~ .portlet-configuration-setup,
  .portal-popup .portlet-export-import-container {
    height: calc(100% - 48px);
  }
}
.portal-popup .panel-group .panel {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
}
.portal-popup .panel-group .panel + .panel {
  border-top-width: 0;
  margin-top: 0;
}
.portal-popup .panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.portal-popup .portlet-configuration-setup .lfr-nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: 3px;
  padding-right: 3px;
}
@media (min-width: 576px) {
  .portal-popup .portlet-configuration-setup .lfr-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.portal-popup .lfr-dynamic-uploader,
.portal-popup .process-list {
  bottom: 0;
  display: block;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 48px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 576px) {
  .portal-popup .lfr-dynamic-uploader,
  .portal-popup .process-list {
    top: 48px;
  }
}
.portal-popup .portlet-export-import-publish-processes {
  top: 0;
}
.portal-popup .dialog-footer {
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  left: 0;
  margin: 0;
  padding: 10px 24px;
  width: 100%;
  z-index: 1020;
}
@media (min-width: 768px) {
  .portal-popup .dialog-footer {
    position: fixed;
  }
}
.portal-popup .dialog-footer .btn {
  margin-left: 1rem;
  margin-right: 0;
}
.portal-popup .dialog-footer.dialog-footer-not-reverse {
  flex-direction: initial;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .portal-popup .dialog-body:not(:last-child),
  .portal-popup .lfr-dynamic-uploader:not(:last-child),
  .portal-popup .lfr-form-content:not(:last-child),
  .portal-popup .portlet-configuration-body-content:not(:last-child),
  .portal-popup .roles-selector-body:not(:last-child) {
    padding-bottom: 60px;
  }
}
.portal-popup .lfr-dynamic-uploader {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer {
  bottom: 0;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer + .dialog-footer {
  display: none;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content > form {
  flex-grow: 1;
  max-width: none;
  overflow: auto;
}
.portal-popup .portlet-configuration-edit-templates .portlet-configuration-body-content {
  bottom: 0;
}
.portal-popup:not(.article-preview) #main-content,
.portal-popup:not(.article-preview) #wrapper {
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
}
@media print {
  .portal-popup:not(.article-preview) #main-content,
  .portal-popup:not(.article-preview) #wrapper {
    position: initial;
  }
}
.portal-popup .columns-max > .portlet-layout.row {
  margin-left: 0;
  margin-right: 0;
}
.portal-popup .columns-max > .portlet-layout.row > .portlet-column {
  padding-left: 0;
  padding-right: 0;
}

html:not(#__):not(#___) .portlet-layout.dragging {
  border-collapse: separate;
}
html:not(#__):not(#___) .drop-area {
  background-color: #d3dadd;
}
html:not(#__):not(#___) .active-area {
  background: #ffc;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}
html:not(#__):not(#___) .sortable-layout-proxy {
  opacity: 1;
}
html:not(#__):not(#___) .sortable-layout-proxy .portlet-topper {
  background-image: none;
}
html:not(#__):not(#___) .proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
html:not(#__):not(#___) .proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
html:not(#__):not(#___) .proxy.generic-portlet .portlet-title {
  padding: 10px;
}
html:not(#__):not(#___) .proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}
html:not(#__):not(#___) .resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}
html:not(#__):not(#___) .sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}
html:not(#__):not(#___) .sortable-layout-drag-target-indicator {
  margin: 2px 0;
}
html:not(#__):not(#___) .yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-layout.dragging {
  border-collapse: separate;
}

.drop-area {
  background-color: #d3dadd;
}

.active-area {
  background: #ffc;
}

.portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .portlet-boundary.yui3-dd-dragging {
    transition: none;
  }
}
.portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed #ccc;
}

.sortable-layout-proxy {
  opacity: 1;
}
.sortable-layout-proxy .portlet-topper {
  background-image: none;
}

.proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
.proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
.proxy.generic-portlet .portlet-title {
  padding: 10px;
}
.proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}

.resizable-proxy {
  border: 1px dashed #828f95;
  position: absolute;
  visibility: hidden;
}

.sortable-proxy {
  background: #727c81;
  margin-top: 1px;
}

.sortable-layout-drag-target-indicator {
  margin: 2px 0;
}

.yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-column-content.empty {
  padding: 50px;
}

.lfr-portlet-title-editable {
  margin-top: 0;
  z-index: 9999;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content {
  padding: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .field-input {
  margin-bottom: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .textfield-label {
  display: none;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-toolbar-content {
  display: inline-block;
  vertical-align: bottom;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-group {
  margin-top: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn {
  display: inline-block;
  float: none;
  margin-top: 0;
  width: auto;
}

.lfr-source-editor {
  border: solid 0 #ccc;
  border-bottom-width: 2px;
  position: relative;
}
.lfr-source-editor .ace_editor {
  height: 100%;
}
.lfr-source-editor .lfr-source-editor-toolbar li > .btn {
  background-color: #fff;
  border: transparent;
  color: #717383;
  outline: 0;
}
.lfr-source-editor .lfr-source-editor-code {
  background-color: #fff;
  color: #2b4259;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter {
  background-color: #ededef;
  color: #868896;
  overflow: hidden;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget {
  font-family: fontawesome-alloy;
  text-align: center;
  vertical-align: middle;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open, .lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open:before {
  content: "▾";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed:before {
  content: "▸";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-cell {
  color: #fff;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #717383;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-layer {
  border-right: solid 1px #ccc;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_info {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #ededef;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_constant {
  color: #34adab;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_tag {
  color: #1d5ec7;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string {
  color: #ff6c58;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string.ace_regex {
  color: #f00;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code {
  background-color: #47474f;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter {
  background: #54555e;
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #009aed;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #11394e;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_cursor {
  color: #fff;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_tag {
  color: #4d91ff;
}

.lfr-fullscreen-source-editor {
  height: 100%;
  overflow: hidden;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-header {
  height: 40px;
  margin-right: 4px;
  margin-top: 4px;
  min-height: 40px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content {
  height: 95%;
  position: relative;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .panel-splitter {
  border: 1px solid #ccc;
  position: absolute;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .preview-panel {
  display: inline-block;
  overflow-y: auto;
  padding-left: 20px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .source-panel {
  display: inline-block;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .preview-panel {
  height: 100%;
  width: 50%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .panel-splitter {
  height: 100%;
  left: 50%;
  top: 0;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .preview-panel {
  height: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .panel-splitter {
  top: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .panel-splitter,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .preview-panel {
  display: none;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .source-panel {
  height: 100%;
  width: 100%;
}

.lfr-fulscreen-source-editor-dialog .modal-footer {
  text-align: left;
}

.file-icon-color-0 {
  background-color: #fff;
  color: #6b6c7e;
}

.file-icon-color-1 {
  background-color: #fff;
  color: #a7a9bc;
}

.file-icon-color-2 {
  background-color: #fff;
  color: #50d2a0;
}

.file-icon-color-3 {
  background-color: #fff;
  color: #af78ff;
}

.file-icon-color-4 {
  background-color: #fff;
  color: #ffb46e;
}

.file-icon-color-5 {
  background-color: #fff;
  color: #ff5f5f;
}

.file-icon-color-6 {
  background-color: #fff;
  color: #4b9bff;
}

.file-icon-color-7 {
  background-color: #fff;
  color: #272833;
}

.lfr-item-viewer.uploading > div:not(.progress-container) {
  opacity: 0.3;
}
.lfr-item-viewer.uploading > .progress-container {
  visibility: visible;
}
.lfr-item-viewer .aspect-ratio a.item-preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}
.lfr-item-viewer .image-viewer-base-image-list {
  padding-top: 35px;
}
.lfr-item-viewer .item-preview:hover {
  cursor: pointer;
}
.lfr-item-viewer .progress-container {
  background-color: #fff;
  left: 0;
  margin: 0 auto;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 80%;
  z-index: 1000;
}
.lfr-item-viewer .progress-container a {
  position: absolute;
  right: 30px;
}
.lfr-item-viewer .progress-container .progress {
  margin-top: 10px;
}
.lfr-item-viewer .search-info {
  background-color: #d3e8f1;
}
.lfr-item-viewer .search-info .keywords {
  font-size: 1.4em;
  font-weight: bold;
}
.lfr-item-viewer .search-info .change-search-folder {
  font-size: 0.8em;
  font-weight: normal;
}
.lfr-item-viewer .upload-view {
  display: table;
  height: 400px;
  margin-top: 20px;
  width: 100%;
}
.lfr-item-viewer .upload-view > div {
  display: table-cell;
  vertical-align: middle;
}
.lfr-item-viewer .yui3-widget-bd {
  position: relative;
}

.lfr-menu-expanded li a:focus {
  background-color: #5b677d;
  color: #fff;
  text-shadow: -1px -1px #2c2f34;
}

.lfr-url-error {
  display: inline-block;
  white-space: normal;
  overflow-wrap: break-all;
  word-wrap: break-all;
}

.lfr-page-layouts {
  padding: 0;
}
.lfr-page-layouts input[type=radio] {
  opacity: 0;
  position: absolute;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal {
  cursor: default;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  bottom: -0.0625rem;
  content: "";
  left: -0.0625rem;
  position: absolute;
  right: -0.0625rem;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal {
  cursor: pointer;
  outline: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal::after {
  border-radius: 0 0 0.25rem 0.25rem;
  bottom: -0.0625rem;
  content: "";
  height: 0;
  left: -0.0625rem;
  position: absolute;
  right: -0.0625rem;
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal::after {
    transition: none;
  }
}
.modal-body.dialog-iframe-bd {
  overflow: hidden;
  padding: 0;
}

.modal-dialog:not(.dialog-iframe-modal):not(.modal-full-screen) {
  position: relative;
}
.modal-dialog.dialog-iframe-modal {
  max-width: none;
}
.modal-dialog.modal-dialog-sm {
  max-width: 500px;
}
.modal-dialog .yui3-resize-handles-wrapper {
  pointer-events: all;
}
.modal-dialog .yui3-resize-handles-wrapper .yui3-resize-handle-inner-br {
  bottom: 0;
  right: 0;
}

.modal-open .modal {
  display: block;
}

.sheet > .panel-group .sheet-footer {
  margin-bottom: 0;
}

.sheet-footer .btn {
  margin-right: 0.5rem;
}
.sheet-footer .btn:last-child {
  margin-right: 0;
}

.tag-items {
  list-style: none;
  margin: 0 1em 0 0;
  padding: 0 1em 0.5em;
  white-space: normal;
}
.tag-items li {
  display: inline-block;
  margin: 0 1em 0 0;
  max-width: 100%;
}

.tag-selected {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.tag-cloud .tag-popularity-1 {
  font-size: 1em;
}
.tag-cloud .tag-popularity-2 {
  font-size: 1.3em;
}
.tag-cloud .tag-popularity-3 {
  font-size: 1.6em;
}
.tag-cloud .tag-popularity-4 {
  font-size: 1.9em;
}
.tag-cloud .tag-popularity-5 {
  font-size: 2.2em;
}
.tag-cloud .tag-popularity-6 {
  font-size: 2.5em;
}

.lfr-portal-tooltip {
  display: inline-flex;
}
.lfr-portal-tooltip,
.lfr-portal-tooltip a {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.tree-node .icon-check {
  padding-right: 2px;
}
.tree-node .tree-node-checked .icon-check {
  padding-right: 0;
}
.tree-node [class^=icon-] {
  margin-right: 5px;
}
.tree-node .tree-node-checkbox-container {
  margin-right: 0;
}
.tree-node .tree-node-selected .tree-label {
  background: none;
}

.tree-node-content .tree-hitarea {
  color: #999;
  font-size: 10px;
  padding-right: 6px;
}
.tree-node-content .tree-label {
  margin-left: 3px;
}
.tree-node-content .tree-node-hidden-hitarea {
  visibility: hidden;
}

.tree-node-selected .tree-label {
  background-color: transparent;
}

.tree-view li.tree-node .tree-node-content svg.lexicon-icon {
  pointer-events: none;
}

.user-icon-color-0 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #6b6c7e;
}

.user-icon-color-1 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #4a97f2;
}

.user-icon-color-2 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #e87523;
}

.user-icon-color-3 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #fb625b;
}

.user-icon-color-4 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #4fa488;
}

.user-icon-color-5 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #fe4fb5;
}

.user-icon-color-6 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #879b7a;
}

.user-icon-color-7 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #af78ff;
}

.user-icon-color-8 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #bf8c2a;
}

.user-icon-color-9 {
  background-color: #fff;
  box-shadow: 0 0 0 1px #dee2e6;
  color: #5f9bc7;
}

.collapse.open {
  display: block;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-top'%20d='M480%2064H32C14.336%2064%200%2049.664%200%2032S14.336%200%2032%200h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23212529'/%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-middle'%20d='M480%20288H32c-17.664%200-32-14.336-32-32s14.336-32%2032-32h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23212529'/%3E%3Cpath%20class='lexicon-icon-outline%20bars-line-bottom'%20d='M480%20512H32c-17.664%200-32-14.336-32-32s14.336-32%2032-32h448c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032z'%20fill='%23212529'/%3E%3C/svg%3E");
  height: 1em;
  width: 1em;
}

.navbar-nav .nav-item.hover:after {
  bottom: -0.125rem;
  content: "";
  height: 0.125rem;
  left: 0;
  position: absolute;
  width: 100%;
}

.navbar .navbar-toggler .c-inner {
  max-width: none;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
html:not(#__):not(#___) .cadmin .component-action.portlet-options {
  color: white;
}

body.portlet {
  border-width: 0;
}

.portlet-icon-back {
  margin-top: -2px;
}
.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}

.portlet-options-dropdown {
  z-index: 1035;
}

.portlet-topper {
  position: relative;
}
.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
.portlet-draggable .portlet-topper {
  cursor: move;
}

.portlet-title-editable {
  cursor: pointer;
}

.portlet-title-text {
  display: inline-block;
  margin-top: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.panel-page-body .portlet-title-text, .panel-page-content .portlet-title-text {
  cursor: auto;
}

.portlet-minimized .portlet-content {
  padding: 0;
}

.portlet-nested-portlets .portlet-boundary {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.portlet-layout .portlet-header {
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .portlet .visible-interaction {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .controls-hidden .portlet .visible-interaction {
    display: none;
  }
}
.portlet:hover .visible-interaction, .portlet.open .visible-interaction, .portlet.focus .visible-interaction {
  display: block;
}

.controls-hidden .lfr-meta-actions,
.controls-hidden .lfr-configurator-visibility {
  display: none;
}
.controls-hidden .portlet-topper-toolbar {
  display: none !important;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(0, 0, 0, 0.5);
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.25s, transform 0.25s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    transition: none;
  }
}
html:not(#__):not(#___) .cadmin .portlet-actions {
  float: right;
}
html:not(#__):not(#___) .cadmin .portlet-options {
  display: inline-block;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu {
  flex: 0 1 auto;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > span > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(0, 0, 0, 0.5);
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:focus, html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-name-text {
  font-size: 14px;
  font-weight: 600;
}
html:not(#__):not(#___) .cadmin .portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 576px) {
  html:not(#__):not(#___) .lfr-configurator-visibility .portlet:hover .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.focus .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.open > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.focus > .cadmin.portlet-topper {
    opacity: 1;
    transform: translateY(-97%);
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper {
    transition-duration: 0ms;
  }
}
@media (max-width: 767.98px) {
  html:not(#__):not(#___) .controls-visible .cadmin.portlet-topper {
    display: box;
    display: flex;
  }
}
html:not(#__):not(#___) .controls-visible .cadmin .portlet-topper-toolbar {
  display: block;
}

.portlet {
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-content-editable, .controls-visible .portlet.open > .portlet-content-editable, .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-topper, .controls-visible .portlet.open > .portlet-topper, .controls-visible .portlet.focus > .portlet-topper {
    opacity: 1;
    transform: translateY(-97%);
  }
}
@media (min-width: 576px) {
  .lfr-configurator-visibility .portlet:hover .portlet-topper, .lfr-configurator-visibility .portlet.focus .portlet-topper, .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}

.portlet-content-editable {
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}
.portlet > .portlet-content-editable {
  border-color: transparent;
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.portlet-name-text {
  font-size: 0.875rem;
  font-weight: 600;
}

.portlet-options {
  display: inline-block;
}

.portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portlet-title-menu {
  flex: 0 1 auto;
}
.portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}

.portlet-topper {
  background-color: #f7f7f7;
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(0, 0, 0, 0.5);
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
.portlet > .portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.25s, transform 0.25s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-topper {
    display: box;
    display: flex;
  }
}

.portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
.portlet-topper-toolbar > a,
.portlet-topper-toolbar > span > a,
.portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(0, 0, 0, 0.5);
}
.portlet-topper-toolbar > a:focus, .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
.controls-visible .portlet-topper-toolbar {
  display: block;
}

.lfr-panel-page .portlet-title {
  font-size: 13px;
}

.portlet-borderless .portlet-content {
  padding: 1rem;
}
.portlet-decorate .portlet-content {
  background: #fff;
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  padding: 1rem;
  word-wrap: break-word;
}
.portlet-barebone .portlet-content {
  padding: 0;
}

.portlet-dynamic-data-lists-display .lfr-ddm-field-group,
.portlet-dynamic-data-lists .lfr-ddm-field-group {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 28px 24px;
}

.breadcrumb.breadcrumb-vertical {
  display: inline-block;
  text-align: center;
}
.breadcrumb.breadcrumb-vertical li {
  display: block;
}
.breadcrumb.breadcrumb-vertical li.last, .breadcrumb.breadcrumb-vertical li.only {
  background: none;
}
.breadcrumb.breadcrumb-vertical .divider {
  background: url(../images/arrows/07_down.png) no-repeat 50% 100%;
  display: block;
  height: 10px;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.navbar form {
  margin: 0;
}

:not(.inline-item) > .loading-animation {
  margin-bottom: 20px;
  margin-top: 20px;
}
.product-menu .loading-animation {
  margin-top: 160px;
}

@keyframes lfr-drop-active {
  0% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
  50% {
    background-color: #ddedde;
    border-color: #7d7;
    transform: scale(1.1);
  }
  75% {
    background-color: #ddedde;
    border-color: #7d7;
  }
  100% {
    background-color: #ebebeb;
    border-color: #ddd;
  }
}
.lfr-upload-container .progress-bar,
.lfr-upload-container .progress {
  border-radius: 10px;
}
.lfr-upload-container .upload-file,
.lfr-upload-container .upload-target {
  border-radius: 5px;
}
.upload-drop-active .lfr-upload-container .upload-target {
  animation: none;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  animation: lfr-drop-active 1s ease 0.2s infinite;
}

.select-files {
  border-radius: 5px;
}

.taglib-form-navigator > .form-steps > ul.form-navigator.list-group {
  box-shadow: none;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:hover .number, .taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:focus .number {
  box-shadow: 0 0 5px 0 #333;
  transition-duration: 0.25s;
  transition-property: box-shadow;
  transition-timing-function: ease-out;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label .number {
  border-radius: 50%;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.lfr-progress-active .progress-bar-status,
.lfr-upload-container .file-uploading .progress-bar .progress {
  animation: progress-bar-stripes 0.5s linear infinite;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0));
  background-size: 40px 40px;
  transition: width, 0.5s, ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-progress-active .progress-bar-status,
  .lfr-upload-container .file-uploading .progress-bar .progress {
    transition: none;
  }
}

@keyframes highlight-animation {
  from {
    background-color: #ffc;
  }
  to {
    background-color: transparent;
  }
}
.highlight-animation {
  animation: highlight-animation 0.7s;
}

.portlet-options.btn-group .dropdown-toggle, .portlet-options.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.form-group.form-inline.input-boolean-wrapper label, .form-group.form-inline.input-checkbox-wrapper label {
  gap: 0.3125rem;
}

/* These inject tags are used for dynamically creating imports for themelet styles, you can place them where ever you like in this file. */
/* inject:imports */
/* endinject */
/* This file allows you to override default styles in one central location for easier upgrade and maintenance. */
/*
	### TOKENS QUE A BIBLIOTECA NAO DECLARA ###

	`geduc-components.css` cobre a maior parte do Design System, mas nao tudo: o
	preset Tailwind do modulo React (`packages/config/tailwind.config.ts`) tem
	escala tipografica de hero, sombras, gradientes de veu e medidas de
	componente que a biblioteca nao precisou declarar porque nenhum componente
	dela usa.

	O tema usa. Entao eles vivem aqui, e os valores sao COPIADOS do preset — nao
	redigitados de memoria. Mudou la, muda aqui.

	Por que nao editar a biblioteca: ela e vendorada por `sea-li add-ftl`, e o
	proximo update sobrescreve o arquivo inteiro. Correcao escrita dentro dela
	desaparece sem aviso.

	Nada aqui SOBRESCREVE token da biblioteca, so acrescenta. Isso e proposital:
	o CSS da biblioteca carrega depois do tema (ver `portal_normal.ftl`), entao
	um `:root` daqui perderia para um `:root` de la. Se algum dia for preciso
	sobrescrever de fato, `html:root` tem a especificidade necessaria.

	Uma diferenca conhecida e deliberadamente NAO corrigida: `--radius-pill` e
	24px na biblioteca e 999px no Tailwind. Ela so e usada em botao (44-48px de
	altura) e etiqueta de palestrante (~24px); nos tres casos 24px ja e metade
	da altura ou mais, entao o canto sai completamente arredondado e o resultado
	na tela e identico.
*/
:root {
  /* ---------- escala tipografica ausente na biblioteca ---------- */
  /* Titulo do hero da Home: escala propria, maior que `display`. */
  --text-hero: clamp(44px, 5.2vw, 74px);
  --text-hero-line: 0.95;
  --text-hero-tracking: -0.045em;
  /* Titulo do cabecalho das paginas internas. */
  --text-page-title: clamp(30px, 4vw, 52px);
  --text-display: clamp(36px, 5vw, 61px);
  /* Numero das faixas de estatistica. */
  --text-stat: clamp(26px, 3vw, 38px);
  /* Horario como tipografia principal da capa do card de atividade. */
  --text-time-hero: clamp(24px, 3.5vw, 32px);
  /* ---------- espacamento e sombra ---------- */
  /* A biblioteca vai ate --space-11; as faixas da Home usam 80px. */
  --space-12: 80px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  /* ---------- cores ausentes ---------- */
  --color-navy-900: #001548;
  --color-neutral-50: #fafafa;
  --color-neutral-300: #d4d4d4;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-contrast-dark: #b07a11;
  --color-graphic-orange-text: #a34700;
  /*
  	Anel de foco.

  	Vinha so do `addBase` do preset Tailwind, isto e, so do CSS do bundle.
  	Em pagina sem widget React `var(--surface-focus)` nao resolvia e o
  	`outline` caia por invalido — o foco sumia da pagina inteira. O unico
  	lugar do tema que ja usava o token escreveu um valor de reserva a mao
  	(`_programacao.scss`); os demais nao tinham como saber que precisavam.

  	**O valor NAO e o do preset.** La era `rgba(0, 167, 190, 0.25)`, que
  	sobre branco compoe `rgb(191, 233, 239)` — **1,30:1**, contra os 3:1 que
  	a WCAG 1.4.11 exige de componente de interface. Enquanto a regra so
  	valia onde havia widget React, o estrago era local; ao subir para
  	`*:focus-visible` global, ela passaria a trocar o anel do navegador por
  	um quase invisivel em toda pagina do portal — e ainda apagaria a reserva
  	boa de `_programacao.scss`, que resolvia para o opaco justamente porque
  	o token nao existia.

  	`#007889` e esse opaco, e da **5,19:1** sobre branco. Espelhado em
  	`packages/config/tailwind.config.ts`, para o bundle nao divergir.
  */
  --surface-focus: #007889;
  /* ---------- gradientes de composicao ---------- */
  /*
  	Veus do hero: dissolvem a arte oficial no navy pelas quatro bordas, para o
  	titulo cair sobre fundo chapado. Sao dois porque as bordas superior/esquerda
  	e inferior/direita tem curvas diferentes.
  */
  --gradient-hero-veil-a: linear-gradient(
  		to bottom,
  		#001548 0%,
  		rgba(0, 21, 72, 0.84) 14%,
  		transparent 38%
  	),
  	linear-gradient(to right, #001548 0%, rgba(0, 21, 72, 0.88) 16%, transparent 38%);
  --gradient-hero-veil-b: linear-gradient(
  		to top,
  		#001548 0%,
  		rgba(0, 21, 72, 0.94) 16%,
  		rgba(0, 21, 72, 0.68) 30%,
  		transparent 52%
  	),
  	linear-gradient(to left, #001548 0%, rgba(0, 21, 72, 0.58) 5%, transparent 14%);
  /* Faixa escura sobre a foto do banner de chamada, so no lado do texto. */
  --gradient-cta-veil: linear-gradient(
  	90deg,
  	rgba(0, 21, 72, 0.88) 0%,
  	rgba(0, 21, 72, 0.88) 30%,
  	rgba(0, 21, 72, 0) 52%,
  	rgba(0, 21, 72, 0) 100%
  );
  /* Brilho ciano difuso do cabecalho das paginas internas. */
  --gradient-page-glow: radial-gradient(
  	ellipse 60% 60% at 80% 50%,
  	rgba(0, 167, 190, 0.12) 0%,
  	transparent 60%
  );
  --gradient-graphic-opening: linear-gradient(135deg, #001548 0%, #ee5a67 62%, #f4aa18 100%);
  /* ---------- medidas de componente ---------- */
  --max-copy: 720px;
  --max-heading: 680px;
  --max-step: 190px;
  --max-pill: 960px;
  --h-header: 64px;
  --h-experience-art: 260px;
  /*
  	Altura da faixa de numeros do hero, MEDIDA no prototipo e nao derivada:
  	20px de recuo em cima, 55px da linha do valor (`--text-stat` de 38px em
  	`line-height: normal`, que na Atyp Display da 1,45), 20px embaixo e os dois
  	filetes de 1px.

  	Nao confundir com `--min-hero-stat`, logo abaixo: aquele e o PISO de 92px
  	que o prototipo poe em cada celula, e o conteudo passa dele. Usar o piso na
  	altura do hero deixaria a primeira tela 3px curta.
  */
  --hero-stats-band: 97px;
  --min-hero-grid: 570px;
  --min-hero-stat: 92px;
  --min-info-card: 190px;
  --min-step-card: 230px;
  --min-cta-panel: 280px;
  /* Recuo superior que cada tela reserva para a pilha fixa do cabecalho. */
  --header-offset: 116px;
  --page-header-offset: 120px;
  /* ---------- movimento ---------- */
  /*
  	Os tempos sao token de design como qualquer outro. Vem de
  	`packages/ui/src/motion.ts`, que e o que o framer-motion usa no React.
  */
  --dur-quick: 0.22s;
  --dur-item: 0.28s;
  --dur-group: 0.35s;
  --dur-block: 0.45s;
  --dur-section: 0.55s;
  --dur-exit: 0.15s;
  --delay-after-container: 0.18s;
  --delay-after-content: 0.28s;
  --stagger-tight: 70ms;
  --stagger-loose: 80ms;
  /* Curva de saida do prototipo — parte rapido e assenta devagar. */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  /* Deslocamento inicial das entradas, em pixels. */
  --offset-up: 24px;
  --offset-header: -20px;
  /* ---------- carrossel ---------- */
  --w-carousel-card: 320px;
  --w-carousel-card-mobile: 260px;
  --w-dot-active: 22px;
  /* ---------- aviso de atencao ---------- */
  /*
  	A biblioteca vendorada traz `--color-primary-light` e os cinzas, mas nao
  	o par de atencao — e o `Notice type="warning"` do prototipo
  	(`components/ui/Notice/Notice.module.css`) e desenhado com ele. Os dois
  	valores sao os de `styles/tokens.css`, copiados e nao aproximados.

  	So o par usado entra: `--color-warning` (#D97706) existe la e nao tem
  	leitor aqui.
  */
  --color-warning-bg: #fef3c7;
  --color-warning-text: #b45309;
}

/*
	### FONTES DE MARCA ###

	Ate aqui nenhuma fonte era servida. O tema declarava a pilha
	`Montserrat, Atyp Text, ...` em `_variables.scss` e a biblioteca declarava a
	mesma em `--font-family`, mas ninguem carregava os arquivos: tudo caia no
	`-apple-system` do sistema. A pagina tinha a composicao certa e a tipografia
	de outro projeto.

	As duas familias sao auto-hospedadas, e nao puxadas de CDN. O portal atende
	rede institucional e ambiente sem saida para a internet; depender do
	fonts.googleapis.com em runtime trocaria um problema visivel por um
	intermitente.

	- Atyp Display / Atyp Text: kit oficial da identidade visual, copiado de
	  `geduc-iii-congresso-educacao-sesc/geduc-components/src/assets/fonts/atyp`.
	  Quatro pesos de cada — Regular 400, Medium 500, Semibold 600, Bold 700 —
	  que e o que a escala tipografica do Design System v3.6 usa.

	- Montserrat: baixada do Google Fonts. Vem como FONTE VARIAVEL, um arquivo
	  por subconjunto cobrindo o eixo de peso inteiro; por isso sao dois arquivos
	  e nao oito, e por isso o `font-weight` e uma faixa (`400 700`) em vez de um
	  numero.

	`font-display: swap` em todas: o texto aparece na hora com a fonte do
	sistema e troca quando o arquivo chega. Numa pagina cujo motivo de existir e
	ser lida pelo buscador, esconder texto esperando fonte e o pior dos mundos.
*/
/* ---------- Atyp Display — titulos ---------- */
@font-face {
  font-family: "Atyp Display";
  src: url("../fonts/AtypDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("../fonts/AtypDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("../fonts/AtypDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atyp Display";
  src: url("../fonts/AtypDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ---------- Atyp Text — corpo, segunda na pilha ---------- */
@font-face {
  font-family: "Atyp Text";
  src: url("../fonts/AtypText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atyp Text";
  src: url("../fonts/AtypText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atyp Text";
  src: url("../fonts/AtypText-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atyp Text";
  src: url("../fonts/AtypText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ---------- Montserrat — corpo, primeira na pilha ---------- */
/*
	Os dois subconjuntos com o `unicode-range` do proprio Google: o navegador so
	baixa `latin-ext` se a pagina tiver algum caractere que caia nele. Portugues
	cabe todo em `latin`, entao na pratica sao 38 KB.
*/
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- fallback casado, para a troca nao mexer no layout ---------- */
/*
	Enquanto a Montserrat nao chega, quem desenha e a fonte do sistema — e ela
	nao mede o mesmo. Medido no ambiente, no mesmo texto a 100px: Montserrat
	4375px, `system-ui` 4463px, Arial 3913px. Sao 2% a mais no fallback padrao,
	e em titulo de 56px isso muda onde a linha quebra: o texto salta quando a
	fonte real entra.

	`size-adjust` estica a fonte local ate a largura da Montserrat, entao a
	troca deixa de mover o layout. O numero sai da medicao acima
	(4375 / 3913), e nao de estimativa: refazer a conta e o jeito de conferir.

	So `local()`: e a fonte que a maquina ja tem, sem download nenhum.
*/
@font-face {
  font-family: "Montserrat fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 111.8%;
  font-display: swap;
}
/*
Desenha os icones `la-*` com os tracados do protótipo.

  Gerado a partir de packages/ui/src/components/Icon/Icon.tsx.
  As macros emitem `<i class="las la-x">` e contam com Line Awesome, que este
  portal nao serve — o modulo Font Awesome nao esta deployado e o tema opta por
  sair dele. Cada tracado abaixo e o mesmo desenho Lucide do protótipo,
  embutido como mask-image: o glifo fica identico ao do React e a cor continua
  vindo de `currentColor`.

  Os tracados vivem num mapa, e nao soltos em cada regra, porque o mesmo
  desenho e pedido de dois lugares: as classes `la-*` que as macros da
  biblioteca emitem, e os pseudo-elementos que o tema desenha por conta propria
  — o icone antes de cada pergunta do FAQ, por exemplo, que a biblioteca nao
  emite e nao da para acrescentar por marcacao. Uma fonte so para os dois.
*/
/*
	Pinta o pseudo-elemento (ou o elemento) com um tracado do mapa.

	`@error` de proposito: nome errado tem de quebrar a compilacao, e nao sair
	como um retangulo em branco na tela — foi assim que as setas do carrossel
	viraram dois blocos escuros.
*/
.las,
.la {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  /*
    Mascara vazia como padrao.

    Sem ela, uma classe `la-*` que nao tenha tracado nesta folha nao recebe
    `mask-image` nenhuma — e sem mascara o `background-color: currentColor`
    pinta o quadrado inteiro de 1em. Foi o que apareceu nas setas do carrossel:
    dois blocos escuros no lugar dos chevrons.

    Com a mascara vazia, icone desconhecido nao aparece. Falta um icone e
    ninguem ve um defeito no lugar dele.
  */
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.la-arrow-right {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E");
}

.la-bars {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2019h16%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2019h16%22%2F%3E%3C%2Fsvg%3E");
}

.la-bus {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206v6%22%2F%3E%3Cpath%20d%3D%22M15%206v6%22%2F%3E%3Cpath%20d%3D%22M2%2012h19.6%22%2F%3E%3Cpath%20d%3D%22M18%2018h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2%200-.4-.1-.8-.2-1.2l-1.4-5C20.1%206.8%2019.1%206%2018%206H4a2%202%200%200%200-2%202v10h3%22%2F%3E%3Cpath%20d%3D%22M7%2016a2%202%200%201%201%200%204%202%202%200%200%201%200-4z%22%2F%3E%3Cpath%20d%3D%22M9%2018h5%22%2F%3E%3Cpath%20d%3D%22M16%2016a2%202%200%201%201%200%204%202%202%200%200%201%200-4z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206v6%22%2F%3E%3Cpath%20d%3D%22M15%206v6%22%2F%3E%3Cpath%20d%3D%22M2%2012h19.6%22%2F%3E%3Cpath%20d%3D%22M18%2018h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2%200-.4-.1-.8-.2-1.2l-1.4-5C20.1%206.8%2019.1%206%2018%206H4a2%202%200%200%200-2%202v10h3%22%2F%3E%3Cpath%20d%3D%22M7%2016a2%202%200%201%201%200%204%202%202%200%200%201%200-4z%22%2F%3E%3Cpath%20d%3D%22M9%2018h5%22%2F%3E%3Cpath%20d%3D%22M16%2016a2%202%200%201%201%200%204%202%202%200%200%201%200-4z%22%2F%3E%3C%2Fsvg%3E");
}

.la-calendar {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3Cpath%20d%3D%22M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3Cpath%20d%3D%22M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E");
}

.la-calendar-check {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209a3%203%200%200%201%200%206v2a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-2a3%203%200%200%201%200-6V7a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209a3%203%200%200%201%200%206v2a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-2a3%203%200%200%201%200-6V7a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
}

.la-calendar-times {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
}

.la-car {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%208-2%202-1.5-3.7A2%202%200%200%200%2015.646%205H8.4a2%202%200%200%200-1.903%201.257L5%2010%203%208%22%2F%3E%3Cpath%20d%3D%22M7%2014h.01%22%2F%3E%3Cpath%20d%3D%22M17%2014h.01%22%2F%3E%3Cpath%20d%3D%22M5%2010h14a2%202%200%200%201%202%202v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M5%2018v2%22%2F%3E%3Cpath%20d%3D%22M19%2018v2%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%208-2%202-1.5-3.7A2%202%200%200%200%2015.646%205H8.4a2%202%200%200%200-1.903%201.257L5%2010%203%208%22%2F%3E%3Cpath%20d%3D%22M7%2014h.01%22%2F%3E%3Cpath%20d%3D%22M17%2014h.01%22%2F%3E%3Cpath%20d%3D%22M5%2010h14a2%202%200%200%201%202%202v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M5%2018v2%22%2F%3E%3Cpath%20d%3D%22M19%2018v2%22%2F%3E%3C%2Fsvg%3E");
}

.la-certificate {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E");
}

.la-check-circle {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E");
}

.la-chevron-down {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}

.la-chevron-left {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E");
}

.la-chevron-right {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E");
}

.la-edit {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

.la-exclamation-triangle {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
}

.la-file-alt {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

.la-inbox {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E");
}

.la-info-circle {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E");
}

.la-map-marker {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Cpath%20d%3D%22M12%207a3%203%200%201%201%200%206%203%203%200%200%201%200-6z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Cpath%20d%3D%22M12%207a3%203%200%201%201%200%206%203%203%200%200%201%200-6z%22%2F%3E%3C%2Fsvg%3E");
}

.la-microphone {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019v3%22%2F%3E%3Cpath%20d%3D%22M19%2010v2a7%207%200%200%201-14%200v-2%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2213%22%20rx%3D%223%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019v3%22%2F%3E%3Cpath%20d%3D%22M19%2010v2a7%207%200%200%201-14%200v-2%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2213%22%20rx%3D%223%22%2F%3E%3C%2Fsvg%3E");
}

.la-qrcode {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207V5a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22M17%203h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M21%2017v2a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M7%2021H5a2%202%200%200%201-2-2v-2%22%2F%3E%3Cpath%20d%3D%22M7%2012h10%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207V5a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22M17%203h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M21%2017v2a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M7%2021H5a2%202%200%200%201-2-2v-2%22%2F%3E%3Cpath%20d%3D%22M7%2012h10%22%2F%3E%3C%2Fsvg%3E");
}

.la-question-circle {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3Cpath%20d%3D%22M4%2017v2%22%2F%3E%3Cpath%20d%3D%22M5%2018H3%22%2F%3E%3C%2Fsvg%3E");
}

.la-search {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E");
}

.la-sparkles {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%2F%3E%3Cpath%20d%3D%22M20%202v4%22%2F%3E%3Cpath%20d%3D%22M22%204h-4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%2F%3E%3Cpath%20d%3D%22M20%202v4%22%2F%3E%3Cpath%20d%3D%22M22%204h-4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.la-ticket-alt {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209a3%203%200%200%201%200%206v2a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-2a3%203%200%200%201%200-6V7a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209a3%203%200%200%201%200%206v2a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-2a3%203%200%200%201%200-6V7a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
}

.la-times {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E");
}

.la-train {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203.1V7a4%204%200%200%200%208%200V3.1%22%2F%3E%3Cpath%20d%3D%22m9%2015-1-1%22%2F%3E%3Cpath%20d%3D%22m15%2015%201-1%22%2F%3E%3Cpath%20d%3D%22M9%2019c-2.8%200-5-2.2-5-5v-4a8%208%200%200%201%2016%200v4c0%202.8-2.2%205-5%205Z%22%2F%3E%3Cpath%20d%3D%22m8%2019-2%203%22%2F%3E%3Cpath%20d%3D%22m16%2019%202%203%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203.1V7a4%204%200%200%200%208%200V3.1%22%2F%3E%3Cpath%20d%3D%22m9%2015-1-1%22%2F%3E%3Cpath%20d%3D%22m15%2015%201-1%22%2F%3E%3Cpath%20d%3D%22M9%2019c-2.8%200-5-2.2-5-5v-4a8%208%200%200%201%2016%200v4c0%202.8-2.2%205-5%205Z%22%2F%3E%3Cpath%20d%3D%22m8%2019-2%203%22%2F%3E%3Cpath%20d%3D%22m16%2019%202%203%22%2F%3E%3C%2Fsvg%3E");
}

.la-universal-access {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%224%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22m18%2019%201-7-6%201%22%2F%3E%3Cpath%20d%3D%22m5%208%203-3%205.5%203-2.36%203.5%22%2F%3E%3Cpath%20d%3D%22M4.24%2014.5a5%205%200%200%200%206.88%206%22%2F%3E%3Cpath%20d%3D%22M13.76%2017.5a5%205%200%200%200-6.88-6%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%224%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22m18%2019%201-7-6%201%22%2F%3E%3Cpath%20d%3D%22m5%208%203-3%205.5%203-2.36%203.5%22%2F%3E%3Cpath%20d%3D%22M4.24%2014.5a5%205%200%200%200%206.88%206%22%2F%3E%3Cpath%20d%3D%22M13.76%2017.5a5%205%200%200%200-6.88-6%22%2F%3E%3C%2Fsvg%3E");
}

.la-user {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M12%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M12%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
}

.la-user-friends {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M9%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M9%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
}

.la-user-plus {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M12%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M12%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
}

.la-users {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M9%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M9%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
}

.la-utensils {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E");
}

/*
	### BOTOES ###

	A biblioteca `geduc-*` da a COR do botao (`.geduc-btn-primary`,
	`.geduc-btn-outline`) e nada mais. A geometria — altura, recuo, peso da
	fonte, alinhamento — vinha do `.btn` do Bootstrap, que e de outro sistema:
	44px de alvo virava 31px, o recuo horizontal 12px em vez de 20px e o texto
	saia em peso 400 onde o desenho pede 600.

	Aqui a geometria e a do componente `Button` do modulo React
	(`packages/ui/src/components/Button/Button.tsx`), copiada tamanho a tamanho:

		sm   32px de altura   12px de recuo   13px de texto
		md   44px             20px            14px          <- padrao
		lg   48px             24px            16px

	As variantes `contrast` e `ghost` nao existem na biblioteca e sao desenhadas
	aqui, com os mesmos tokens que o React usa.

	Sobre a ordem: o CSS da biblioteca carrega DEPOIS deste arquivo, entao as
	cores dela continuam mandando em `.geduc-btn-primary` e `.geduc-btn-outline`
	— que e o certo, sao os mesmos valores. O que este arquivo acrescenta nao
	colide com nada de la.
*/
.geduc-btn-primary,
.geduc-btn-outline,
.geduc-btn-contrast,
.geduc-btn-ghost {
  display: inline-flex;
  gap: var(--space-2, 8px);
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-5, 20px);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-body, 14px);
  /*
  	700, e nao 600. O `Button` do modulo React usa `font-semibold`, mas o
  	prototipo — que e a peca do designer — usa `--font-weight-bold` em
  	`Button.module.css`. Onde os dois discordam, vale o prototipo.
  */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast, 0.12s) ease, border-color var(--transition-fast, 0.12s) ease, color var(--transition-fast, 0.12s) ease, transform var(--transition-fast, 0.12s) ease, box-shadow var(--transition-fast, 0.12s) ease;
  /*
  	O botao sobe 2px ao passar o ponteiro e volta ao ser pressionado. Nao e
  	enfeite solto: e o que da peso ao toque, e esta em `Button.module.css`.
  */
}
.geduc-btn-primary:hover:not(:disabled):not([aria-disabled=true]),
.geduc-btn-outline:hover:not(:disabled):not([aria-disabled=true]),
.geduc-btn-contrast:hover:not(:disabled):not([aria-disabled=true]),
.geduc-btn-ghost:hover:not(:disabled):not([aria-disabled=true]), .geduc-btn-primary:focus-visible,
.geduc-btn-outline:focus-visible,
.geduc-btn-contrast:focus-visible,
.geduc-btn-ghost:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
}
.geduc-btn-primary:active:not(:disabled):not([aria-disabled=true]),
.geduc-btn-outline:active:not(:disabled):not([aria-disabled=true]),
.geduc-btn-contrast:active:not(:disabled):not([aria-disabled=true]),
.geduc-btn-ghost:active:not(:disabled):not([aria-disabled=true]) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.geduc-btn-primary:hover,
.geduc-btn-outline:hover,
.geduc-btn-contrast:hover,
.geduc-btn-ghost:hover, .geduc-btn-primary:focus-visible,
.geduc-btn-outline:focus-visible,
.geduc-btn-contrast:focus-visible,
.geduc-btn-ghost:focus-visible {
  text-decoration: none;
}
.geduc-btn-primary:disabled,
.geduc-btn-outline:disabled,
.geduc-btn-contrast:disabled,
.geduc-btn-ghost:disabled, [aria-disabled=true].geduc-btn-primary,
[aria-disabled=true].geduc-btn-outline,
[aria-disabled=true].geduc-btn-contrast,
[aria-disabled=true].geduc-btn-ghost {
  cursor: not-allowed;
}

/* ---------- tamanhos ---------- */
.geduc-btn-sm {
  height: 32px;
  padding: 0 var(--space-3, 12px);
  font-size: var(--text-sm, 13px);
}

.geduc-btn-lg {
  height: 48px;
  padding: 0 var(--space-6, 24px);
  font-size: var(--text-h5, 16px);
}

/* ---------- variantes que a biblioteca nao desenha ---------- */
/*
	Dourado sobre navy. E a acao principal do hero e da faixa de chegada, onde o
	teal da marca nao teria contraste suficiente sobre o fundo escuro.
*/
.geduc-btn-contrast {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--color-brand-gold, #f4aa18);
  /*
  	`--color-neutral-900`, e nao o navy. O modulo React usa `text-navy-900`;
  	o prototipo usa `--color-neutral-900`. Sao dois quase-pretos, e vale o
  	prototipo.
  */
  color: var(--color-neutral-900, #171717);
}
.geduc-btn-contrast:hover, .geduc-btn-contrast:focus-visible {
  border-color: var(--color-contrast-dark, #b07a11);
  background: var(--color-contrast-dark, #b07a11);
  /*
    O texto continua escuro no hover, e nao vira branco.

    Medido: `#171717` sobre `#f4aa18` da 9,06:1 no estado normal, e
    `#ffffff` sobre `#b07a11` cai para **3,72:1** — reprova o AA de
    texto normal (4,5:1). Mantendo o escuro sobre o mesmo fundo da
    4,81:1, que passa, sem mexer na cor de fundo.

    O `:focus-visible` divide o seletor, entao a reprovacao atingia
    navegacao por teclado, e nao so o ponteiro.
  */
  color: var(--color-neutral-900, #171717);
}

.geduc-btn-ghost {
  border: 0;
  background: transparent;
  color: var(--color-primary, #007889);
}
.geduc-btn-ghost:hover, .geduc-btn-ghost:focus-visible {
  background: var(--color-primary-light, #e6f6f9);
  color: var(--color-primary-hover, #006677);
}

/*
	Botao de contorno sobre faixa escura — hero e "Planeje sua chegada".

	O contorno teal da biblioteca e feito para fundo claro; sobre navy ele fica
	quase invisivel. E o mesmo que o React faz nesses dois lugares, passando
	`border-white/30 text-white hover:bg-white/10` por cima da variante outline.

	Modificador em vez de regra por secao: sao dois lugares hoje e o proximo nao
	vai precisar descobrir que a excecao existia.
*/
/*
	Duas classes no seletor de proposito: `.geduc-btn-outline` da biblioteca
	carrega DEPOIS desta folha e define `color`. Com uma classe so o modificador
	perderia por ordem, e o texto do botao do hero saia teal sobre navy.
*/
.geduc-btn-outline.geduc-btn-inverse,
.geduc-btn-inverse {
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* Vidro de 4%, nao transparente — `.secondary` do `Button.module.css`. */
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white, #fff);
}
.geduc-btn-outline.geduc-btn-inverse:hover, .geduc-btn-outline.geduc-btn-inverse:focus-visible,
.geduc-btn-inverse:hover,
.geduc-btn-inverse:focus-visible {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white, #fff);
}

/*
	### BOTAO VIRA BLOCO EM TELA PEQUENA ###

	`Button.module.css` do prototipo: abaixo de 560px todo botao ocupa a largura
	toda, EXCETO os pequenos. A excecao e deliberada la — as pilhas de categoria
	do FAQ sao botoes `sm`, e viradas em bloco deixariam de funcionar como filtro.

	Escopado em `.geduc-main` para nao alcancar a barra de controle do portal nem
	os dialogos do Liferay, que vivem fora do conteudo do site.

	Alguns containers ja forcavam 100% antes daqui — os botoes do hero e o do
	cabecalho de faixa. Esta regra cobre o resto: o botao do banner de chamada, os
	do CTA do FAQ e o de "Planeje sua chegada".
*/
@media (max-width: 560px) {
  /*
  	Duas familias de classe convivem: a biblioteca marca os botoes dela com
  	`btn btn-lg` do Bootstrap (o do banner de chamada, as pilhas do FAQ), e os
  	nossos modelos e ADTs escrevem `geduc-btn-lg` sem `btn`. As duas listas
  	precisam estar aqui — so `.btn` alcancava um botao do site inteiro.
  */
  .geduc-main .btn:not(.btn-sm),
  .geduc-main .geduc-btn-lg:not(.geduc-btn-sm) {
    width: 100%;
    max-width: none;
  }
}
/*
	### MOVIMENTO ###

	O modulo React usa framer-motion. Aqui o mesmo desenho e feito pela Web
	Animations API: `js/movimento.js` executa, `js/entrada.js` prepara o estado
	inicial no topo do `<body>` e `js/anima.js` decide quando a entrada por
	rolagem toca.

	**Entrada deixou de ser keyframe CSS em 18/09/2026, e a razao esta medida.**
	O SPA do portal move o `#wrapper` para dentro de um `surface` depois da
	carga, e mover um elemento recria as animacoes CSS de toda a subarvore: a
	entrada do hero rodava duas vezes, aos 605 ms e aos 919 ms. `element.animate`
	atravessa o remanejamento sem corte. O detalhe da medicao esta no cabecalho
	de `js/movimento.js`.

	O que sobra neste arquivo: o escalonamento por `nth-child`, que o JavaScript
	le em `--i`, e os realces de ponteiro — esses nunca reiniciaram, porque so
	comecam depois de a pessoa tocar.

	Nada aqui esconde nada. Sem JavaScript, sem suporte a `animate` ou com
	movimento reduzido, o conteudo nasce visivel e assim fica.
*/
/* ---------- escalonamento dentro de um grupo ---------- */
/*
	Cada item entra um passo depois do anterior. A posicao vem do `nth-child`, e
	nao de um `style="--i:N"` no template, por dois motivos: as macros da
	biblioteca nao aceitam `style`, e a posicao ja e uma informacao do DOM —
	repeti-la na marcacao daria dois donos para o mesmo numero.

	`$ate` e onde o escalonamento para de crescer. No `ScheduleGrid` do prototipo
	isso e explicito (`Math.min(index, 4)`), e vale para qualquer lista longa:
	sem trava, o vigesimo item so entraria muito depois do primeiro.

	Quem le `--i` e `--stagger` e `movimento.js`, no estilo computado do proprio
	elemento — por isso as duas continuam sendo custom properties, e nao numeros
	no JavaScript.
*/
/*
	Os passos sao os do prototipo, um a um (`GEducPublicWidget.tsx`):
	0,07s nos cartoes institucionais, 0,08s nos passos da jornada, 0,06s nos
	palestrantes e 0,05s nos blocos da programacao.
*/
.geduc-institutional-grid {
  --stagger: 70ms;
}
.geduc-institutional-grid > .geduc-anima {
  --i: 3;
}
.geduc-institutional-grid > .geduc-anima:nth-child(1) {
  --i: 0;
}
.geduc-institutional-grid > .geduc-anima:nth-child(2) {
  --i: 1;
}
.geduc-institutional-grid > .geduc-anima:nth-child(3) {
  --i: 2;
}
.geduc-institutional-grid > .geduc-anima:nth-child(4) {
  --i: 3;
}

.geduc-home-journey-steps {
  --stagger: 80ms;
}
.geduc-home-journey-steps > .geduc-anima {
  --i: 3;
}
.geduc-home-journey-steps > .geduc-anima:nth-child(1) {
  --i: 0;
}
.geduc-home-journey-steps > .geduc-anima:nth-child(2) {
  --i: 1;
}
.geduc-home-journey-steps > .geduc-anima:nth-child(3) {
  --i: 2;
}
.geduc-home-journey-steps > .geduc-anima:nth-child(4) {
  --i: 3;
}

.geduc-speakers-grid {
  --stagger: 60ms;
}
.geduc-speakers-grid > .geduc-anima {
  --i: 9;
}
.geduc-speakers-grid > .geduc-anima:nth-child(1) {
  --i: 0;
}
.geduc-speakers-grid > .geduc-anima:nth-child(2) {
  --i: 1;
}
.geduc-speakers-grid > .geduc-anima:nth-child(3) {
  --i: 2;
}
.geduc-speakers-grid > .geduc-anima:nth-child(4) {
  --i: 3;
}
.geduc-speakers-grid > .geduc-anima:nth-child(5) {
  --i: 4;
}
.geduc-speakers-grid > .geduc-anima:nth-child(6) {
  --i: 5;
}
.geduc-speakers-grid > .geduc-anima:nth-child(7) {
  --i: 6;
}
.geduc-speakers-grid > .geduc-anima:nth-child(8) {
  --i: 7;
}
.geduc-speakers-grid > .geduc-anima:nth-child(9) {
  --i: 8;
}
.geduc-speakers-grid > .geduc-anima:nth-child(10) {
  --i: 9;
}

/* ---------- realces de ponteiro ---------- */
/*
	`HOVER_LIFT` e `TAP_PRESS` da escala do React, nos elementos que o prototipo
	anima ao toque. Card de atividade e de palestrante ja tem realce proprio na
	biblioteca; aqui ficam os que nao tem.
*/
.geduc-day-tabs-tab,
.geduc-faq-category,
.geduc-institutional-card {
  transition: transform var(--dur-quick, 0.22s) var(--ease-out-expo, ease-out), border-color var(--dur-quick, 0.22s) ease, box-shadow var(--dur-quick, 0.22s) ease, background-color var(--dur-quick, 0.22s) ease, color var(--dur-quick, 0.22s) ease;
}
.geduc-day-tabs-tab:active,
.geduc-faq-category:active,
.geduc-institutional-card:active {
  transform: scale(0.96);
}

/* ---------- movimento reduzido ---------- */
/*
	Quem pede menos movimento recebe a pagina pronta. As entradas nem chegam a
	ser criadas — `movimento.js` consulta a mesma preferencia —, entao aqui so
	restam os realces de ponteiro.
*/
@media (prefers-reduced-motion: reduce) {
  .geduc-day-tabs-tab,
  .geduc-faq-category,
  .geduc-institutional-card {
    transition: none;
  }
  .geduc-day-tabs-tab:active,
  .geduc-faq-category:active,
  .geduc-institutional-card:active {
    transform: none;
  }
}
/*
	### TIPOGRAFIA BASE ###

	Isto vive no `body`, e nao no `.geduc-wrapper`, por um motivo medido: o
	Bootstrap do Liferay declara `body { font-size: 16px }` e a familia do
	sistema. Com a regra so no wrapper, a familia era herdada mas o TAMANHO nao —
	o corpo do site inteiro renderizava a 16px, e o Design System pede 14px.

	Tambem alcanca o que nasce fora do wrapper: dialogo, tooltip e o que o
	Liferay injeta direto no `body`.
*/
body {
  background: var(--surface-bg, #fff);
  color: var(--surface-text, #171717);
  font-family: "Montserrat", "Montserrat fallback", "Atyp Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--text-body, 14px);
  line-height: 1.6;
}

/*
	### RITMO TIPOGRAFICO ###

	O prototipo declara isto no `tokens.css`, para o site inteiro, e e o que
	decide onde os titulos quebram: com `balance` o navegador reparte as linhas
	de forma equilibrada em vez de encher a primeira. Sem a regra, o titulo da
	previa quebrava depois de "uma" onde o desenho quebra depois de "viver" —
	mesma fonte, mesmo tamanho, mesma largura de 680px.

	`:where()` de proposito: especificidade zero, entao qualquer regra de
	componente continua vencendo sem precisar de `!important`.
*/
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  widows: 2;
  orphans: 2;
}

:where(p, li, dd, blockquote) {
  text-wrap: pretty;
  widows: 2;
  orphans: 2;
}

.geduc-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

/*
  ### FAIXA DE CONTEUDO DAS PAGINAS INTERNAS ###

  No React as telas internas nao empilham blocos sobre branco: o `InnerPage`
  poe todo o conteudo dentro de uma faixa `bg-surface-alt` com 64px de recuo
  vertical e `min-h-screen`, para os cartoes brancos se destacarem sobre o
  cinza (`components/InnerPage.tsx`).

  Aqui o conteudo sao widgets irmaos dentro de `<main>`, e nao havia faixa
  nenhuma: fundo branco e vao ZERO entre o cabecalho e o primeiro widget, nas
  cinco telas.

  A condicao e `:has(.geduc-page-header)`, e nao o nome da pagina: o que decide
  e a presenca do cabecalho de pagina, que e exatamente a condicao do
  `InnerPage`. Pagina nova com cabecalho ganha a faixa sem ninguem lembrar de
  cadastrar a URL numa lista. Onde `:has()` nao existir o fundo sai branco, que
  e o estado de hoje.

  O cabecalho nao precisa de excecao: a biblioteca ja lhe da fundo proprio.
*/
body:has(.geduc-page-header) .geduc-main {
  min-height: 100vh;
  /*
    64px em cima (margem do involucro do cabecalho) e 80px embaixo — o
    `padding: var(--space-10) 0 var(--space-12)` do `innerPageSection`. Estava
    64/64: o rodape subia 16px em relacao ao prototipo.
  */
  padding-bottom: var(--space-12, 80px);
  background: var(--surface-alt, #f5f5f5);
  /*
    Os 64px de cima ficam no involucro do cabecalho, e nao no primeiro widget:
    e margem, entao pinta de cinza e nao depende de qual widget vem em seguida.
  */
  /*
    Em tela estreita o prototipo aperta a faixa: `innerPageSection` sai de
    `64px 0 80px` para `40px 0 64px` em 768. Os dois valores estao aqui — o de
    cima e margem do involucro do cabecalho, o de baixo e recuo do `<main>`.
  */
}
body:has(.geduc-page-header) .geduc-main .portlet-boundary:has(.geduc-page-header) {
  margin-bottom: var(--space-10, 64px);
  /*
    No Regulamento o corpo sai do MESMO widget do cabecalho, e a margem acima
    cai depois dos dois — o texto encostava na faixa escura. Quando os dois
    dividem o involucro, o respiro tem de ser do proprio bloco de texto.
  */
}
body:has(.geduc-page-header) .geduc-main .portlet-boundary:has(.geduc-page-header) .geduc-bloco-texto {
  margin-top: var(--space-10, 64px);
}
@media (max-width: 768px) {
  body:has(.geduc-page-header) .geduc-main {
    padding-bottom: var(--space-10, 64px);
  }
  body:has(.geduc-page-header) .geduc-main .portlet-boundary:has(.geduc-page-header) {
    margin-bottom: var(--space-8, 40px);
  }
  body:has(.geduc-page-header) .geduc-main .portlet-boundary:has(.geduc-page-header) .geduc-bloco-texto {
    margin-top: var(--space-8, 40px);
  }
}

/*
  ### AS TRES FAIXAS DE "SOBRE O CONGRESSO" ###

  Sobre e a unica interna que nao e uma faixa cinza so. No prototipo ela alterna
  — texto de abertura em BRANCO, os tres cartoes em cinza, "Quem pode
  participar" em branco de novo (`aboutIntroSection`, `aboutFactsSection`,
  `aboutSection`). As outras quatro internas continuam cinza de ponta a ponta,
  que e o `innerPageSection` do prototipo.

  Cada faixa e um involucro de widget, e o espaco vertical passa a ser recuo
  dele, e nao margem do bloco de dentro: margem escaparia por colapso e a troca
  de cor sairia no lugar errado — foi o que aconteceu na previa da Home.
*/
body.geduc-pagina-sobre .geduc-main {
  padding-bottom: 0;
  background: var(--surface-bg, #fff);
}
body.geduc-pagina-sobre .geduc-main .portlet-boundary:has(.geduc-page-header) {
  margin-bottom: 0;
}
body.geduc-pagina-sobre .geduc-main .portlet-boundary:has(.geduc-bloco-texto),
body.geduc-pagina-sobre .geduc-main .portlet-boundary:has(.geduc-fatos) {
  padding-block: var(--space-10, 64px);
}
body.geduc-pagina-sobre .geduc-main .portlet-boundary:has(.geduc-fatos) {
  background: var(--surface-alt, #f5f5f5);
}
body.geduc-pagina-sobre .geduc-main .portlet-boundary:has(.geduc-bloco-texto):last-child {
  padding-block: var(--space-12, 80px);
}
body.geduc-pagina-sobre .geduc-main .geduc-bloco-texto,
body.geduc-pagina-sobre .geduc-main .geduc-fatos {
  margin-bottom: 0;
}

.geduc-no-scroll {
  overflow: hidden;
}

/*
	### A BARRA DE CONTROLE DO LIFERAY ###

	Logado como administrador, o portal insere a propria barra no topo:
	`position: sticky`, 56px de altura e `z-index: 989`. A pilha do cabecalho e
	`fixed` em `top: 0` com `z-index: 40`, entao ela nascia POR BAIXO — os links
	que caiam nessa faixa nao recebiam clique e o menu ficava inacessivel.

	Subir o `z-index` da pilha seria a correcao errada: cobriria a barra do
	portal e quebraria a edicao. O certo e ceder o espaco, que e o que o Liferay
	espera de um tema.

	`has-control-menu` so existe quando a barra existe. Visitante anonimo nao
	tem barra, nao tem a classe, e o cabecalho continua colado no topo — que e o
	desenho do prototipo.

	O valor esta cravado porque o Liferay nao expoe a altura como custom
	property neste bundle: `--control-menu-container-height` nao existe no
	`:root` (conferido no navegador).
*/
body.has-control-menu .geduc-header,
body.has-control-menu .geduc-menu {
  top: 56px;
}

.geduc-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  /*
    `max()` com a area segura: em aparelho com recorte (o entalhe do iPhone) a
    pilha subia por baixo da barra de status. E o que `Header.module.css` faz —
    `padding: max(12px, env(safe-area-inset-top)) var(--container-gutter-mobile)`.
    Onde nao ha recorte, `env()` vale 0 e o valor cai nos 12px de sempre.
  */
  padding: max(12px, env(safe-area-inset-top)) 16px;
  pointer-events: none;
  /*
    O grupo do icone com o menu da conta pendurado nele.

    `position: relative` e o que ancora o painel; `inline-flex` mantem o grupo
    com a largura do proprio icone, para ele nao esticar na linha de acoes.
  */
  /*
    Painel da conta, com a geometria do prototipo
    (`Header.module.css:214-235`): 10px abaixo do gatilho, alinhado a direita,
    vidro escuro, sem seta.
  */
  /*
    Visitante autenticado: o prototipo troca o nome por um circulo com o icone
    de usuario, do mesmo tamanho da marca. E o que mantem a pilha na altura
    certa — um nome longo alargava a coluna da direita e empurrava a navegacao
    para fora do centro.
  */
}
@media (min-width: 1025px) {
  .geduc-header {
    padding: 20px 24px;
  }
}
.geduc-header__skip {
  position: absolute;
  left: -9999px;
}
.geduc-header__skip:focus {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 60;
  padding: 8px 16px;
  border-radius: 8px;
  background: #fff;
  color: #001548;
  font-weight: 600;
  pointer-events: auto;
}
.geduc-header__pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  width: 100%;
  max-width: 1152px;
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(26, 32, 53, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  pointer-events: auto;
  transition: max-width 0.35s ease, padding 0.35s ease;
}
@media (min-width: 1025px) {
  .geduc-header__pill {
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    padding: 10px 10px 10px 20px;
  }
}
.geduc-header__pill--compact {
  max-width: 960px;
}
.geduc-header__brand {
  display: flex;
  align-items: center;
  justify-self: start;
  flex-shrink: 0;
}
.geduc-header__brand img {
  display: block;
  width: min(112px, 42vw);
  height: auto;
}
@media (min-width: 1025px) {
  .geduc-header__brand img {
    width: 124px;
  }
}
.geduc-header__nav {
  display: none;
}
@media (min-width: 1025px) {
  .geduc-header__nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 4px;
  }
}
.geduc-header__link {
  padding: 6px 12px;
  border-radius: 999px;
  color: rgba(200, 216, 232, 0.6);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.geduc-header__link:hover, .geduc-header__link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #e8f0f8;
  text-decoration: none;
}
.geduc-header__link.is-current {
  background: rgba(255, 255, 255, 0.1);
  color: #e8f0f8;
  font-weight: 600;
}
.geduc-header__actions {
  display: none;
}
@media (min-width: 1025px) {
  .geduc-header__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
  }
}
.geduc-header__conta {
  position: relative;
  display: inline-flex;
}
.geduc-header__conta-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(26, 32, 53, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  /*
    Entra com uma subida de 6px, como o `accountMenuVariants` do prototipo.
    A animacao roda na revelacao porque `[hidden]` sai junto do `display`, e
    o navegador so anima o que ja esta na arvore de layout.
  */
  animation: geduc-conta-entra 0.18s ease-out;
}
.geduc-header__conta-menu[hidden] {
  display: none;
}
.geduc-header__conta-item {
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(200, 216, 232, 0.6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.geduc-header__conta-item:hover, .geduc-header__conta-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #e8f0f8;
  text-decoration: none;
}
.geduc-header__user {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #e8f0f8;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.geduc-header__user:hover, .geduc-header__user:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.16);
  color: #e8f0f8;
  text-decoration: none;
}
.geduc-header__ghost {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(200, 216, 232, 0.6);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.geduc-header__ghost:hover, .geduc-header__ghost:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #e8f0f8;
  text-decoration: none;
}
.geduc-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: #f4aa18;
  color: var(--color-neutral-900, #171717);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.geduc-header__cta:hover, .geduc-header__cta:focus-visible {
  background: var(--color-gold-dark, #b07a11);
  color: var(--color-white, #fff);
  text-decoration: none;
}
.geduc-header__burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  justify-self: end;
}
.geduc-header__burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #e8f0f8;
}
.geduc-header__burger:hover, .geduc-header__burger:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 1025px) {
  .geduc-header__burger {
    display: none;
  }
}

.geduc-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /*
    Idem no menu de tela cheia: em cima respeita o recorte, embaixo respeita a
    barra de gestos. Sem isto o botao de fechar ficava sob o entalhe e o ultimo
    link sob a barra inferior.
  */
  padding: max(48px, env(safe-area-inset-top) + 32px) 16px max(40px, env(safe-area-inset-bottom));
  background: #00113a;
  color: #e8f0f8;
  overflow-y: auto;
}
.geduc-menu[hidden] {
  display: none;
}
.geduc-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.geduc-menu__logo {
  width: 124px;
  height: auto;
}
.geduc-menu__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #e8f0f8;
  font-size: 28px;
  line-height: 1;
}
.geduc-menu__nav {
  display: flex;
  flex-direction: column;
}
.geduc-menu__link {
  /*
    16px de corpo e 8px de recuo lateral — o `overlayLink` do prototipo. Estava
    20px na fonte de display, o que deixava cada linha 13px mais alta e o menu
    inteiro com uma cara diferente da dele.
  */
  padding: 16px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8f0f8;
  font-size: 16px;
  font-weight: 600;
  /* 1,2 — a entrelinha do `--text-h5`. Herdando o 1,6 do corpo, cada linha
     do menu saia 7px mais alta que a do prototipo. */
  line-height: 1.2;
  text-decoration: none;
}
.geduc-menu__link.is-current {
  color: #f4aa18;
}
.geduc-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.geduc-menu__ghost, .geduc-menu__cta {
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.geduc-menu__ghost {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8f0f8;
}
.geduc-menu__cta {
  background: #f4aa18;
  color: #001548;
  font-weight: 700;
}

/* ---------- movimento ---------- */
@keyframes geduc-conta-entra {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/*
  O painel de tela cheia entra deslizando da direita, e os links entram atras
  dele em cascata — e o `overlayVariants`/`overlayItemVariants` do prototipo
  (`Header.tsx:92-105`), escrito em CSS porque o tema nao carrega framer-motion.

  A cascata e por `nth-child` e nao por `delay` calculado em JavaScript: sao seis
  itens no maximo, e um seletor resolve sem script.
*/
@keyframes geduc-menu-entra {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes geduc-menu-item-entra {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.geduc-menu:not([hidden]) {
  animation: geduc-menu-entra 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.geduc-menu:not([hidden]) .geduc-menu__link,
.geduc-menu:not([hidden]) .geduc-menu__actions {
  animation: geduc-menu-item-entra 0.28s ease-out both;
}
.geduc-menu:not([hidden]) .geduc-menu__link:nth-child(1) {
  animation-delay: 0.1s;
}
.geduc-menu:not([hidden]) .geduc-menu__link:nth-child(2) {
  animation-delay: 0.18s;
}
.geduc-menu:not([hidden]) .geduc-menu__link:nth-child(3) {
  animation-delay: 0.26s;
}
.geduc-menu:not([hidden]) .geduc-menu__link:nth-child(4) {
  animation-delay: 0.34s;
}
.geduc-menu:not([hidden]) .geduc-menu__link:nth-child(5) {
  animation-delay: 0.42s;
}
.geduc-menu:not([hidden]) .geduc-menu__link:nth-child(6) {
  animation-delay: 0.5s;
}
.geduc-menu:not([hidden]) .geduc-menu__actions {
  animation-delay: 0.42s;
}

/*
  Quem pediu menos movimento recebe as mesmas telas, sem o deslocamento. Nao e
  `animation: none` no grupo inteiro: sem a animacao o item ficaria no estado
  inicial do `both`, invisivel. Zerar a duracao entrega o estado final de
  imediato.
*/
@media (prefers-reduced-motion: reduce) {
  .geduc-header__conta-menu,
  .geduc-menu:not([hidden]),
  .geduc-menu:not([hidden]) .geduc-menu__link,
  .geduc-menu:not([hidden]) .geduc-menu__actions {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}
.geduc-footer {
  background: #001548;
  color: rgba(200, 216, 232, 0.6);
  padding: 32px 0 24px;
}
.geduc-footer__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 auto;
  max-width: 1152px;
  padding: 0 16px;
}
.geduc-footer__brand {
  align-items: center;
  display: flex;
}
.geduc-footer__logo {
  display: block;
  height: auto;
  width: min(249px, 60vw);
}
.geduc-footer__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-left: auto;
}
.geduc-footer__link {
  color: rgba(200, 216, 232, 0.6);
  font-size: 13px;
  line-height: normal;
  text-decoration: none;
}
.geduc-footer__link:hover, .geduc-footer__link:focus-visible {
  color: #e8f0f8;
}
.geduc-footer__copy {
  line-height: normal;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  margin: 16px 0 0;
  padding-top: 16px;
  width: 100%;
}

@media (max-width: 768px) {
  .geduc-footer {
    padding-block: 32px;
  }
  .geduc-footer__inner {
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    width: min(100% - 32px, 1152px);
  }
  .geduc-footer__brand {
    justify-content: center;
  }
  .geduc-footer__logo {
    width: min(210px, 72vw);
  }
  .geduc-footer__links {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
    padding-block: 12px;
    width: 100%;
  }
  .geduc-footer__link {
    line-height: 1.4;
    padding: 12px;
    text-align: center;
  }
  .geduc-footer__copy {
    border-top: 0;
    line-height: 1.6;
    margin-top: 0;
    padding-top: 0;
    text-align: center;
  }
}
@media (max-width: 420px) {
  .geduc-footer__links {
    grid-template-columns: 1fr;
  }
}
:root[data-a11y-contrast] .geduc-footer {
  background: #000000;
  border-top: 1px solid #ffffff;
  color: #ffffff;
}
:root[data-a11y-contrast] .geduc-footer .geduc-footer__link {
  color: #ffffff;
}
:root[data-a11y-contrast] .geduc-footer .geduc-footer__link:focus-visible {
  outline-color: #ffffff;
}
:root[data-a11y-contrast] .geduc-footer .geduc-footer__copy {
  border-top-color: #ffffff;
}

/*
### BORDAS DO PORTLET ###

O Liferay envolve todo widget numa moldura: gutter negativo na linha, 15 px de
cada lado na coluna, 16 px de padding no conteudo e uma barra de titulo. Numa
pagina de widgets isso faz sentido; aqui nao.

O conteudo da sub-CE e desenhado para ocupar a largura inteira — o hero, o banner
de chamada e a faixa "Planeje sua chegada" sao bandas de cor de borda a borda. Com
a moldura padrao o widget nascia em x=17 com 34 px a menos de largura, e cada
banda ficava com uma tira branca dos dois lados.

Mesmo tratamento do `sesc-portal-juridico-workspace`, com uma diferenca: la o
`.portlet-content` mantem `12px 48px` por padrao e so o borderless zera. Aqui zera
sempre, porque o recuo horizontal e responsabilidade de cada tela (`max-w-container`
e os paddings do preset Tailwind) e aplicar os dois soma recuo duas vezes.
*/
.portlet-layout {
  margin: 0 !important;
}

.portlet-column {
  padding: 0 !important;
}

/* A coluna unica do layout 1-column tambem carrega o gutter do Bootstrap. */
.portlet-layout > [class*=col-] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*
	Barra de titulo do widget.

	O `<h2>` ja nao existe: foi removido em `templates/portlet.ftl`, porque
	escondido por CSS ele continuava no HTML e o buscador o lia. Sobra a coluna
	de acoes, que alguns widgets usam para injetar controle proprio. Numa pagina
	publica ela nao tem o que mostrar, e a linha vazia abriria um vao entre as
	secoes.
*/
.portlet-header {
  display: none !important;
}

.portlet-content {
  padding: 0 !important;
  /*
  	A borda vem do decorador `decorate`. O tema ja declara `borderless` como
  	padrao, mas isso so vale para widget colocado depois: o decorador fica
  	gravado nas configuracoes da instancia, e quem ja estava na pagina continua
  	com `decorate`. Zerar aqui cobre os dois casos.
  */
  border: 0 !important;
}

.portlet,
.portlet-boundary {
  margin-bottom: 0;
}

/*
	Em modo de edicao o Liferay mostra o menu de acoes do widget. Sem o
	`z-index` ele fica atras da pilha do cabecalho, que e fixa, e nao da para
	clicar.
*/
.portlet-topper {
  z-index: 1000;
}

/*
### TELA DE ENTRADA ###

Veste o portlet nativo de login do Liferay. O markup do formulario e dele; aqui
so entram cores, espacamento e tipografia — nenhuma regra remove ou reposiciona
elemento do portlet.

Isso e deliberado, e e a diferenca em relacao ao `sesc-portal-juridico-workspace`:
la o tema apaga as mensagens de validacao do Liferay com `MutationObserver` para
poder mostrar as proprias. Some com o erro que o portal produziu e quem usa
leitor de tela deixa de ouvir a causa da recusa. Aqui nada e apagado.

O que precisou ser ACRESCENTADO e a recusa de credencial: o portlet embutido por
`runtime` nao entrega a mensagem dele, e sem ela quem erra a senha nao ve nada.
`js/login.js` escreve o aviso; o estilo dele e o `&__erro` abaixo.

As medidas sao as do `AuthLayout.module.css` do prototipo, e nao aproximacoes:
a mesma tela existe em React (`@repo/modules/geduc/ui/AuthLayout`) para cadastro
e recuperacao de senha, e as duas precisam ser indistinguiveis — quem entra e
quem se cadastra atravessa as duas no mesmo minuto.
*/
.geduc-login {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  /* `svh` para o teclado do celular nao empurrar a coluna do formulario. */
  min-height: 100vh;
  min-height: 100svh;
  font-family: "Montserrat", "Montserrat fallback", "Atyp Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* ---------- faixa de marca ---------- */
  /*
    Dois blocos, nao tres. O `space-between` distribui o que existe: com uma
    terceira linha no rodape a marca subia e o titulo ia para o meio da faixa,
    onde o prototipo o mantem colado embaixo.
  */
  /*
    A lateral empilhada fica atras do formulario, e o texto precisa de mais
    contraste ali do que na coluna, onde ele e legenda. Os dois valores sao do
    prototipo.
  */
  /* ---------- coluna do formulario ---------- */
  /*
    Sem caixa. No prototipo o cartao e so `width: 100%; max-width: 480px` — nao
    tem borda, fundo, sombra nem recuo. Um cartao branco sobre fundo branco
    desenha uma moldura que o desenho nao tem, e o recuo tirava 50px de largura
    util do formulario.
  */
  /*
    Recusa de credencial. Vermelho do sistema sobre branco passa em AA; o que
    falta num texto solto e peso e delimitacao — dai o fundo e a barra.
  */
  /*
    Dois rodapes seguidos — "Criar cadastro" e "Reenviar confirmação" — sao um
    par de saidas, e nao dois blocos. O respiro entre eles e menor que o que os
    separa do card.
  */
  /* ---------- portlet nativo ---------- */
}
@media (min-width: 901px) {
  .geduc-login {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
}
.geduc-login__aside {
  display: flex;
  min-height: 164px;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  /*
    Cor solida por baixo do grafismo oficial: a arte tem transparencia nas
    bordas, e sem o navy atras ela vaza para o branco da pagina.
  */
  background-color: #001548;
  background-image: url("../images/auth-layout-background.jpg");
  background-position: center 42%;
  background-size: cover;
  color: #fff;
  overflow: hidden;
}
@media (min-width: 520px) {
  .geduc-login__aside {
    min-height: 178px;
    padding: 20px 24px;
  }
}
@media (min-width: 901px) {
  .geduc-login__aside {
    min-height: 0;
    padding: 36px 40px;
    background-position: center;
  }
}
.geduc-login__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
@media (min-width: 901px) {
  .geduc-login__brand {
    gap: 10px;
  }
}
.geduc-login__logo {
  display: block;
  width: auto;
  height: 27px;
  flex-shrink: 0;
  object-fit: contain;
}
@media (min-width: 901px) {
  .geduc-login__logo {
    height: 32px;
  }
}
.geduc-login__brand-name {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (min-width: 901px) {
  .geduc-login__brand-name {
    font-size: 18px;
  }
}
.geduc-login__aside-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 901px) {
  .geduc-login__aside-bottom {
    gap: 24px;
  }
}
.geduc-login__heading {
  margin: 0;
  font-family: "Atyp Display", "Montserrat", "Montserrat fallback", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}
@media (min-width: 901px) {
  .geduc-login__heading {
    font-size: 28px;
  }
}
.geduc-login__lead {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.45;
}
@media (min-width: 901px) {
  .geduc-login__lead {
    max-width: none;
    /*
      0,6, e nao 0,4 — mesmo motivo do token `auth.lead-quiet` do preset.
      Compositado sobre o navy, 0,4 da 3,69:1 e reprova o AA de texto de 12px
      (minimo 4,5:1); 0,6 da 6,77:1. E o texto daqui carrega instrucao, nao
      decoracao.

      O axe nao pega: a faixa tem `background-image` por cima do navy, e sobre
      imagem ele devolve `incomplete`, nao `violation`.
    */
    color: rgba(255, 255, 255, 0.6);
    line-height: normal;
  }
}
.geduc-login__main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: #fff;
  /* Rola por conta propria; a calha reservada evita o formulario mudar de
     largura quando a barra aparece. */
  overflow-y: auto;
  scrollbar-gutter: stable;
}
@media (min-width: 520px) {
  .geduc-login__main {
    padding: 32px 24px;
  }
}
@media (min-width: 901px) {
  .geduc-login__main {
    align-items: center;
    padding: 48px;
  }
}
.geduc-login__inner {
  width: 100%;
  max-width: 480px;
}
.geduc-login__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #001548;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}
@media (min-width: 520px) {
  .geduc-login__back {
    margin-bottom: 24px;
  }
}
.geduc-login__back:hover, .geduc-login__back:focus-visible {
  text-decoration: underline;
}
.geduc-login__back svg {
  flex-shrink: 0;
}
.geduc-login__card {
  width: 100%;
  max-width: 480px;
}
.geduc-login__title {
  margin: 0 0 4px;
  color: #171717;
  font-family: "Atyp Display", "Montserrat", "Montserrat fallback", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
}
.geduc-login__erro {
  /*
    As medidas sao as do `Notice` do prototipo, que e o mesmo aviso do lado
    React: 13px em peso normal, recuo de 12/16, raio de 8 e respiro de 16
    embaixo. Sem filete lateral — a barra vermelha grossa que estava aqui
    puxava mais atencao que a propria frase, e o fundo claro com o texto na
    cor forte ja separa a mensagem com contraste de sobra.
  */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
}
.geduc-login__erro svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.geduc-login__helper {
  margin: 0 0 16px;
  text-align: right;
}
.geduc-login__helper a {
  color: #6b6b6b;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
}
.geduc-login__helper a:hover, .geduc-login__helper a:focus-visible {
  color: #171717;
}
.geduc-login__footer {
  margin: 20px 0 0;
  color: #6b6b6b;
  font-size: 13px;
  text-align: center;
}
.geduc-login__footer a {
  color: #171717;
  font-weight: 700;
  text-decoration: none;
}
.geduc-login__footer a:hover, .geduc-login__footer a:focus-visible {
  text-decoration: underline;
}
.geduc-login__footer + .geduc-login__footer {
  margin-top: 8px;
}
.geduc-login__portlet {
  /* `.fields` do prototipo: 10px entre campos, 6px antes do que vem depois. */
  /*
    `margin-bottom: 0` e `line-height: normal` desfazem o Clay, que empurra
    todo `label` 8px para baixo e estica a linha. Sem isso o rotulo fica mais
    longe do campo do que no prototipo, em cada um dos campos.
  */
  /*
    Asterisco de campo obrigatorio, que o portlet nao desenha.

    Por `::after` e nao por texto: o `required` do input ja anuncia a
    obrigatoriedade para o leitor de tela, e um asterisco lido em voz alta so
    atrapalharia. Aqui ele e sinal visual, e conteudo de pseudo-elemento nao
    entra na arvore de acessibilidade.
  */
  /* Alternar a visibilidade da senha — o botao vem de `js/login.js`. */
  /*
    44x44 de area clicavel, com o icone continuando com o tamanho do
    prototipo. Eram 32x32, abaixo do minimo — e este e um botao que se usa com
    o polegar, no meio de digitar senha.
  */
  /* Espaco para o botao nao cobrir o que foi digitado. */
  /*
    44px, e o comentario anterior estava errado no ponto que o justificava.
    Ele dizia que "o mesmo desvio esta escopado no `AuthCard` do modulo
    React" — e o controle do React tem `tw-h-11`, ou seja, 44. O desvio era
    so daqui, sustentado por um paralelo que nao existe.

    O alvo minimo de toque e "Sempre fazer" do `CLAUDE.md`, e a tela de
    entrada e a que mais recebe toque em celular. 4px de diferenca visual nao
    pagam a divergencia entre as duas metades do mesmo formulario.
  */
  /*
    Mensagem de erro do portal: fica, com contraste suficiente. O vermelho do
    Liferay sobre branco passa em AA; o que faltava era peso e espaco.
  */
  /* O portlet oferece "criar conta" e "esqueci a senha" proprios; os nossos
     apontam para as telas da Client Extension, entao os dele saem. */
}
.geduc-login__portlet .portlet-title-text,
.geduc-login__portlet .portlet-topper,
.geduc-login__portlet .portlet-header {
  display: none;
}
.geduc-login__portlet .portlet-content,
.geduc-login__portlet .panel-body {
  padding: 0;
  border: 0;
}
.geduc-login__portlet .form-group {
  margin-bottom: 10px;
}
.geduc-login__portlet label {
  margin-bottom: 0;
  color: #171717;
  font-family: "Montserrat", "Montserrat fallback", "Atyp Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
}
.geduc-login__portlet label[for$=_login]::after,
.geduc-login__portlet label[for$=_password]::after {
  content: " *";
  color: #dc2626;
}
.geduc-login__portlet .geduc-login__senha {
  position: relative;
}
.geduc-login__portlet .geduc-login__olho {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #6b6b6b;
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
}
.geduc-login__portlet .geduc-login__olho:hover, .geduc-login__portlet .geduc-login__olho:focus-visible {
  color: #171717;
}
.geduc-login__portlet input[id$=_password] {
  padding-right: 44px;
}
.geduc-login__portlet .form-control {
  height: 44px;
  padding: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  color: #171717;
  font-size: 14px;
}
.geduc-login__portlet .form-control::placeholder {
  /*
    0,55 e nao 0,25. O cinza do Clay tem contraste de texto e competia com
    o valor digitado — mas 0,25 da **1,84:1** sobre branco e reprova o AA,
    e "exemplo nao carrega informacao" nao vale aqui: o formato esperado
    do campo so aparece no placeholder. 0,55 da 4,74:1 e continua mais
    claro que o valor digitado. Mesmo motivo do token do preset.
  */
  color: rgba(0, 0, 0, 0.55);
  opacity: 1;
}
.geduc-login__portlet .form-control:focus {
  border-color: #007889;
  box-shadow: 0 0 0 2px rgba(0, 120, 137, 0.25);
}
.geduc-login__portlet .btn-primary {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: #007889;
  font-size: 16px;
  font-weight: 700;
  /* Enviando: continua legivel, so deixa de convidar ao clique. */
}
.geduc-login__portlet .btn-primary:hover, .geduc-login__portlet .btn-primary:focus-visible {
  background: #006677;
}
.geduc-login__portlet .btn-primary.is-busy, .geduc-login__portlet .btn-primary:disabled {
  cursor: progress;
  opacity: 0.75;
}
.geduc-login__portlet .alert-danger,
.geduc-login__portlet .has-error .form-feedback-item {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}
.geduc-login__portlet .sign-in-links,
.geduc-login__portlet .navigation,
.geduc-login__portlet .taglib-icon-help {
  display: none;
}

/*
  Na pagina de login o cabecalho e o rodape do tema saem: a tela ja tem a
  propria moldura, e a barra com "Entrar" dentro da tela de entrar e ruido.

  A classe e a que o `portal_normal.ftl` deriva da URL amigavel — `/login` vira
  `geduc-pagina-login`. Estava `geduc-login-page`, que o tema nunca emite: o
  cabecalho e o rodape continuavam na tela e ninguem tinha visto, porque a
  pagina nunca chegou a ser montada no portal.
*/
/*
  `geduc-conta` e o mesmo acordo para as telas de conta que sao rotas em hash
  dentro da pagina do congresso — cadastro, recuperacao, redefinicao,
  confirmacao. Ali a URL da pagina do portal nao muda, entao nao ha classe
  derivada dela para usar: quem poe a classe no `body` e o `AuthLayout` do
  modulo React, enquanto estiver montado.
*/
/*
	O portlet de login so aparece dentro da moldura do conteudo web. Servido fora
	dela — maximizado sobre outra pagina, que e onde a acao do portlet devolve —
	ele sai sem estilo nenhum. `entrada-limpa.js` tira a pessoa dali antes de
	pintar; isto cobre o caso de o JavaScript estar desligado.
*/
#portlet_com_liferay_login_web_portlet_LoginPortlet {
  display: none;
}

.geduc-login #portlet_com_liferay_login_web_portlet_LoginPortlet {
  display: block;
}

/*
	As OUTRAS telas do portlet — recuperar senha, criar conta — chegam
	maximizadas, sem a moldura do conteudo web, e a regra acima as escondia
	inteiras: quem clicava em "Esqueci minha senha" caia numa tela em BRANCO,
	com o formulario no DOM e `display: none` no `<section>` do portlet.

	`geduc-conta` e posta pelo `portal_normal.ftl` nas telas que o PORTAL serve
	— ou seja, quando o portlet E o conteudo da pagina. Ali ele precisa
	aparecer, e desde 22/09/2026 a recuperacao tambem ganha a moldura de
	`conta_portal.ftl`, como a troca de senha.
*/
body.geduc-conta #portlet_com_liferay_login_web_portlet_LoginPortlet {
  display: block;
}

body.geduc-pagina-login .geduc-header,
body.geduc-pagina-login .geduc-footer,
body.geduc-conta .geduc-header,
body.geduc-conta .geduc-footer {
  display: none;
}
body.geduc-pagina-login .geduc-main,
body.geduc-conta .geduc-main {
  padding: 0;
}

/*
### TELAS DE CONTA QUE O PORTAL SERVE ###

A troca obrigatoria de senha e o aceite dos termos. O markup do miolo e do
nucleo do Liferay (`html/portal/update_password.jsp` e o `terms_of_use.jsp` do
modulo de paginas utilitarias); o que `conta_portal.ftl` acrescenta e a moldura
em volta. Aqui so entram cores, espacamento e tipografia — nenhuma regra
esconde mensagem de validacao do portal, pelo mesmo motivo do `_login.scss`.

### O vizinho que nao e nosso

O portal do GEDUC e uma instancia virtual do `atosnormativos-teste`, e o
`normative-acts-theme-contributor` de la sobe como bundle OSGi com o header
`Liferay-Theme-Contributor-Type`. Esse mecanismo NAO tem escopo: o Liferay
injeta o CSS e o JS dele em todas as paginas de todas as instancias virtuais do
portal. Chega aqui, entao, codigo que nao e deste projeto e que ninguem daqui
edita.

O que segue foi **medido no CSS servido em `sescdf-geduc-teste`**, e nao lido do
jar que esta no workspace do atos normativos — aquele tem 2 KB e uma regra de
senha; o que esta no ar tem 11 KB e veste a tela inteira. Ler o arquivo errado
foi o que fez a primeira versao destas regras sair sem `!important` e perder
calada:

- `document.querySelector('.sheet-header').remove()`, sem condicao, meio segundo
  depois do carregamento — por isso o titulo da tela e emitido pelo tema e o
  `.sheet-header` ja nasce escondido: o script remove algo que estava invisivel,
  e nao ha o pisca de um titulo que aparece e some;
- o script DISPARA nesta tela: ele exige `pathname === '/c'` e um
  `<legend class="sr-only">` escrito "Nova Senha", e depois do login o portal
  serve a tela exatamente em `/c`, com esse legend. Ele acrescenta
  `new-password-sheet` ao `.sheet`, `new-password-panel` ao `.panel-body` e
  `new-password-buttons` ao `.button-holder`;
- e o CSS de la veste as tres com `!important`: borda, raio de 20px e sombra no
  cartao; borda e raio nos campos; e nos botoes a paleta do atos — primario
  `#0A2346`, cancelar com borda e texto `#ff4d4f` —, altura de 42px, raio de
  24px e um `order: 2` que inverte a ordem dos dois;
- no aceite dos termos, um `@media (max-width: 767px)` solto inverte a ordem do
  `.sheet-footer` com `!important`.

### Por que tanto `!important` daqui para baixo

Porque do outro lado ha `!important`, e contra ele a especificidade sozinha nao
decide: e preciso `!important` TAMBEM, e entao a especificidade desempata. Por
isso as contra-regras sao ancoradas em `body.geduc-pagina-senha` — o corpo
entra na conta e coloca cada uma acima da regra equivalente de la.

Elas nao "corrigem" o outro projeto: garantem que a tela fique igual com e sem
ele, que e o unico resultado que este lado consegue sustentar sozinho.
*/
/* ---------- troca obrigatoria de senha ---------- */
.geduc-login--portal {
  /*
    O cartao do Clay vira o interior da coluna, e nao um cartao dentro de outro:
    o `__card` do `_login.scss` e deliberadamente sem moldura, e o `.sheet`
    chega com fundo, borda, sombra e recuo proprios.
  */
  /*
    O cabecalho nativo sai: ele traz um `<h2>` que duplica o titulo do tema e o
    seletor de idioma do portal, que neste bundle sai com a lista repetida
    dezenas de vezes. Quem anuncia a tela e o `<h1>` do `conta_portal.ftl`.
  */
  /*
    Espaco para o botao do olho nao cobrir o que foi digitado. O `_login.scss` ja
    faz isto para `input[id$="_password"]`, que e o campo do portlet; aqui os
    campos sao `password1` e `password2` e nao casam com aquele sufixo.
  */
  /* Asterisco de obrigatorio, como na entrada: sinal visual, fora da arvore de
     acessibilidade — o `required` do campo ja anuncia a obrigatoriedade. */
  /*
    A barra de botoes. `!important` e maior especificidade porque o
    `new-password-buttons` do theme contributor vizinho cai neste mesmo elemento
    com `display: flex; justify-content: space-between` — que separaria "Salvar"
    e "Cancelar" nas duas pontas da coluna.
  */
}
.geduc-login--portal .sheet {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.geduc-login--portal .sheet-header {
  display: none;
}
.geduc-login--portal .sheet-text,
.geduc-login--portal .portlet-content,
.geduc-login--portal .panel-body {
  padding: 0;
  border: 0;
}
.geduc-login--portal input[id$=password1],
.geduc-login--portal input[id$=password2] {
  padding-right: 44px;
}
.geduc-login--portal label[for$=password1]::after,
.geduc-login--portal label[for$=password2]::after {
  content: " *";
  color: #dc2626;
}
.geduc-login--portal .btn-cancel,
.geduc-login--portal .btn-secondary {
  width: 100%;
  height: 48px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
  color: #171717;
  font-size: 16px;
  font-weight: 700;
}
.geduc-login--portal .btn-cancel:hover, .geduc-login--portal .btn-cancel:focus-visible,
.geduc-login--portal .btn-secondary:hover,
.geduc-login--portal .btn-secondary:focus-visible {
  border-color: #171717;
  background: #fff;
  color: #171717;
}

.geduc-conta__apoio {
  margin: 0 0 20px;
  color: #6b6b6b;
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- restos do markup nativo ---------- */
/*
  Valem para toda tela de conta que o PORTAL serve — recuperacao e a entrada
  maximizada. A ancora era `geduc-pagina-recuperar` e deixava o chevron de volta
  aparecer na entrada, que e onde a recuperacao termina.
*/
body.geduc-conta {
  /*
    O icone de voltar que o portal desenha ao servir o portlet maximizado: saia
    como um chevron solto acima do campo, sem rotulo e sem destino util.
  */
  /*
    O asterisco do portlet sai porque o tema ja desenha o dele no `::after` do
    label (`_login.scss`) — com os dois, o rotulo saia com dois sinais.
  */
}
body.geduc-conta .portlet-icon-back {
  display: none;
}
body.geduc-conta .reference-mark {
  display: none;
}

/*
  ---------- contra-regras da troca de senha ----------

  Tudo aqui responde a uma regra `!important` do theme contributor vizinho,
  listada no topo do arquivo. A ancora e `body.geduc-pagina-senha` para a
  especificidade ficar acima da de la; sem o corpo no seletor, as duas empatam e
  vence a que o portal carrega por ultimo — que e a de la.
*/
body.geduc-pagina-senha {
  /* Contra `.new-password-sheet`: borda, raio de 20px, sombra e recuo. O cartao
     do desenho nao tem moldura — a coluna ja e a moldura. */
  /* Contra `.new-password-panel .form-group .form-control`: borda, raio e recuo
     proprios. As medidas sao as do campo da tela de entrada. */
  /* Contra `.new-password-panel .form-group label.control-label`, que troca cor,
     familia e peso do rotulo. */
  /* Contra `.new-password-buttons`, que poe `space-between` e empurra os dois
     botoes para as pontas da coluna. */
  /*
    `order: 0` desfaz o `order: 2` de la.

    Nao e so estetica: `order` muda o que se ve sem mudar o que o teclado
    percorre. Com o `order` de la, quem enxerga le "Cancelar, Salvar" e quem
    tabula recebe "Salvar, Cancelar" — a mesma divergencia que o `_login.scss`
    recusa no comentario do atalho de senha. A ordem do documento e a do portal:
    salvar primeiro, cancelar depois.
  */
  /* Contra a paleta do atos (`#0A2346` no primario, `#ff4d4f` no cancelar). */
}
body.geduc-pagina-senha .geduc-login--portal .sheet {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.geduc-pagina-senha .geduc-login__portlet .form-control {
  height: 44px !important;
  padding: 8px !important;
  padding-right: 44px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}
body.geduc-pagina-senha .geduc-login__portlet .form-control:focus {
  border-color: #007889 !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 137, 0.25) !important;
}
body.geduc-pagina-senha .geduc-login__portlet label.control-label {
  color: #171717 !important;
  font-family: "Montserrat", "Montserrat fallback", "Atyp Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.geduc-pagina-senha .button-holder {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 0 !important;
}
body.geduc-pagina-senha .button-holder .btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  box-shadow: none !important;
  order: 0 !important;
}
body.geduc-pagina-senha .button-holder .btn-primary {
  border-color: #007889 !important;
  background-color: #007889 !important;
  color: #fff !important;
}
body.geduc-pagina-senha .button-holder .btn-primary:hover, body.geduc-pagina-senha .button-holder .btn-primary:focus-visible {
  border-color: #006677 !important;
  background-color: #006677 !important;
}
body.geduc-pagina-senha .button-holder .btn-secondary,
body.geduc-pagina-senha .button-holder .btn-cancel {
  border: 1px solid #e5e5e5 !important;
  background-color: #fff !important;
  color: #171717 !important;
}
body.geduc-pagina-senha .button-holder .btn-secondary:hover, body.geduc-pagina-senha .button-holder .btn-secondary:focus-visible,
body.geduc-pagina-senha .button-holder .btn-cancel:hover,
body.geduc-pagina-senha .button-holder .btn-cancel:focus-visible {
  border-color: #171717 !important;
  background-color: #fff !important;
  color: #171717 !important;
}

/* ---------- aceite dos termos ---------- */
/*
  Aqui o seletor pende do CORPO, e nao de um involucro nosso, porque naquela
  rota nao ha involucro possivel: o portal reescreve o documento para injetar a
  pagina utilitaria dentro do `#content`, e descarta o que o tema tivesse posto
  ali. A barra de marca e irma do `<main>` — o `conta_portal.ftl` registra a
  medicao — e todo o resto e o markup do portal, vestido daqui.
*/
.geduc-termo__topo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  background: #001548;
  color: #fff;
}
@media (min-width: 520px) {
  .geduc-termo__topo {
    padding: 24px;
  }
}

.geduc-termo__marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.geduc-termo__logo {
  display: block;
  width: auto;
  height: 27px;
  flex-shrink: 0;
  object-fit: contain;
}

.geduc-termo__evento {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.geduc-termo__titulo {
  margin: 0;
  color: #fff;
  font-family: "Atyp Display", "Montserrat", "Montserrat fallback", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
}
@media (min-width: 520px) {
  .geduc-termo__titulo {
    font-size: 28px;
  }
}

body.geduc-pagina-termo {
  /*
    Coluna de leitura. O termo e texto corrido e longo — a medida vem da
    legibilidade, nao da largura da tela.
  */
  /* Mesmo caso da tela de senha: o titulo e o seletor de idioma nativos saem, e
     quem anuncia a tela e o `<h1>` da barra. */
  /*
    A barra de botoes. O `!important` e por causa do `@media (max-width: 767px)`
    do theme contributor vizinho, que poe `flex-direction: column-reverse
    !important` em QUALQUER `.sheet-footer` do portal: no celular ele inverteria
    a ordem, deixando "Nao Concordo" antes de "Concordo". Especificidade maior
    nao basta contra `!important` — precisa de `!important` tambem.

    `align-items` porque o segundo botao chega embrulhado num `<div>` proprio,
    que o Clay cria para o `propsTransformer` do "Nao Concordo": sem isso ele
    estica e o botao fica de larguras diferentes do primeiro.
  */
}
body.geduc-pagina-termo .geduc-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
@media (min-width: 520px) {
  body.geduc-pagina-termo .geduc-main {
    padding: 32px 24px 56px;
  }
}
body.geduc-pagina-termo .sheet {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.geduc-pagina-termo .sheet-header {
  display: none;
}
body.geduc-pagina-termo .sheet-text {
  padding: 0;
  color: #171717;
  font-size: 15px;
  line-height: 1.6;
}
body.geduc-pagina-termo .sheet-text p {
  margin: 0 0 12px;
}
body.geduc-pagina-termo .sheet-text a {
  color: #007889;
}
body.geduc-pagina-termo .sheet-text a:hover, body.geduc-pagina-termo .sheet-text a:focus-visible {
  color: #006677;
}
body.geduc-pagina-termo .sheet-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 8px;
  /*
    `margin` inteiro e com `!important` porque o mesmo `@media` de la tambem
    traz `margin: 24px 0 !important`, que venceria um `margin-top` simples e
    acrescentaria 24px embaixo da barra.
  */
  margin: 24px 0 0 !important;
  padding: 0;
  border: 0;
}
@media (min-width: 768px) {
  body.geduc-pagina-termo .sheet-footer {
    flex-direction: row !important;
    align-items: center;
  }
}
body.geduc-pagina-termo .sheet-footer > div {
  display: flex;
}
body.geduc-pagina-termo .btn {
  width: 100%;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 768px) {
  body.geduc-pagina-termo .btn {
    width: auto;
  }
}
body.geduc-pagina-termo .btn-primary {
  border: 0;
  background: #007889;
}
body.geduc-pagina-termo .btn-primary:hover, body.geduc-pagina-termo .btn-primary:focus-visible {
  background: #006677;
}
body.geduc-pagina-termo .btn-secondary {
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #171717;
}
body.geduc-pagina-termo .btn-secondary:hover, body.geduc-pagina-termo .btn-secondary:focus-visible {
  border-color: #171717;
  background: #fff;
  color: #171717;
}

/*
### PÁGINAS PÚBLICAS NATIVAS ###

Estilo das classes que os nossos modelos e ADTs inventam — e só delas.

Tudo que começa com `geduc-` e vem das macros já é estilizado pelo
`geduc-components-css`, a client extension de CSS instalada pelo `sea-li`.
Reescrever aquilo aqui criaria dois donos para a mesma regra, e a próxima
atualização da biblioteca perderia para o tema em silêncio.

O que sobra para o tema são os arranjos: as grades que posicionam os cards, os
blocos de seção da Home, e os wrappers que a biblioteca deliberadamente deixa
sem regra porque as macros compensam com utilitárias do Bootstrap.

As medidas usam as custom properties da biblioteca em vez de valores cravados —
é o que mantém o tema e os componentes na mesma canaleta.
*/
/* ---------- marcador de atividade ---------- */
/*
  Âncora que liga o card renderizado no servidor à atividade na API. Não é
  conteúdo: o atributo `hidden` já o esconde, e esta regra só garante que
  nenhum reset do portal o traga de volta.
*/
/*
  ### CANALETA ###

  O tema zera o recuo do widget de proposito (`_portlet.scss`): faixa de cor
  precisa ir de borda a borda. Em troca, cada bloco que NAO e faixa reserva a
  propria canaleta — os mesmos tokens que a biblioteca usa, que sao os mesmos
  valores do `max-w-container` do React (1152px, 16/24px).

  Sem isto a listagem nasce colada nas bordas da janela, que foi o que
  aconteceu na Programacao depois de trocar a pagina para uma coluna so.

  A forma e `width: min(max, 100% - 2 * gutter)`, e nao `max-width` mais
  `padding`. As duas parecem a mesma coisa e nao sao: com padding, a coluna de
  1152px passa a ter 1104px uteis e o conteudo comeca 24px mais a direita. A
  biblioteca usa a primeira forma em `.geduc-page-header-container`, e o
  prototipo tambem — entao o cabecalho da pagina abria em 377px e o texto logo
  abaixo em 401px, um degrau de 24px em toda pagina interna.

  O corte e 768px, o do prototipo: e onde `.container`, `.hero`,
  `.internalPageContent`, o `PageHeader` e o rodape dele trocam
  `--container-gutter` por `--container-gutter-mobile`, todos na mesma linha.

  A biblioteca troca em 900, e nao em 768 — por isso o cabecalho de pagina leva
  uma sobreposicao logo abaixo (`.geduc-page-header-container`), para os dois
  degraus voltarem a coincidir. Sem ela, entre 769 e 900 o cabecalho abriria com
  16px de canaleta e o corpo com 24px, que e o degrau que esta correcao veio
  desfazer.
*/
/*
  ### O CABECALHO DE PAGINA TROCA EM 768, NAO EM 900 ###

  `PageHeader.module.css` tem UMA media query, em 768: canaleta de 24 para 16px
  e recuo de `120px 0 56px` para `104px 0 40px`. A biblioteca faz a mesma troca
  em 900.

  Entre 769 e 900 isso abria o degrau que o comentario da canaleta descreve — o
  cabecalho com 16px de recuo e o corpo logo abaixo com 24px, desalinhados por
  8px de cada lado em toda pagina interna. A sonda mediu 788px de cabecalho
  contra 772px de corpo numa janela de 820.

  Duas classes no seletor porque a biblioteca carrega depois do tema.
*/
/*
  ### A MIGALHA TEM A ALTURA DO TEXTO ###

  A biblioteca da `min-height: var(--tap-target)` — 44px — ao item da trilha e ao
  link dentro dele. O prototipo nao tem nada disso: a trilha e uma linha de 16px
  (`Nav.module.css`), e os 28px de diferenca empurravam o titulo e todo o corpo
  das cinco paginas internas para baixo.

  **E uma troca consciente, decidida pelo usuario em 11/09/2026**: a fidelidade
  ao prototipo vem na frente, e o alvo de toque do link da migalha passa a ser a
  propria linha de texto. O minimo da WCAG 2.2 (criterio 2.5.8, AA) e 24px, entao
  este link fica abaixo dele. Os outros alvos da pagina — menu, botoes, fichas de
  categoria do FAQ, links do rodape em celular — continuam nos 44px.

  Se a decisao mudar, e so remover este bloco: o valor da biblioteca volta
  sozinho.
*/
.geduc-page-header .geduc-page-header-crumb,
.geduc-page-header .geduc-page-header-crumb a {
  min-height: 0;
  /*
    E a entrelinha e a da fonte, nao o 1,6 que o Bootstrap poe no corpo: sem
    isto a trilha fecharia em 21px em vez dos 16 da referencia, e sobrariam 5
    dos 28px que este bloco veio remover.
  */
  line-height: normal;
}

.geduc-page-header .geduc-page-header-container {
  /*
    ### O VAO DE 32px E HORIZONTAL, NAO VERTICAL ###

    No prototipo o `gap` mora no `.inner`, que e um flex de UMA linha com duas
    colunas: o texto a esquerda e os numeros a direita
    (`PageHeader.module.css:16-26`). Ele separa as duas colunas, e nada mais — o
    ritmo vertical do texto vem das margens de cada peca: 16px embaixo da
    migalha, 12px acima da descricao.

    Aqui o container e um GRID, e `gap` na forma curta vale para os dois eixos.
    O resultado eram dois vaos de 32px que o prototipo nao tem — um entre a
    migalha e o titulo, outro entre o titulo e a descricao. Medido na
    Programacao: cabecalho de 478px contra 386px, com o `h1` 60px mais baixo, em
    toda pagina interna.

    `row-gap: 0` devolve o ritmo as margens; `column-gap` continua separando o
    texto dos numeros.
  */
}
@media (min-width: 769px) {
  .geduc-page-header .geduc-page-header-container {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
    /* 56px nao tem token: e o `padding-bottom` literal do prototipo. */
    padding: var(--page-header-offset, 120px) 0 56px;
    row-gap: 0;
    column-gap: var(--space-7, 32px);
  }
}
@media (max-width: 768px) {
  .geduc-page-header .geduc-page-header-container {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
    padding: 104px 0 var(--space-8, 40px);
    row-gap: 0;
    column-gap: var(--space-5, 20px);
  }
}

.geduc-activity-marker {
  display: none !important;
}

/* ---------- selo de disponibilidade ---------- */
/*
  Escrito por `js/programacao.js`. A biblioteca desenha `-sold-out` e
  `-unavailable`; os dois estados que faltam são os positivos, que ela não
  precisa conhecer porque no servidor não existem.
*/
.geduc-activity-card-status-slot {
  margin: var(--space-3, 12px) 0 0;
  /* Vazio é o estado normal — atividade disponível não anuncia nada. */
}
.geduc-activity-card-status-slot:empty {
  display: none;
}

.geduc-activity-card-status-last-seats {
  color: var(--color-gold-text, #8a5e0d);
  font-weight: 600;
}

.geduc-activity-card-status-available {
  color: var(--color-primary, #007889);
  font-weight: 600;
}

/* ---------- o par vagas + ação no rodapé do cartão ---------- */
/*
  A biblioteca dá ao rodapé borda, respiro e as margens laterais, e para no
  `<div>`: o macro `footer` é um `<#nested>` puro, então **quem decide o
  arranjo interno é o chamador**. Faltava decidir.

  Sem isto o rodapé fica `display: block`, os dois filhos caem na mesma linha
  como texto corrido e o `margin-left: auto` do CTA — em `_programacao.scss` —
  é inerte. Medido na programação de teste: "400 vagasSelecionar →", colados à
  esquerda, contra "400 vagas" à esquerda e "Selecionar →" à direita no
  protótipo.

  `space-between` **e** o `margin-left: auto` do CTA, que não é redundância: os
  estados por convite e esgotado emitem um filho só, e ali o `auto` é o que
  mantém a peça no lado certo.

  Escopado na variante `-card`: `-schedule` e `-agenda` põem o rodapé numa
  célula de grade (`grid-row: 3`), e torná-los flex mudaria cartão que esta
  entrega não toca.

  O respiro de baixo sai porque o protótipo não o tem — o par encosta no fim do
  corpo, e o afastamento da borda do cartão vem do recuo do próprio cartão.
*/
.geduc-activity-card-card > .geduc-activity-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding-bottom: 0;
}

/* ---------- wrappers que a biblioteca deixa sem regra ---------- */
/*
  A lib estiliza `-list`, `-tab` e os modificadores, mas não o `<nav>` que os
  envolve — e a macro não acrescenta utilitária. Sem isto as abas encostam no
  primeiro bloco da grade.

  Sem canaleta de propósito: as abas vivem sempre dentro de um bloco que já a
  tem — a prévia na Home, a barra de dia na Programação. Duas canaletas
  aninhadas recuam o conteúdo duas vezes, e as abas nasciam 24px à direita do
  título logo acima.
*/
.geduc-day-tabs {
  margin-bottom: var(--space-6, 24px);
}

/*
  O banner de chamada NAO leva a canaleta: a macro ja abre um `.container` do
  Bootstrap por dentro. Somar os dois estreitava o painel e empurrava o botao
  para fora dele.

  O que falta e a largura: o `.container` do Bootstrap para em 1140px, e o
  Design System pede 1152. Quarenta e oito pixels de diferenca em relacao as
  faixas vizinhas aparecem como um degrau.
*/
/*
  O botao da chamada e dourado, e nao teal.

  A macro `geducCtaBanner.actions` fixa `geduc-btn-primary` e nao aceita outra
  variante, entao a cor e corrigida aqui — com duas classes no seletor, porque
  a biblioteca carrega depois do tema. Os valores sao os mesmos de
  `.geduc-btn-contrast`.
*/
.geduc-cta-banner .geduc-cta-banner-button {
  border-color: var(--color-brand-gold, #f4aa18);
  background: var(--color-brand-gold, #f4aa18);
  color: var(--color-neutral-900, #171717);
}
.geduc-cta-banner .geduc-cta-banner-button:hover, .geduc-cta-banner .geduc-cta-banner-button:focus-visible {
  border-color: var(--color-contrast-dark, #b07a11);
  background: var(--color-contrast-dark, #b07a11);
  /*
  O texto continua escuro no hover, e nao vira branco.

  Medido: `#171717` sobre `#f4aa18` da 9,06:1 no estado normal, e
  `#ffffff` sobre `#b07a11` cai para **3,72:1** — reprova o AA de
  texto normal (4,5:1). Mantendo o escuro sobre o mesmo fundo da
  4,81:1, que passa, sem mexer na cor de fundo.

  O `:focus-visible` divide o seletor, entao a reprovacao atingia
  navegacao por teclado, e nao so o ponteiro.
  */
  color: var(--color-neutral-900, #171717);
}

.geduc-cta-banner {
  /*
    A palavra destacada do titulo, em ciano — `.text h2 span` do prototipo
    (`CtaBanner.module.css:58`).

    O ciano **nao serve para texto sobre branco**: 2,9:1, reprova na WCAG 1.4.3,
    e e o que `_variables.scss:8` avisa. Aqui ele vive dentro do painel escuro do
    banner, sobre a sobreposicao navy, onde passa — e por isso a regra e
    aninhada, e nao uma classe solta que qualquer faixa possa usar.

    No alto contraste ele cede o lugar ao dourado, como no prototipo: a
    sobreposicao muda e o ciano deixaria de ter o fundo que o sustenta.
  */
  /*
    Sem margem em cima: quem separa o banner da ultima pergunta e o recuo de
    96px do proprio FAQ, como no prototipo. Havia 80px aqui alem daquele, e os
    dois somavam 152px.
  */
  margin-top: 0;
  /*
    E 80px embaixo, nao 48.

    A macro emite `pb-5` no `<section>` (`FTL_geduc_cta_banner.ftl:20`), e o
    `.pb-5` do Bootstrap e `padding-bottom: 3rem !important` — 48px. O prototipo
    fecha a pagina com `--space-12` (`CtaBanner.module.css:1`). Como o valor a
    desfazer e `!important` e vem de markup vendorado, nao ha especificidade que
    o vença; e o unico `!important` deste arquivo.
  */
  /* stylelint-disable-next-line declaration-no-important */
  padding-bottom: var(--space-12, 80px) !important;
  /*
    O painel nao carrega respiro proprio: ele e um `.card` do Bootstrap, que
    nasce com 24px de margem embaixo, e no prototipo o `.panel` nao tem margem
    nenhuma — o fecho e todo da secao.
  */
  /*
    A canaleta do banner NAO encolhe em tela estreita, e isso e de proposito:
    `CtaBanner.module.css` declara `width: min(calc(100% - 48px), 1152px)` e
    nunca sobrescreve esse valor em nenhuma media query — o banner e o unico
    bloco do prototipo que mantem 24px de cada lado ate 360px de largura.

    Antes daqui o recuo caia para 16px abaixo de 1024px, o que deixava o painel
    16px mais largo que o do prototipo em tablet e mobile.
  */
  /*
    Empilhado, o texto ocupa a largura toda: `CtaBanner.module.css` troca
    `max-width: 380px` por `none` no mesmo corte em que o painel vira coluna
    (768). A biblioteca fixa os 380px e nunca os solta, entao em celular o
    titulo quebrava cedo e sobrava uma faixa vazia a direita.

    Tres seletores porque sao dois alvos na biblioteca — o bloco de texto e a
    descricao — e ela carrega depois do tema.
  */
}
.geduc-cta-banner .geduc-destaque {
  color: #00a7be;
}
.geduc-cta-banner .geduc-cta-banner-panel {
  margin-bottom: 0;
}
.geduc-cta-banner > .container {
  /*
    `width`, e nao `max-width` mais recuo. O projeto e `border-box`: com
    `max-width: 1152px` e 24px de recuo de cada lado, a caixa DE CONTEUDO
    ficava com 1104px e o painel inteiro entrava 24px — o titulo "Faca parte
    dessa transformacao" nascia em x=449 contra os 425 do prototipo.

    `CtaBanner.module.css:4` escreve `width: min(calc(100% - 48px), 1152px)`,
    que da os mesmos 24px de folga em tela estreita sem comer a largura util
    no desktop.
  */
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}
@media (max-width: 768px) {
  .geduc-cta-banner .geduc-cta-banner-content > :first-child:not(.geduc-cta-banner-actions),
  .geduc-cta-banner .geduc-cta-banner-content .geduc-cta-banner-description {
    max-width: none;
  }
}

/* ---------- grades de listagem ---------- */
/*
  Sem carrossel e sem rolagem horizontal: a regra do site público (RF205) manda
  exibir todas as atividades de um bloco ao mesmo tempo, em grade com quebra de
  linha.

  Os pontos de quebra são os do protótipo — 560px e 1024px —, não os do
  Bootstrap. É o que faz a listagem de palestrantes ir de 1 para 2 e para 3
  colunas nos mesmos lugares que o React. As regras são escritas em
  `min-width: 561px`, que é o complemento exato do `max-width: 560px` de lá.
*/
.geduc-speakers-grid {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  display: grid;
  gap: var(--space-5, 20px);
  grid-template-columns: 1fr;
}
@media (max-width: 768px) {
  .geduc-speakers-grid {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
@media (min-width: 561px) {
  .geduc-speakers-grid {
    grid-template-columns: repeat(2, 1fr);
    /*
      Cartao orfao no fim da grade de duas colunas: em vez de ficar encostado a
      esquerda, ocupa as duas colunas e se limita a uma. Os 10px sao metade do
      vao de 20px.

      O prototipo escreve isso em `:last-child` seco, e ali funciona porque a
      lista tem 11 palestrantes. Com numero PAR o ultimo cartao ja esta na coluna
      da direita, e um `span 2` nao caberia — a colocacao automatica o empurraria
      para uma linha nova, deixando um buraco. Por isso a condicao extra
      `:nth-child(odd)`, que e exatamente "sobrou um". Hoje sao 10 cadastrados;
      quando virar 11, a regra passa a valer sozinha.
    */
  }
  .geduc-speakers-grid > :last-child:nth-child(odd) {
    grid-column: span 2;
    justify-self: center;
    max-width: calc(50% - var(--space-5, 20px) / 2);
  }
}
@media (min-width: 1024px) {
  .geduc-speakers-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Em tres colunas a conta do orfao e outra; o prototipo tambem nao a faz. */
  }
  .geduc-speakers-grid > :last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
  }
}

/*
  ### A FOTO GRANDE DO PALESTRANTE — SO EM /palestrantes ###

  No prototipo o cartao tem duas formas. Na Home e o `stacked`: faixa de 90px em
  degrade com um retrato circular de 72px sobreposto. Em "Todos os palestrantes"
  e o `full`: a foto ocupa o topo inteiro do cartao, 220px de altura, sem faixa e
  sem circulo (`SpeakerCard.tsx`, `layout="full"`).

  A biblioteca so desenha a primeira. Como ela e vendorada, a segunda e feita
  aqui — e escopada na classe de pagina, senao a Home perderia o circulo, que
  ali esta certo.

  A condicao e `:has()` sobre o retrato REAL: sem foto a macro emite um `<span>`
  com a classe de placeholder, e nesse caso o cartao continua como esta. Hoje
  nenhum dos dez tem foto cadastrada, entao esta regra so aparece quando as
  imagens entrarem.

  `object-position: top center` pelo mesmo motivo do prototipo: as fotos sao
  quase quadradas e a caixa e mais larga que alta — ancorar no centro corta o
  alto da cabeca.
*/
/*
  ### O NOME DO PALESTRANTE E 16px, NAO 24 ###

  A macro carimba `h4` no `<h3>` do nome, e o `h4` do Bootstrap vale 24px. No
  prototipo o nome e `var(--text-h5)`, 16px — o mesmo tamanho do titulo dos
  cartoes institucionais e dos passos da jornada.

  Nao e diferenca de largura: valia 24px em qualquer tela, na Home e em
  "Todos os palestrantes". Apareceu quando a auditoria de responsividade mediu
  o cartao lado a lado.

  Duas classes porque `.geduc-speaker-card-name` e a `h4` do Bootstrap disputam,
  e a biblioteca carrega depois do tema.
*/
.geduc-speaker-card .geduc-speaker-card-name {
  font-size: var(--text-h5, 16px);
}

/*
  Em "Todos os palestrantes" o cartao para em 320px e centraliza na coluna, em
  vez de esticar ate a largura toda dela (`speakerGridItem` do prototipo). Numa
  grade de tres colunas a nossa coluna tem 370px, entao o cartao saia 50px mais
  largo — e a foto, mais baixa em proporcao.

  ### A RESERVA DE 215px NA BIOGRAFIA SAIU ###

  Ela vinha do prototipo e existia para igualar a altura dos cartoes e alinhar
  as etiquetas na mesma linha de base. So que ela igualava reservando espaco
  fixo, e nao acompanhando o conteudo: com as bios de uma ou duas linhas que o
  backend devolve, sobravam ~180px de branco embaixo de cada texto. Medido:
  cartao de 558px com 215px de bio para 33px de texto.

  Quem iguala a fileira ja e a propria grade — a linha estica os itens, o
  cartao e `h-100`, e a biblioteca prende as etiquetas embaixo com
  `margin-top: auto`. Sem a reserva, os tres cartoes da mesma fileira medem
  398px e as etiquetas alinham no mesmo pixel; com bio longa, a fileira cresce
  junto. E o mesmo alinhamento, vindo do conteudo em vez de um numero fixo.
*/
body.geduc-pagina-palestrantes .geduc-speakers-grid > * {
  justify-self: center;
  width: 100%;
  max-width: 320px;
}

/*
  A foto grande vale de 561px para cima. Abaixo disso o prototipo abandona a
  variante `full` por completo: esconde a grade e mostra os palestrantes em dois
  carrosseis de cartao `stacked` — faixa de 90px com o retrato circular — cada um
  com um botao "Ler biografia" que abre um dialogo.

  Aqui a decisao foi APROXIMAR, e nao reproduzir: abaixo de 560px a regra
  simplesmente sai do ar e o cartao volta ao `stacked` que a biblioteca ja
  desenha, empilhado em coluna. Fica o mesmo desenho de cartao do prototipo, sem
  duplicar os dez palestrantes no HTML nem carregar um dialogo so para essa
  largura. A diferenca esta registrada no artefato.
*/
@media (min-width: 561px) {
  body.geduc-pagina-palestrantes .geduc-speaker-card-photo:has(.geduc-speaker-card-avatar:not(.geduc-speaker-card-avatar-placeholder)) {
    height: 220px;
    background: none;
    /* O halo teal da faixa nao existe atras de uma foto. */
    /*
      O corpo sobe. Os 64px de recuo superior que a biblioteca reserva existem
      para o circulo sobrar por cima da faixa; sem circulo, viram um vao.
      Vinte pixels e o que o prototipo usa no `full`.
    */
  }
  body.geduc-pagina-palestrantes .geduc-speaker-card-photo:has(.geduc-speaker-card-avatar:not(.geduc-speaker-card-avatar-placeholder))::before {
    display: none;
  }
  body.geduc-pagina-palestrantes .geduc-speaker-card-photo:has(.geduc-speaker-card-avatar:not(.geduc-speaker-card-avatar-placeholder)) > .geduc-speaker-card-avatar {
    position: static;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-3) var(--radius-3) 0 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
  body.geduc-pagina-palestrantes .geduc-speaker-card-photo:has(.geduc-speaker-card-avatar:not(.geduc-speaker-card-avatar-placeholder)) > .geduc-speaker-card-avatar img {
    object-position: top center;
  }
  body.geduc-pagina-palestrantes .geduc-speaker-card-photo:has(.geduc-speaker-card-avatar:not(.geduc-speaker-card-avatar-placeholder)) + .geduc-speaker-card-header {
    padding-top: var(--space-5, 20px);
  }
}

/*
  ### SECAO "SOBRE" DA HOME ###

  Duas colunas assimetricas: texto em 0,85fr e cartoes em 1,15fr — a coluna de
  texto e a menor, como manda o Design System (`gridTemplateColumns.about`).
  Empilha abaixo de 1024px.

  A canaleta fica na secao, e nao na grade de cartoes: dentro da coluna direita
  ela somaria um segundo recuo.
*/
.geduc-home-about {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--space-12, 80px);
  padding-top: var(--space-12, 80px);
  /*
    Nao e botao: no prototipo e uma chamada de texto com seta, em peso forte e
    no tom escuro do primario.
  */
}
@media (max-width: 768px) {
  .geduc-home-about {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
.geduc-home-about-grid {
  display: grid;
  /*
    Vao fluido, como no prototipo (`clamp(48px, 8vw, 96px)`). Era 48px fixo, e
    no desktop as duas colunas ficavam 48px mais largas que as de la — a
    coluna de texto abria 469px onde o prototipo abre 449px.
  */
  gap: clamp(var(--space-9, 48px), 8vw, 96px);
  align-items: center;
}
.geduc-home-about-title {
  margin: 0;
  font-family: var(--font-family-display, inherit);
  font-size: var(--text-h1, clamp(26px, 3.5vw, 39px));
  font-weight: 700;
  /* -0.03em e o valor de `.geduc-section-heading-title` na biblioteca. */
  letter-spacing: -0.03em;
  /*
    `1.1`, como todo titulo de faixa do prototipo
    (`GEducPublicWidget.module.css:265-273`, que junta `.sectionHeading h2` e
    `.aboutCopy h2` numa regra so). Faltando a declaracao, o titulo herdava a
    entrelinha do corpo — 1,2 — e abria 3,9px a mais por linha.
  */
  line-height: 1.1;
  /*
    O prototipo estreita ESTE titulo, e so ele: `.aboutCopy h2 { max-width:
    530px }`. E o unico da Home que divide a faixa com outra coluna, e sem o
    limite ele avanca sobre o vao de 48px que o separa dos cartoes.
  */
  max-width: 530px;
  text-wrap: balance;
}
.geduc-home-about-copy .geduc-rich-text {
  margin-top: var(--space-5, 20px);
  color: var(--surface-muted, #6b6b6b);
  /*
    1,8 e o valor do prototipo (`.aboutCopy p`). Com 1,9 cada linha abria
    1,4px a mais; sao onze linhas de texto nesta coluna, e o bloco inteiro
    crescia 15px — o bastante para empurrar "Planeje sua chegada" para baixo,
    porque as duas colunas estao centradas uma pela outra.
  */
  line-height: 1.8;
}
.geduc-home-about-link {
  display: inline-flex;
  gap: var(--space-2, 8px);
  align-items: center;
  margin-top: var(--space-6, 24px);
  color: var(--color-primary-active, #005566);
  /*
    16px escrito, e nao herdado. O prototipo nao declara tamanho em `.textLink`
    — o link cai na raiz de 16px do navegador. Aqui o Bootstrap do portal poe
    `font-size: 14px` no `body`, entao herdar da 14. Sem esta linha o convite
    "Conheca o congresso" sai dois pixels menor que o da referencia.
  */
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: color var(--dur-quick, 0.22s) ease;
}
.geduc-home-about-link:hover, .geduc-home-about-link:focus-visible {
  color: var(--color-primary, #007889);
  text-decoration: none;
}
@media (min-width: 1024px) {
  .geduc-home-about-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.geduc-institutional-grid {
  display: grid;
  gap: var(--space-4, 16px);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 561px) {
  .geduc-institutional-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.geduc-institutional-card {
  min-height: 190px;
  padding: var(--space-6, 24px);
  border: 1px solid var(--color-border, rgba(0, 21, 72, 0.1));
  border-radius: var(--radius-3, 12px);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  /*
    O cartão de índice ímpar desce um degrau acima de 560px. É o escalonamento
    do protótipo (`index.tsx:152`), e é o que impede a fileira de parecer uma
    tabela.
  */
  transition: border-color var(--dur-base, 0.2s) ease, box-shadow var(--dur-base, 0.2s) ease;
  /*
    `h5` e nao titulo de secao: o cartao e um item da grade, nao um bloco da
    pagina. Antes ele usava `geducSectionHeading`, e "Local" saia do mesmo
    tamanho que "Conexoes que transformam a educacao".
  */
}
@media (min-width: 561px) {
  .geduc-institutional-card:nth-child(even) {
    transform: translateY(var(--space-6, 24px));
  }
}
.geduc-institutional-card:hover {
  border-color: var(--color-primary, #007889);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
}
.geduc-institutional-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2, 8px);
  background: var(--color-primary-light, rgba(0, 120, 137, 0.1));
  color: var(--color-primary-active, #005566);
  font-size: 22px;
}
.geduc-institutional-card-title {
  margin: var(--space-5, 20px) 0 0;
  font-family: var(--font-family-display, inherit);
  font-size: var(--text-h5, 16px);
  font-weight: 700;
}
.geduc-institutional-card-body {
  margin-top: var(--space-2, 8px);
  color: var(--surface-muted, #6b6b6b);
  font-size: var(--text-sm, 13px);
  line-height: 1.6;
}
.geduc-institutional-card-body > :last-child {
  margin-bottom: 0;
}

/*
  Bloco de texto corrido posto direto na página: a seção institucional na Home
  e em /sobre, e o corpo do Regulamento. A biblioteca desenha o título e a
  tipografia, nao a faixa que os segura — sem isto o parágrafo ia de borda a
  borda da janela.
*/
.geduc-bloco-texto {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--space-9, 48px);
  /*
    A canaleta centra o bloco em 1152px, mas texto corrido nao se le nessa
    largura: sao quase 150 caracteres por linha, e o olho perde o comeco da
    linha seguinte. O limite de leitura vai no conteudo, e nao no bloco, para o
    texto continuar alinhado a esquerda da coluna — e o que o prototipo faz com
    `max-w-copy`.
  */
}
@media (max-width: 768px) {
  .geduc-bloco-texto {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
.geduc-bloco-texto > * + * {
  margin-top: var(--space-5, 20px);
}
.geduc-bloco-texto .geduc-rich-text {
  max-width: var(--max-copy, 720px);
}

/*
  ### FATOS RAPIDOS DE "SOBRE" ###

  Tres cartoes entre o texto de ABOUT e o de AUDIENCE, desenhados pelo modelo
  `EventoFatos.ftl`. As medidas sao as das utilitarias que o React usa em
  `pages/sobre.tsx`: cartao com recuo de 24px e sombra leve, selo de 44px
  (`h-11 w-11`) em teal claro, titulo em `text-h5` na fonte de display.
*/
.geduc-fatos {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--space-9, 48px);
}
@media (max-width: 768px) {
  .geduc-fatos {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
.geduc-fatos-lista {
  display: grid;
  gap: var(--space-5, 20px);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 769px) {
  .geduc-fatos-lista {
    grid-template-columns: repeat(3, 1fr);
  }
}
.geduc-fatos-item {
  padding: var(--space-6, 24px);
  border: 1px solid var(--surface-border, #e5e5e5);
  border-radius: var(--radius-3, 12px);
  background: var(--surface-bg, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.geduc-fatos-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2, 8px);
  background: var(--color-primary-light, #e6f6f9);
  color: var(--color-primary-active, #005566);
  font-size: var(--text-h5, 16px);
}
.geduc-fatos-titulo {
  margin-top: var(--space-5, 20px);
  margin-bottom: 0;
  color: var(--surface-text, #171717);
  font-family: "Atyp Display", "Montserrat", "Montserrat fallback", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--text-h5, 16px);
  font-weight: 700;
}
.geduc-fatos-texto {
  margin-top: var(--space-2, 8px);
  margin-bottom: 0;
  color: var(--surface-muted, #737373);
  font-size: var(--text-sm, 13px);
  line-height: 1.625;
}

/*
  ### SUBTITULO DO HERO ###

  A biblioteca pinta o subtitulo com `--color-header-muted`, o cinza-azulado
  que o cabecalho usa. Sobre a arte do hero ele fica apagado demais, e o
  prototipo troca por um branco mais presente no proprio CSS da pagina
  (`GEducPublicWidget.module.css:94`) — mesma camada em que esta regra vive.

  Dois seletores porque a biblioteca carrega depois do tema.
*/
.geduc-home-hero .geduc-home-hero-subtitle {
  color: rgba(232, 240, 248, 0.74);
}

/*
  ### A ARTE DO HERO VAI DE BORDA A BORDA ###

  A biblioteca emite a arte DENTRO do container de 1152px e da a ele
  `position: relative` — entao a caixa da arte, que e `inset: 0`, para nos
  1152px. No prototipo o pai posicionado e a casca de largura total
  (`heroShell`), e a arte ocupa a janela inteira: numa tela de 2560px a nossa
  saia com 945px de largura contra 2087px.

  `position: static` no container devolve a arte para a casca. E seguro: todo o
  resto do hero — sobretitulo, titulo, texto, botoes, metas — e
  `position: relative` com `z-index: 1` na propria biblioteca, e nada ali usa
  posicionamento absoluto ancorado no container.
*/
.geduc-home-hero > .geduc-home-hero-container {
  position: static;
}

/*
  ### OS VEUS DO HERO ###

  Sao dois no prototipo (`heroVisual::before` e `::after`), com paradas
  intermediarias e sem opacidade global. A biblioteca resolve com um so, de duas
  paradas, e `opacity: .88` por cima — o resultado e um veu chapado: a borda
  fica menos navy do que devia e o meio limpa mais devagar.

  O `::after` da biblioteca e reescrito e o `::before`, que ela nao usa, recebe
  o outro par de gradientes. As paradas sao as do prototipo, valor por valor.
*/
.geduc-home-hero .geduc-home-hero-art::before, .geduc-home-hero .geduc-home-hero-art::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  opacity: 1;
  pointer-events: none;
}
.geduc-home-hero .geduc-home-hero-art::before {
  background: linear-gradient(to bottom, var(--color-brand-navy, #001548) 0%, color-mix(in srgb, var(--color-brand-navy, #001548) 84%, transparent) 14%, transparent 38%), linear-gradient(to right, var(--color-brand-navy, #001548) 0%, color-mix(in srgb, var(--color-brand-navy, #001548) 88%, transparent) 16%, transparent 38%);
}
.geduc-home-hero .geduc-home-hero-art::after {
  background: linear-gradient(to top, var(--color-brand-navy, #001548) 0%, color-mix(in srgb, var(--color-brand-navy, #001548) 94%, transparent) 16%, color-mix(in srgb, var(--color-brand-navy, #001548) 68%, transparent) 30%, transparent 52%), linear-gradient(to left, var(--color-brand-navy, #001548) 0%, color-mix(in srgb, var(--color-brand-navy, #001548) 58%, transparent) 5%, transparent 14%);
}

/* ---------- blocos da página inicial ---------- */
/*
  ### NUMEROS DO CONGRESSO ###

  A faixa vive DENTRO do hero, como no React: mesma `<section>`, mesmo fundo
  navy, separada do texto so pelo filete de `border-y`.

  Ela era um conteudo web proprio, e um widget logo abaixo do hero. O CSS
  existia para SIMULAR a fusao — repetia o navy de borda a borda e tomava o
  recuo inferior do hero, para o olho ver um bloco onde havia dois. Agora a
  fusao e real: `numero_valor` e `numero_rotulo` sao campos do proprio hero, e a
  `dl` sai dentro do container dele. O que sobra aqui e so a forma da lista.

  O `<section class="geduc-home-stats">` deixou de existir no HTML — se voltar a
  aparecer, e sinal de que alguem republicou o widget antigo.
*/
.geduc-home-stats-list {
  /*
    ### A FAIXA NAO TEM CANALETA PROPRIA ###

    O `@include canaleta` daqui e heranca de quando os numeros eram um widget
    solto, filho direto da coluna da pagina. Hoje a `dl` e filha do container do
    hero, que JA esta na canaleta — o mixin a aplicava uma segunda vez e tirava
    24px de cada lado. Medido no ambiente de teste: faixa com 1104px contra os
    1152px do titulo logo acima, com os filetes das pontas desalinhados do texto.

    `width: auto` em vez de `100%` porque a `dl` e filha de um flex container:
    `100%` ignoraria uma eventual margem e `auto` estica pelo `align-items:
    stretch`, que e o comportamento de bloco que a faixa tinha antes.
  */
  width: auto;
  margin-right: 0;
  margin-left: 0;
  /*
    `relative` + `z-index: 1` porque a lista virou filha do container do hero, e
    ali a arte e `position: absolute; z-index: 0`. Elemento posicionado com
    `z-index: 0` fica ACIMA de irmao estatico, entao sem isto a faixa sai atras
    da arte e do veu de gradiente — os numeros ficam legiveis pela metade, como
    se fossem transparencia.
    E o mesmo par que a biblioteca da a todos os outros filhos do container
    (`-eyebrow`, `-title`, `-subtitle`, `-actions`, `-meta`).
  */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 32px e o respiro que o React poe entre o texto do hero e a faixa. */
  margin-top: var(--space-7, 32px);
  margin-bottom: 0;
  border-top: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.1));
  border-bottom: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.1));
  color: var(--color-white, #fff);
}
@media (min-width: 769px) {
  .geduc-home-stats-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*
  O fecho de 48px voltou para o hero.

  Enquanto os numeros eram um widget proprio, o hero cedia o recuo inferior — os
  32px do respiro ficavam com ele e os 48px de fecho com a faixa. Com a faixa
  dentro, o container fecha os 48px do `heroShell` do prototipo
  (`padding: 116px 0 48px`) e o respiro de 32px passou a ser o `margin-top` da
  propria `dl`, logo acima.

  Seletor descendente porque a regra da biblioteca vem DEPOIS desta folha —
  ver a nota de cascata em `portal_normal.ftl`.
*/
/*
  ### O HERO NAO TEM RESPIRO PROPRIO EMBAIXO ###

  Havia aqui `margin-bottom: 80px`, heranca de quando os numeros eram um widget
  separado logo abaixo do hero e alguem precisava afastar o que vinha em
  seguida. A secao seguinte ja traz o respiro no proprio recuo — `.aboutSection`
  do prototipo e `padding: 80px 0` —, entao a margem virava um segundo
  afastamento: 160px onde o prototipo tem 80.

  E nao era so a Sobre: como cada faixa da Home se apoia na anterior, os 80px a
  mais empurravam TODA a pagina para baixo. Medido: a segunda secao comecava em
  943px contra os 863px do prototipo, e o desvio seguia ate o rodape.
*/
.geduc-home-hero > .geduc-home-hero-container {
  padding-bottom: var(--space-9, 48px);
  /*
    ### ALTURA DO HERO ###

    A biblioteca poe `min-height: var(--min-hero-grid)` no container, e como o
    projeto e `border-box` esse minimo engole os 116px reservados para a pilha
    do cabecalho. Sobram 432px de conteudo onde o prototipo tem 570 — o hero
    inteiro nascia 138px mais curto, logo na primeira tela.

    No prototipo os 570px sao a medida da GRADE (`heroGrid`), e ela contem SO o
    texto: titulo, chamada, botoes e as duas metas. O que vem por fora dela sao
    quatro coisas, nesta ordem — o recuo de 116px do topo, o respiro de 32px, a
    faixa de numeros e o fecho de 48px. A conta anterior somava so os dois
    recuos e esquecia a faixa, que entrou no hero depois: 734px contra os 863
    do prototipo.

    Os 129px que faltavam nao ficavam so no espaco em branco. A arte nao tem
    tamanho proprio — e `width`/`height: 100%` do hero com `object-fit: contain`
    e `scale(0.82)` —, entao ela encolhia na mesma proporcao: 1562x602 contra
    1562x708. Era isso que se via como "a imagem do hero esta menor".
  */
  min-height: calc(var(--header-offset, 116px) + var(--min-hero-grid, 570px) + var(--space-7, 32px) + var(--hero-stats-band, 97px) + var(--space-9, 48px));
  /*
    ### O TEXTO FICA CENTRADO NA GRADE ###

    `heroGrid` e um flex com `align-items: center`: com 429px de texto em 570px
    de grade, sobram 70px acima e 70px abaixo, e e por isso que o `h1` do
    prototipo comeca em 186px e nao nos 116px do recuo.

    Aqui nao ha esse elemento — a biblioteca emite titulo, chamada, botoes, metas
    e a `dl` como irmaos diretos do container. Duas margens automaticas
    reproduzem a mesma distribuicao sem elemento novo: a folga se divide entre a
    de cima, acima do titulo, e a de baixo, logo antes da faixa.

    O `:has()` de adjacencia acha "o irmao que vem antes da faixa" sem depender
    de QUAL e ele — hoje e a meta, mas ela some quando o conteudo nao preenche os
    dois campos de informacao. Onde `:has()` nao existir, o texto encosta no topo
    da grade: a pagina continua inteira, so perde a centralizacao.
  */
  display: flex;
  flex-direction: column;
}

.geduc-home-hero .geduc-home-hero-title {
  margin-top: auto;
}

.geduc-home-hero .geduc-home-hero-container > :has(+ .geduc-home-stats-list) {
  margin-bottom: auto;
}

/*
  ### OS TRES ESTADOS DO HERO ###

  O prototipo troca o hero em 1024, 768 e 560. A biblioteca troca em 900 e numa
  faixa fechada de 901 a 1024 — dois degraus que nao existem la. O efeito e que
  entre 769 e 900 o hero ja entrava no estado de celular (grade de 620px, texto
  em 82% da largura, arte mais opaca) enquanto o prototipo ainda esta no estado
  de tablet (grade de 520px, texto em 60%, arte mais discreta). Era a maior
  divergencia da faixa de tablet.

  Aqui os tres estados sao reescritos nos cortes certos. Como a biblioteca
  carrega DEPOIS do tema, cada seletor leva a classe do pai junto — nunca
  `!important`.

  A altura vem dos tokens em vez de valores cravados: `--min-hero-grid` e a
  medida da GRADE no prototipo e `--header-offset` e o recuo que reserva a pilha
  flutuante. O `calc` da regra acima continua sendo o unico lugar que soma os
  dois. O recuo de baixo e 48px em todas as larguras, que e o fecho do
  `heroShell` do prototipo — voltou para ca quando a faixa de numeros entrou no
  hero.
*/
.geduc-home-hero {
  /* Tablet: 1024 no prototipo, e nao a faixa 901-1024 da biblioteca. */
  /* Celular largo: o estado que a biblioteca comeca em 900. */
}
@media (max-width: 1024px) {
  .geduc-home-hero {
    --min-hero-grid: 520px;
    /*
      O recuo do topo continua nos 116px do desktop ate 768. A biblioteca o
      baixa para 104 ja em 900, e o `--header-offset` logo abaixo so o leva para
      96 quando o prototipo leva — dai a regra ficar aqui e o token, no bloco de
      768.
    */
    /*
      Os botoes empilham ja no tablet. A biblioteca so faz isso em 900; entre
      769 e 900 eles ficavam lado a lado e o rotulo longo vazava.
    */
    /*
      Os dois veus somem: abaixo de 1024 a arte deixa de ser ilustracao ancorada
      a direita e vira fundo de tela inteira, apagado por `opacity`. Manter os
      gradientes ali escureceria as bordas duas vezes.
    */
    /*
      A arte tem tres tratamentos no prototipo, e a biblioteca so conhece dois.
      No tablet ela fica em 30% e o ponto de foco vai para 70% — nem o 100% do
      desktop nem o 50% do celular. A biblioteca usa 38% e 50% em qualquer largura
      abaixo de 900, que deixava a ilustracao visivelmente mais presente atras do
      texto do que no prototipo.
    */
  }
  .geduc-home-hero > .geduc-home-hero-container {
    padding-top: var(--header-offset, 116px);
  }
  .geduc-home-hero .geduc-home-hero-title {
    font-size: clamp(42px, 6vw, 62px);
  }
  .geduc-home-hero .geduc-home-hero-title,
  .geduc-home-hero .geduc-home-hero-subtitle {
    max-width: min(60%, 580px);
  }
  .geduc-home-hero .geduc-home-hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 580px;
  }
  .geduc-home-hero .geduc-home-hero-actions > a,
  .geduc-home-hero .geduc-home-hero-actions > button {
    width: 100%;
  }
  .geduc-home-hero .geduc-home-hero-art::before,
  .geduc-home-hero .geduc-home-hero-art::after {
    display: none;
  }
  .geduc-home-hero .geduc-home-hero-art-image {
    opacity: 0.3;
    object-position: 70% center;
  }
}
@media (max-width: 768px) {
  .geduc-home-hero {
    --min-hero-grid: 620px;
    --header-offset: 96px;
    /*
      No prototipo sao duas caixas: a casca com `padding-top: 96px` e a GRADE
      dentro dela com mais 20px de recuo proprio — o conteudo comeca em 116px,
      mas a altura minima da grade continua contando a partir dos 620px.

      Aqui as duas caixas sao a mesma. O `--header-offset` fica em 96 para o
      `calc` da altura dar o mesmo total, e o recuo visivel soma os 20px.
    */
    /*
      Sombra de leitura: nesta faixa a arte fica mais opaca atras do texto, e o
      prototipo compensa com sombra em vez de escurecer a foto de novo.
    */
    /* Em celular a arte sobe para 40% e centraliza — dai a sombra acima. */
  }
  .geduc-home-hero > .geduc-home-hero-container {
    align-items: flex-start;
    padding-top: calc(var(--header-offset, 96px) + var(--space-5, 20px));
  }
  .geduc-home-hero .geduc-home-hero-title,
  .geduc-home-hero .geduc-home-hero-subtitle {
    max-width: min(82%, 580px);
  }
  .geduc-home-hero .geduc-home-hero-title,
  .geduc-home-hero .geduc-home-hero-subtitle,
  .geduc-home-hero .geduc-home-hero-meta {
    text-shadow: 0 2px 18px rgba(0, 21, 72, 0.5);
  }
  .geduc-home-hero .geduc-home-hero-art-image {
    opacity: 0.4;
    object-position: center;
  }
}
@media (max-width: 560px) {
  .geduc-home-hero {
    --min-hero-grid: 650px;
    /*
      O titulo e a largura do texto sao os mesmos que a biblioteca ja entrega
      nesta faixa. Estao repetidos aqui porque os blocos de 1024 e 768 acima
      usam duas classes no seletor e venceriam por especificidade — sem esta
      repeticao o titulo de celular voltava a 42px e o texto ficava preso em
      82% da largura.
    */
  }
  .geduc-home-hero .geduc-home-hero-title {
    font-size: clamp(40px, 13vw, 56px);
  }
  .geduc-home-hero .geduc-home-hero-title,
  .geduc-home-hero .geduc-home-hero-subtitle {
    max-width: 100%;
  }
  .geduc-home-hero .geduc-home-hero-subtitle {
    font-size: 15px;
  }
}

.geduc-home-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: var(--space-4, 16px);
  border-color: var(--color-header-border, rgba(255, 255, 255, 0.1));
  /*
    O filete entre celulas segue o do React: duas colunas ate 1023px, com a
    borda direita so na coluna da esquerda; quatro colunas no desktop, sem a
    borda no ultimo.
  */
  /*
    Em duas colunas o prototipo tambem separa as FILEIRAS: filete embaixo de
    todas as celulas, menos nas duas ultimas, que ja tem a borda do proprio
    bloco. Sem isto a grade 2x2 fica com os quatro numeros soltos num quadrado.

    O prototipo escreve `:nth-child(2) { border-right: 0 }`; aqui o filete
    vertical ja vem por `:nth-child(odd)` logo acima, que da o mesmo desenho e
    nao deixa uma borda perdida na quarta celula quando ela cai na coluna da
    direita.
  */
  /* Valor acima do rótulo, apesar de `dt` vir antes de `dd` no DOM. */
}
.geduc-home-stat:nth-child(odd) {
  border-right: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.1));
}
@media (max-width: 768px) {
  .geduc-home-stat {
    border-bottom: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.1));
  }
  .geduc-home-stat:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
@media (min-width: 561px) {
  .geduc-home-stat {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3, 12px);
    padding: var(--space-5, 20px);
  }
}
@media (min-width: 769px) {
  .geduc-home-stat {
    border-right: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.1));
  }
  .geduc-home-stat:last-child {
    border-right: 0;
  }
  .geduc-home-stat:first-child {
    padding-left: 0;
  }
}
.geduc-home-stat-value {
  order: 1;
  /* O `dd` nasce com 40px de recuo a esquerda no navegador. */
  margin: 0;
  color: var(--color-white, #fff);
  font-family: var(--font-family-display, inherit);
  font-size: var(--text-stat, clamp(26px, 3vw, 38px));
  font-weight: 700;
  /*
    `normal`, e nao um numero: o prototipo nao declara `line-height` no valor,
    entao quem manda e a metrica da propria Atyp Display — 55px para os 38px
    do desktop. O `1.1` daqui dava 41,8px e achatava o numero em 13px, o que
    encolhia a celula inteira e, por tabela, o hero.

    Como `--text-stat` e um `clamp`, `normal` acompanha a escala em qualquer
    largura; um numero fixo so acertaria numa delas.
  */
  line-height: normal;
}
.geduc-home-stat-label {
  order: 2;
  margin: var(--space-1, 4px) 0 0;
  color: var(--color-header-muted, rgba(200, 216, 232, 0.6));
  font-size: var(--text-xs, 12px);
  /*
    O rotulo e um `<dt>`, e o Bootstrap do portal da `font-weight: 700` a todo
    `dt`. No prototipo o rotulo e um `<span>` em peso normal — sem esta linha o
    texto sob o numero sai em negrito, que e diferenca visivel a olho nu.
  */
  font-weight: 400;
  line-height: 1.35;
}
@media (min-width: 561px) {
  .geduc-home-stat-label {
    margin-top: 0;
  }
}

/*
  "Planeje sua chegada" e uma faixa navy de borda a borda, com titulo, etapas e
  botao dentro dela — e por isso que o titulo usa `inverse`.

  A biblioteca ja pinta a faixa, mas so em volta das etapas. Posta so ali, o
  titulo em branco caia sobre fundo branco e sumia, e o botao de contorno claro
  junto. A faixa sobe um nivel: passa a ser a secao, e a lista por dentro fica
  transparente para nao pintar duas vezes nem somar o recuo vertical.
*/
.geduc-home-arrival {
  margin-bottom: var(--space-12, 80px);
  padding: clamp(56px, 7vw, 88px) 0;
  border-top: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.12));
  border-bottom: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.12));
  background: var(--color-brand-navy, #001548);
  text-align: center;
  /*
    O cabecalho desta faixa NAO e um `sectionHeading` no prototipo: e o
    `.arrivalHeader`, que tem escala e largura proprias
    (`GEducPublicWidget.module.css:291-292`) — `max-width: 760px` centrado e
    titulo em `--text-h2`, nao em `--text-h1`.

    A diferenca e visivel: 39px contra 31px, num titulo curto e centralizado no
    meio de uma faixa navy. Medido antes da correcao.
  */
  /*
    A descricao desta faixa e 16px, nao os 15px das outras. Vale o mesmo do link
    da secao Sobre: `.arrivalHeader p` nao declara tamanho e cai na raiz de 16px
    do navegador, enquanto a biblioteca fixa 15px em
    `.geduc-section-heading-description`. A entrelinha de 1,7 vem escrita no
    prototipo.
  */
}
.geduc-home-arrival > * {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 768px) {
  .geduc-home-arrival > * {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
.geduc-home-arrival .geduc-arrival-steps {
  padding: 0;
  border: 0;
  background: none;
}
.geduc-home-arrival .geduc-section-heading {
  max-width: 760px;
  margin-bottom: var(--space-8, 40px);
}
.geduc-home-arrival .geduc-section-heading-title {
  font-size: var(--text-h2, clamp(22px, 3vw, 31px));
}
.geduc-home-arrival .geduc-section-heading-description {
  font-size: 16px;
  line-height: 1.7;
}
.geduc-home-arrival-action {
  margin-top: var(--space-8, 40px);
  /*
    Sem respiro embaixo: o fecho da faixa e o `padding` de 88px da propria
    secao. Os 16px que havia aqui somavam a ele e empurravam a faixa seguinte.
  */
  margin-bottom: 0;
  text-align: center;
}

/*
  A previa nao tem grade propria: o ADT marca a lista com `geduc-trilha`, e
  `_carrossel.scss` a transforma em carrossel na Home — que e o que o prototipo
  faz (`<Carousel>` com `.activityStripItem`).

  Havia aqui uma grade de 1/2/3 colunas, herdada de quando a previa ainda era
  listagem. Era regra morta: `body.geduc-pagina-inicio .geduc-trilha` tem
  especificidade maior e ja impunha `display: flex`, entao as colunas nunca
  chegavam a valer. Removida para nao dar a impressao de que existem dois donos
  do mesmo bloco.
*/
.geduc-schedule-preview {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--space-12, 80px);
}
@media (max-width: 768px) {
  .geduc-schedule-preview {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}

/*
  ### FAIXA CINZA DA PREVIA ###

  No prototipo a previa da programacao e uma faixa de fundo `--surface-alt`
  que vai de borda a borda, encostada na faixa navy de cima
  (`index.tsx:232` — `tw-bg-surface-alt tw-py-space-12`).

  Aqui eram DOIS widgets — titulo e listagem — e a faixa exigia dois seletores:
  "o widget que contem a previa" e "o widget imediatamente antes dele", ligados
  por `:has()` de adjacencia. Entre os dois involucros a margem colapsava e
  abria uma tira BRANCA no meio do cinza, que precisava de `flow-root` e de
  zerar margens de um lado e de outro para nao aparecer.

  Agora o titulo esta DENTRO do mesmo template, no mesmo widget. Sobra um
  seletor, e o problema da tira branca deixou de existir junto com a fronteira
  que o causava.

  O involucro do portlet continua sendo o alvo, e nao o `.geduc-schedule-preview`:
  a faixa precisa ir de borda a borda, e a previa tem canaleta com largura
  maxima. Onde `:has()` nao existe, a faixa sai branca — e e o pior que acontece.

  O recuo de 80px fica DENTRO da faixa (cinza) e a margem de 80px FORA dela
  (branca) — e o que reproduz o ponto exato onde o cinza termina.
*/
body.geduc-pagina-inicio {
  /* A faixa navy encosta na cinza: no prototipo nao ha tira branca entre elas. */
}
body.geduc-pagina-inicio .geduc-home-arrival {
  margin-bottom: 0;
}
body.geduc-pagina-inicio .portlet-boundary:has(.geduc-schedule-preview) {
  /*
    `flow-root` contem as margens dos filhos: sem ele a margem de cima do
    cabecalho escapa do involucro e reabre a tira branca acima do cinza.
  */
  display: flow-root;
  margin-bottom: var(--space-12, 80px);
  padding: var(--space-12, 80px) 0;
  background: var(--surface-alt, #f5f5f5);
  /* O vao entre o titulo e as abas e da barra de abas, que ja o declara. */
}
body.geduc-pagina-inicio .portlet-boundary:has(.geduc-schedule-preview) .geduc-home-section-head {
  margin-bottom: 0;
}
body.geduc-pagina-inicio .geduc-schedule-preview {
  margin-bottom: 0;
}

/*
  Com as abas ligadas (`js/abas.js`), o rotulo do grupo repete o texto da ficha
  ativa logo acima. Sem JavaScript os cinco grupos aparecem juntos e o rotulo e
  o que separa um do outro — por isso ele so some quando as abas assumem.
*/
.geduc-faq.esta-em-abas .geduc-faq-group-label {
  display: none;
}

/*
  As abas de dia da previa. No React elas ficam a 40px do titulo da faixa e a
  24px da trilha (`tw-mt-space-8` e `tw-mb-space-6`); o 24px de baixo ja vem de
  `.geduc-day-tabs`.
*/
.geduc-schedule-preview .geduc-day-tabs {
  margin-top: var(--space-8, 40px);
}

/*
  ### CANALETA UMA VEZ SO ###

  `.geduc-home-section-head` traz a canaleta porque na faixa de palestrantes ele
  e filho direto da coluna da pagina. Na previa da programacao ele e filho de
  `.geduc-schedule-preview`, que JA esta na canaleta — e os 24px saiam de novo:
  o titulo "Prepare-se para viver..." nascia em x=401 contra os 377 do
  prototipo, desalinhado das abas de dia logo abaixo, que estao certas.
*/
.geduc-schedule-preview > .geduc-home-section-head {
  width: auto;
  margin-right: 0;
  margin-left: 0;
}

/* ---------- detalhe da atividade ---------- */
.geduc-activity-detail {
  margin: 0 auto var(--space-12, 80px);
  max-width: 800px;
  padding: var(--space-8, 40px) var(--container-gutter-mobile, 16px) 0;
}
@media (min-width: 769px) {
  .geduc-activity-detail {
    padding-right: var(--container-gutter, 24px);
    padding-left: var(--container-gutter, 24px);
  }
}

/* ---------- cabeçalho de faixa da Home ---------- */
/*
  Título à esquerda, botão à direita, empilhados abaixo de 900px — o mesmo
  arranjo que o protótipo usa nas faixas de programação e palestrantes.
*/
.geduc-home-section-head {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--space-12, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--space-7, 32px);
  margin-bottom: var(--space-8, 40px);
}
@media (max-width: 768px) {
  .geduc-home-section-head {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
@media (min-width: 769px) {
  .geduc-home-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.geduc-home-section-head-action {
  flex-shrink: 0;
  /* `sectionAction { width: 100% }` do prototipo. */
}
@media (max-width: 560px) {
  .geduc-home-section-head-action {
    width: 100%;
  }
}

/* ---------- jornada do participante ---------- */
.geduc-home-journey {
  /*
    A faixa fecha com 80px de respiro antes do FAQ. No prototipo isso e o recuo
    superior da propria secao de perguntas; aqui o FAQ e um widget sem recuo,
    entao quem cede o espaco e a faixa que termina.
  */
  margin-bottom: var(--space-12, 80px);
  padding: var(--space-12, 80px) 0;
  background: var(--color-brand-navy, #001548);
  color: var(--color-header-text, #e8f0f8);
}
.geduc-home-journey-container {
  width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter, 24px));
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--space-12, 80px);
  display: grid;
  align-items: start;
  /* Mesmo caso da grade do "Sobre": no prototipo e `clamp(48px, 7vw, 88px)`. */
  gap: clamp(var(--space-9, 48px), 7vw, 88px);
  margin-bottom: 0;
  /* 0.8fr / 1.2fr — o `grid-cols-journey` do protótipo. */
}
@media (max-width: 768px) {
  .geduc-home-journey-container {
    width: min(var(--container-max, 1152px), 100% - 2 * var(--container-gutter-mobile, 16px));
  }
}
@media (min-width: 1024px) {
  .geduc-home-journey-container {
    grid-template-columns: 0.8fr 1.2fr;
  }
}
.geduc-home-journey-accent {
  color: var(--color-brand-teal, #00a7be);
}
.geduc-home-journey-art {
  margin-top: var(--space-5, 20px);
}
.geduc-home-journey-art-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.geduc-home-journey-steps {
  display: grid;
  gap: var(--space-4, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 561px) {
  .geduc-home-journey-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
.geduc-home-journey-step {
  position: relative;
  min-height: 230px;
  /* O prototipo baixa para 200px em 560 — o card cheio ficava alto demais. */
  padding: var(--space-6, 24px);
  border: 1px solid var(--color-header-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-3, 12px);
  background: rgba(255, 255, 255, 0.05);
  /* Marca d'água: grande, atrás, e fora da árvore de acessibilidade. */
}
@media (max-width: 560px) {
  .geduc-home-journey-step {
    min-height: 200px;
  }
}
.geduc-home-journey-step-number {
  position: absolute;
  top: var(--space-4, 16px);
  right: var(--space-4, 16px);
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--font-family-display, inherit);
  font-size: var(--font-size-h1, 40px);
  font-weight: 700;
  line-height: 1;
}
.geduc-home-journey-step-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-2, 8px);
  background: var(--color-brand-teal, #00a7be);
  color: #fff;
  font-size: 22px;
}
.geduc-home-journey-step-title {
  margin: var(--space-7, 32px) 0 var(--space-2, 8px);
  font-size: var(--font-size-h5, 18px);
  font-weight: 700;
}
.geduc-home-journey-step-text {
  margin: 0;
  color: var(--color-header-muted, rgba(200, 216, 232, 0.6));
  font-size: var(--font-size-sm, 14px);
}

/*
  ### CARROSSEL DA HOME ###

  Na pagina inicial a previa da programacao e o destaque de palestrantes sao
  trilha horizontal; em `/programacao` e `/palestrantes` os mesmos cartoes sao
  grade. E a mesma diferenca do modulo React, que chama `<Carousel>` num ponto
  de uso e desenha a grade no outro (`pages/index.tsx:262` e `:302`).

  A diferenca NAO esta no ADT. Cada listagem continua com um markup so; o que
  muda e quem a le:

    `.geduc-trilha`        o ADT marca a lista como "isto PODE virar trilha"
    `.geduc-pagina-inicio` o tema marca a pagina (`portal_normal.ftl`)

  So onde as duas se encontram a grade vira carrossel. Um ADT, uma decisao, e
  nenhum template precisando saber em que pagina esta.

  A trilha e feita so com CSS: sem JavaScript a pessoa ainda arrasta, e todos
  os cartoes continuam no HTML — o buscador nao perde nada. O `js/carrossel.js`
  acrescenta apenas as setas, os pontos e o realce do item ativo, que sao
  inuteis sem JavaScript.

  Os valores sao os de `components/navigation/Carousel/Carousel.module.css` do
  prototipo, um a um.

  Sobre o seletor: `body.geduc-pagina-inicio` em vez de `.geduc-pagina-inicio`.
  A regra de grade em `_native.scss` tem duas classes; empatar em
  especificidade e deixar a ordem dos arquivos decidir e o tipo de detalhe que
  quebra meses depois, quando alguem reordena os imports.
*/
body.geduc-pagina-inicio .geduc-trilha {
  display: flex;
  gap: var(--space-5, 20px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  /* Barra de rolagem escondida — o utilitario `scrollbar-none` do Tailwind. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*
    `overflow-x: auto` sem `overflow-y` explicito faz o navegador calcular
    `overflow-y: auto` tambem. O realce do cartao ao passar o ponteiro cresce
    para fora e ficaria cortado. O recuo vertical da o respiro; a margem
    negativa do mesmo tamanho devolve o espaco, para o bloco ocupar a mesma
    altura de antes.
  */
  padding-block: var(--space-3, 12px);
  margin-block: calc(var(--space-3, 12px) * -1);
  /*
    ### O RECUO DA TRILHA E DA TRILHA, NAO DO BLOCO EM VOLTA ###

    `scroll-padding` diz onde o cartao encaixa, e e medido a partir da borda da
    area rolavel. Os dois recuos moram no mesmo elemento, sempre — e o que o
    prototipo faz com `padding-inline` e `scroll-padding-inline` iguais.

    Quatro pixels, e nao a canaleta: a trilha ja vive dentro de um bloco que a
    tem, e repetir os 24px empurrava o primeiro cartao para dentro em relacao ao
    titulo da faixa. Os 4px sao os do prototipo, e existem so para o realce do
    cartao nao encostar na borda da area rolavel.
  */
  padding-inline: 4px;
  scroll-padding-inline: 4px;
  /*
    Cartao dentro da trilha nao faz entrada por rolagem.

    `ADT_Palestrantes` marca todo cartao com `geduc-anima`, porque em
    `/palestrantes` ele e grade e entra escalonado — como no prototipo. Aqui a
    mesma lista e carrossel, e o `transform` pertence ao carrossel: os dois
    disputando a mesma propriedade deixariam o cartao preso a meio caminho.
  */
  /*
    Item inativo recuado — mas so depois que o JavaScript assume. Sem ele
    nenhum item receberia `.is-active` e a trilha inteira ficaria apagada.
  */
}
body.geduc-pagina-inicio .geduc-trilha::-webkit-scrollbar {
  display: none;
}
body.geduc-pagina-inicio .geduc-trilha > * {
  flex: 0 0 var(--w-carousel-card, 320px);
  width: var(--w-carousel-card, 320px);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /*
    O ultimo cartao encaixa pelo FIM, e nao pelo comeco.

    Com `scroll-snap-type: x mandatory` a trilha tem de parar num ponto de
    encaixe. Se todos os pontos forem inicios de cartao, a ultima posicao
    rolavel raramente e um deles: com quatro palestrantes de 320px numa
    trilha de 1152, os pontos sao 0, 340, 672… e o maximo e 196. Nao havia
    ponto alcancavel alem do zero, e toda rolagem suave era desfeita — a
    trilha voltava ao comeco, que e o defeito relatado.

    `end` no ultimo transforma a posicao final num ponto valido.
  */
  /*
    A transicao da biblioteca (`box-shadow`, `border-color`) e repetida aqui
    de proposito: esta regra tem especificidade maior e substituiria a lista
    inteira, apagando o realce de ponteiro do cartao.
  */
  transition: transform 320ms var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)), opacity 240ms ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.geduc-pagina-inicio .geduc-trilha > *:last-child {
  scroll-snap-align: end;
}
@media (max-width: 768px) {
  body.geduc-pagina-inicio .geduc-trilha > * {
    flex-basis: var(--w-carousel-card-mobile, 260px);
    width: var(--w-carousel-card-mobile, 260px);
  }
}
body.geduc-pagina-inicio .geduc-trilha > .geduc-anima {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
body.geduc-pagina-inicio .geduc-trilha.esta-vivo > * {
  opacity: 0.82;
  transform: scale(0.975);
  transform-origin: center;
  will-change: transform, opacity;
}
body.geduc-pagina-inicio .geduc-trilha.esta-vivo > .is-active {
  opacity: 1;
  transform: none;
}

/*
  A previa da programacao herda a canaleta de `faixa-home`. Na Home o recuo
  lateral passa para a trilha (acima); aqui sobram a largura maxima e a
  centragem, que continuam sendo do bloco.
*/
body.geduc-pagina-inicio .geduc-schedule-preview {
  padding-right: 0;
  padding-left: 0;
}

/*
  O destaque de palestrantes fecha com o mesmo respiro das outras faixas da
  Home. Na grade de `/palestrantes` esse espaco vem do recuo da faixa cinza, e
  por isso a regra e so aqui.

  O `:has()` FICA, mesmo depois de o titulo da secao ter entrado no mesmo widget
  da grade. Ele nao existe por causa da fronteira entre dois widgets — existe
  porque o alvo precisa ser o involucro, pelo motivo do comentario abaixo. Foi o
  `:has()` de ADJACENCIA da previa que saiu (`_native.scss`), e esse sim era
  fronteira entre widgets.
*/
body.geduc-pagina-inicio .portlet-boundary:has(.geduc-speakers-grid) {
  /*
    A margem vai no involucro do widget, e nao na trilha: as setas e os pontos
    sao irmaos da trilha e vem DEPOIS dela, entao margem na trilha empurraria os
    controles para baixo em vez de afastar a faixa seguinte. Foi o que aconteceu
    na primeira tentativa — 68px entre os cartoes e as setas, e nada entre a
    secao e a faixa navy.
  */
  margin-bottom: var(--space-12, 80px);
}

/*
  Sem bio no cartao da Home: o cartao para na altura do nome e dos temas, e a
  leitura completa acontece em `/palestrantes`. E o que o React faz passando
  `bio: null` so nesse ponto de uso.
*/
body.geduc-pagina-inicio .geduc-trilha .geduc-speaker-card-bio {
  display: none;
}

/*
  ### O CARTAO ACOMPANHA O MAIS ALTO DA TRILHA ###

  A macro carimba `h-100` no cartao, e o `.h-100` do Bootstrap e
  `height: 100% !important`. Numa grade isso funciona — a linha estica e os
  100% resolvem contra ela. Numa trilha `flex` de altura automatica, nao: os
  100% resolvem contra uma altura que os proprios cartoes definem, entao o
  cartao mais alto cresce sozinho e os vizinhos ficam com a altura antiga.

  Medido na Home, nos dois tipos de cartao que a trilha carrega:

  - palestrante com nome de duas linhas — 307px contra 257px, etiquetas a 50px
    de diferenca;
  - atividade com descricao contra atividade sem — 279px contra 251px.

  E o mesmo defeito, e por isso a regra vale para o filho da trilha, e nao para
  um tipo de cartao: o proximo componente que entrar na faixa herda a correcao
  em vez de repetir o problema. A `/programacao` nao precisa dela — la a grade e
  `grid`, e a linha estica sozinha.

  **O `!important` e para empatar com o do Bootstrap, e nao por especificidade.**
  Utilitario com `!important` nao se vence com seletor mais especifico — foi o
  que fez tres tentativas de seletor nao mudarem nada. A alternativa seria tirar
  o `h-100` da macro, que e vendorada e nao se edita.
*/
body.geduc-pagina-inicio .geduc-trilha > * {
  height: auto !important;
}

/* ---------- controles (desenhados por `js/carrossel.js`) ---------- */
.geduc-carrossel-controles {
  display: flex;
  gap: var(--space-5, 20px);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6, 24px);
  /*
    ### OS CONTROLES NAO SE ESCONDEM ###

    Ja se escondiam, quando a trilha nao tinha folga — a previa da programacao
    na Home tem dois cartoes que cabem inteiros, e a rolagem ali nao anda.
    Estava errado, por um motivo que o desenho deixa claro: **o ponto nao serve
    so para rolar, serve para escolher.** Clicar nele troca o item em destaque,
    e o destaque existe mesmo com tudo a vista — `opacity` e `scale` acima.
    Esconder tirava uma funcao que funcionava.

    E o prototipo (`components/navigation/Carousel/Carousel.tsx`) nao esconde
    nada: renderiza um ponto por item sempre, e so desabilita a seta na ponta.
    A seta desabilitada abaixo e esse contrato.
  */
}

/*
  `--surface-border` da menos de 1,5:1 sobre branco, abaixo do minimo de 3:1
  para borda de elemento interativo. `--surface-muted` ja e o cinza de texto
  secundario do Design System e passa de 4,5:1.
*/
.geduc-carrossel-seta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--surface-muted, #737373);
  border-radius: 50%;
  background: var(--color-white, #fff);
  color: var(--color-brand-navy, #001548);
  font-size: 20px;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.geduc-carrossel-seta:hover:not(:disabled) {
  background: var(--surface-alt, #fafafa);
}
.geduc-carrossel-seta:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 768px) {
  .geduc-carrossel-seta {
    display: none;
  }
}

.geduc-carrossel-pontos {
  display: flex;
  gap: 2px;
  align-items: center;
}

/*
  O botao e a area de toque (32px); o ponto visual vive num `span` proprio.
  Fazer os dois no mesmo elemento nao funciona com `box-sizing: border-box`
  global — o recuo come a medida declarada e o ponto some.
*/
.geduc-carrossel-ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.geduc-carrossel-ponto:hover .geduc-carrossel-ponto-visual {
  background-color: var(--color-neutral-700, #404040);
}

.geduc-carrossel-ponto-visual {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--surface-muted, #737373);
  transition: background-color 0.2s ease, width 0.2s ease;
}
.geduc-carrossel-ponto-visual.is-active {
  width: var(--w-dot-active, 22px);
  background-color: var(--color-brand-navy, #001548);
}

@media (prefers-reduced-motion: reduce) {
  body.geduc-pagina-inicio .geduc-trilha {
    scroll-behavior: auto;
  }
  body.geduc-pagina-inicio .geduc-trilha > * {
    transition: none;
  }
}
/*
	### PERGUNTAS FREQUENTES ###

	Aqui o tema sobrescreve a biblioteca, o que em geral e proibido — por isso
	vale dizer por que, uma vez, no comeco.

	A macro `geducFaq.category` monta a ficha de categoria com as utilitarias do
	Bootstrap (`btn btn-sm btn-primary` / `btn-outline-primary`). Isso funciona
	em portal cujo Bootstrap tem a paleta da marca; neste, `.btn-primary` e o
	azul de fabrica (#007bff), o raio e 3.2px e o texto sai em peso 400. O
	prototipo pede pilula teal, 48px de altura e peso 700. A biblioteca e
	compartilhada com outros projetos e nao vai mudar por causa deste; a
	correcao e do tema.

	Os seletores tem duas classes de proposito: `geduc-components.css` carrega
	DEPOIS desta folha, e com uma classe so as regras dela venceriam por ordem.
	O unico `!important` esta comentado no lugar em que aparece.
*/
/* ---------- fichas de categoria ---------- */
/*
	A macro poe `mb-0` no `<ul>`, e o `.mb-0` do Bootstrap e `!important`. Isso
	mata o `margin-bottom: var(--space-8)` que a propria biblioteca declara
	logo abaixo. Nao ha especificidade que vença um `!important` sem outro.
*/
.geduc-faq .geduc-faq-categories {
  margin-bottom: var(--space-8, 40px) !important;
  gap: var(--space-2, 8px);
  /*
  	O vao AUMENTA em tela pequena, nao diminui: as pilhas de categoria sao
  	botoes compactos, e o prototipo abre de 8 para 12px justamente para o alvo
  	de toque nao encostar no vizinho (`FAQ.module.css`, corte de 600).
  */
}
@media (max-width: 600px) {
  .geduc-faq .geduc-faq-categories {
    gap: var(--space-3, 12px);
  }
}

.geduc-faq .geduc-faq-category {
  min-height: 48px;
  padding: 0 var(--space-6, 24px);
  border: 1px solid var(--color-primary-dark, #007889);
  border-radius: var(--radius-pill, 24px);
  background: transparent;
  color: var(--color-primary-dark, #007889);
  font-size: var(--text-body, 14px);
  font-weight: 700;
  line-height: 1;
}
.geduc-faq .geduc-faq-category:hover, .geduc-faq .geduc-faq-category:focus-visible {
  border-color: var(--color-primary-dark, #007889);
  background: var(--color-primary-light, #e6f6f9);
  color: var(--color-primary-dark, #007889);
}

/*
	A ficha ativa. `btn-primary` e a classe que `js/abas.js` liga e desliga ao
	trocar de aba — e tambem a que o ADT emite no carregamento, entao o estado
	inicial e o depois do clique passam pelo mesmo caminho.
*/
.geduc-faq .geduc-faq-category.btn-primary {
  border-color: transparent;
  background: var(--color-primary-dark, #007889);
  color: var(--color-white, #fff);
}
.geduc-faq .geduc-faq-category.btn-primary:hover, .geduc-faq .geduc-faq-category.btn-primary:focus-visible {
  border-color: transparent;
  background: var(--color-primary-hover, #006677);
  color: var(--color-white, #fff);
}

/* ---------- a pergunta ---------- */
/*
	O icone antes da pergunta.

	A macro `geducFaq.item` aceita um parametro `icon`, mas nao o emite no
	`<summary>` — so o titulo e o chevron chegam ao HTML. Como a biblioteca e
	vendorada, o icone e desenhado aqui, em dois pseudo-elementos: `::before` e
	a caixa de 36px, `::after` e o tracado por cima dela.

	Dois, e nao um: a caixa precisa de `background-color` proprio e o tracado
	precisa de `mask-image` sobre `background-color: currentColor`. Um
	pseudo-elemento so nao faz as duas coisas.

	Qual tracado aparece vem da classe que o ADT poe em cada `<details>`
	(`geduc-faq-item-general`, `-registration`, ...), e o desenho sai do mapa de
	`base/_icones.scss` — o mesmo de que as classes `la-*` se servem.
*/
.geduc-faq .geduc-faq-question {
  position: relative;
  gap: 14px;
  padding: var(--space-5, 20px) 0;
}
.geduc-faq .geduc-faq-question::before {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-2, 8px);
  background: var(--surface-alt, #f5f5f5);
  transition: background var(--transition-fast, 0.12s) ease;
}
.geduc-faq .geduc-faq-question::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  width: 18px;
  height: 18px;
  background-color: var(--surface-text, #171717);
  transform: translateY(-50%);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Aberta: a caixa acende em teal, como no `questionOpen` do prototipo. */
.geduc-faq .geduc-faq-item[open] > .geduc-faq-question::before {
  background: var(--color-primary-light, #e6f6f9);
}
.geduc-faq .geduc-faq-item[open] > .geduc-faq-question::after {
  background-color: var(--color-primary, #007889);
}

.geduc-faq-item-general > .geduc-faq-question::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%2F%3E%3Cpath%20d%3D%22M20%202v4%22%2F%3E%3Cpath%20d%3D%22M22%204h-4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%2F%3E%3Cpath%20d%3D%22M20%202v4%22%2F%3E%3Cpath%20d%3D%22M22%204h-4%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.geduc-faq-item-registration > .geduc-faq-question::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M9%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Cpath%20d%3D%22M16%203.128a4%204%200%200%201%200%207.744%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M9%203a4%204%200%201%201%200%208%204%204%200%200%201%200-8z%22%2F%3E%3C%2Fsvg%3E");
}

.geduc-faq-item-enrollment > .geduc-faq-question::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3Cpath%20d%3D%22M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2018h.01%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3Cpath%20d%3D%22M16%2018h.01%22%2F%3E%3Cpath%20d%3D%22M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E");
}

.geduc-faq-item-certificate > .geduc-faq-question::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E");
}

.geduc-faq-item-venue > .geduc-faq-question::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Cpath%20d%3D%22M12%207a3%203%200%201%201%200%206%203%203%200%200%201%200-6z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Cpath%20d%3D%22M12%207a3%203%200%201%201%200%206%203%203%200%200%201%200-6z%22%2F%3E%3C%2Fsvg%3E");
}

/*
	O chevron. A biblioteca desenha em teal e 1em; o prototipo usa 20px em
	cinza, e so escurece com a pergunta aberta.
*/
.geduc-faq .geduc-faq-chevron {
  width: 20px;
  height: 20px;
  color: var(--surface-muted, #6b6b6b);
}

.geduc-faq .geduc-faq-item[open] > .geduc-faq-question .geduc-faq-chevron {
  color: var(--color-neutral-700, #404040);
}

/* A resposta alinha com o texto da pergunta: 36px de caixa mais 14px de vao. */
.geduc-faq .geduc-faq-answer {
  padding-left: 50px;
}

@media (max-width: 600px) {
  .geduc-faq .geduc-faq-answer {
    padding-left: 0;
  }
}
/* ---------- a secao de FAQ na Home ---------- */
/*
	O titulo desta faixa e o unico centralizado da Home — nas outras duas
	(previa e palestrantes) ele fica a esquerda, com o botao a direita. Nao e
	inconsistencia: no prototipo o FAQ nao e uma faixa larga, e uma coluna de
	720px, e um titulo alinhado a esquerda de 1152px ficaria pendurado no vazio
	sobre uma lista bem mais estreita.

	No prototipo esse titulo vem de dentro do proprio componente de FAQ
	(`heading`). Aqui ele e um widget separado — o mesmo "Titulo de Secao" das
	outras faixas —, porque quem edita precisa poder mudar o texto sem tocar em
	template. Entao a ligacao entre os dois e feita por `:has()`: "o widget
	imediatamente antes do FAQ". Nenhum dos dois precisa saber do outro, e trocar
	o titulo de lugar nao quebra nada.
*/
body.geduc-pagina-inicio .portlet-boundary:has(+ .portlet-boundary .geduc-faq) {
  /*
  	E a escala vem do FAQ, nao das outras faixas.

  	No prototipo este titulo e o `.title` do proprio componente de FAQ
  	(`FAQ.module.css:14-20`), que tem escala propria: `clamp(28px, 4vw, 40px)`
  	em peso 900 e entrelinha 1,15. As outras faixas da Home usam
  	`.sectionHeading h2` — `--text-h1` em peso 700 e entrelinha 1,1.

  	Como aqui o titulo e um widget de "Titulo de Secao" reaproveitado, ele
  	chegava com a escala das outras: 39px em peso 700. A diferenca de tamanho
  	e de 1px e passa, mas a de peso nao — 700 contra 900 muda o desenho da
  	palavra.
  */
}
body.geduc-pagina-inicio .portlet-boundary:has(+ .portlet-boundary .geduc-faq) .geduc-home-section-head {
  display: block;
  max-width: 720px;
  /* O respiro ate as fichas e o `--space-8` que o proprio FAQ ja reserva. */
  margin-bottom: 0;
  text-align: center;
}
body.geduc-pagina-inicio .portlet-boundary:has(+ .portlet-boundary .geduc-faq) .geduc-section-heading,
body.geduc-pagina-inicio .portlet-boundary:has(+ .portlet-boundary .geduc-faq) .geduc-section-heading-description {
  margin-right: auto;
  margin-left: auto;
}
body.geduc-pagina-inicio .portlet-boundary:has(+ .portlet-boundary .geduc-faq) .geduc-section-heading-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.15;
}

/*
	E o recuo de cima do FAQ some: na Home o titulo ja esta logo acima, e os
	72px da biblioteca abririam um vao que o prototipo nao tem.
*/
body.geduc-pagina-inicio .geduc-faq {
  padding-top: var(--space-8, 40px);
  /*
  	E o fecho embaixo e 96px, nao 72.

  	No prototipo esse recuo e o unico espaco entre a ultima pergunta e o
  	banner de chamada — `.wrapper` fecha com 96px e a secao do banner nao tem
  	margem nenhuma (`FAQ.module.css:2-6` e `CtaBanner.module.css:1`). Aqui
  	eram 72px do FAQ mais 80px de margem do banner: 152px onde a referencia
  	tem 96. A margem do banner sai junto com esta linha.
  */
  padding-bottom: 96px;
}

/* ---------- chamada do fim da pagina ---------- */
/*
	So a pagina /faq tem esta chamada; a secao da Home nao (decisao do desenho:
	a Home ja tem a sua propria faixa de inscricao logo abaixo). Quem decide e o
	ADT, nao o CSS.

	A biblioteca ja pinta o painel navy. O que falta e o halo teal do centro,
	que no prototipo e um `::before` com gradiente radial.
*/
/*
	O titulo e a descricao da chamada.

	`geducFaq.cta` monta o titulo com `font-weight-bold` do Bootstrap, que e
	`font-weight: 700 !important` — nao ha especificidade que o vença. O
	prototipo pede 900 (`FAQ.module.css:180`), e a diferenca entre 700 e 900 na
	Atyp Display, num titulo de 32px em teal, se ve de longe. E o segundo
	`!important` deste arquivo, pela mesma razao do primeiro: o valor que ele
	desfaz tambem e `!important` e vem de markup vendorado.

	A entrelinha e a descricao seguem a referencia: la nenhuma das duas declara
	`line-height`, e a descricao e 16px — o portal herdava 1,6 e 14px do corpo.
*/
.geduc-faq-cta-title {
  /* stylelint-disable-next-line declaration-no-important */
  font-weight: 900 !important;
  line-height: normal;
}

.geduc-faq-cta-description {
  font-size: 16px;
  line-height: normal;
  margin-bottom: 28px;
}

.geduc-faq-cta {
  position: relative;
  overflow: hidden;
}
.geduc-faq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0, 167, 190, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.geduc-faq-cta > * {
  position: relative;
  z-index: 1;
}

/*
	### A CANALETA DUPLA DO FAQ EM /faq ###

	No prototipo a pagina `/faq` monta o bloco DENTRO de `.container`, e o
	`.wrapper` do proprio FAQ ainda soma 24px de recuo por dentro
	(`FAQ.module.css`: `max-width: 720px; padding: 72px 24px 96px`, sem variante
	mobile). O texto fica com 40px de recuo de cada lado em tela estreita.

	Aqui o bloco e widget de primeiro nivel: so o recuo dele insere o conteudo, e
	a coluna saia 48px mais larga que a de la em qualquer largura abaixo de ~768px
	— 373px contra 325px numa janela de 390. Acima disso o teto de 720px domina e
	os dois batem em 672px, que foi por isso que a conferencia de desktop nao viu.

	Escopado em `/faq`: na Home o prototipo NAO tem a canaleta dupla, porque ali o
	FAQ e filho direto da faixa, sem `.container` em volta.
*/
@media (max-width: 768px) {
  body.geduc-pagina-faq .geduc-faq {
    padding-right: calc(var(--container-gutter-mobile, 16px) + var(--space-6, 24px));
    padding-left: calc(var(--container-gutter-mobile, 16px) + var(--space-6, 24px));
  }
}

/*
  Ate o `abas.js` assumir, so o primeiro grupo aparece.

  Sem isto os cinco pintam empilhados e quatro somem quando o script do fim do
  `<body>` roda — medido em ~280 ms na Home e ~220 ms no FAQ. A marca some da
  regra sozinha quando o script monta, e dali em diante quem manda e o `hidden`.

  Sem JavaScript nao ha `.js` na raiz, a regra nao aplica e os cinco continuam
  visiveis: e o que quem nao pode trocar de aba precisa ver.
*/
.js .geduc-faq:not([data-geduc-abas-pronto]) .geduc-faq-group:not(:first-of-type) {
  display: none;
}

/*
	### PROGRAMAÇÃO ###

	A biblioteca desenha o bloco de horário e o card de atividade, e nas medidas
	gerais bate com o protótipo. O que não bate são os detalhes desta página, e
	quase todos vêm de a biblioteca ser compartilhada:

	- o card de atividade herda `h4` do Clay no título (24px onde o protótipo
	  pede 16px) e monta a capa de horário em coluna, com um traço de 1px como
	  separador — no protótipo a capa é tipografia grande em linha, com a data
	  embaixo e duas formas geométricas ao fundo;
	- o rótulo do grupo herda `h5`, e sai em 20px escuro onde o protótipo usa
	  12px em caixa alta e cinza;
	- a barra colorida de tipo na lateral existe na variante `schedule`, não na
	  `card` — no protótipo o tipo aparece só na pílula e na cor da capa;
	- a grade usa `auto-fit`, que estica dois cards por cima da largura toda; o
	  protótipo usa `auto-fill`, que mantém a coluna em 320px.

	Todos os seletores levam uma classe a mais do que a regra da biblioteca:
	`geduc-components.css` carrega DEPOIS desta folha, e empate de
	especificidade seria perdido por ordem.
*/
/* ---------- barra de dia e busca ---------- */
/*
	O "Selecionar" do cartao.

	Peso de link, e nao de botao: no prototipo ele e um `<button>` estilizado
	como link (`.ctaLink`), alinhado a direita do rodape, e a seta "respira" no
	hover. Aqui e uma ancora de verdade — o destino e outra pagina —, e o
	desenho e o mesmo.
*/
.geduc-activity-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin-left: auto;
  color: var(--color-primary, #007889);
  font-size: var(--text-sm, 13px);
  font-weight: var(--font-weight-bold, 700);
  text-decoration: none;
  transition: color var(--transition-fast, 0.12s ease), gap var(--transition-fast, 0.12s ease);
}
.geduc-activity-card-cta:hover, .geduc-activity-card-cta:focus {
  color: var(--color-primary-dark, #005566);
  gap: var(--space-2, 8px);
}
.geduc-activity-card-cta:focus-visible {
  outline: 2px solid var(--color-primary, #007889);
  outline-offset: 2px;
  border-radius: var(--radius-1, 4px);
}

/*
	A contagem de vagas, a esquerda do rodape.

	O `margin-left: auto` do CTA e que empurra os dois para as pontas — por isso
	aqui nao ha `justify-content`: o rodape nem sempre tem os dois filhos, e
	`space-between` com um filho so o jogaria para a esquerda em vez de manter o
	alinhamento que cada estado pede.

	`--text-2xs` e o mesmo tamanho do `Seats` do React
	(`packages/modules/src/geduc/ui/ActivityCard/parts.tsx`).
*/
.geduc-activity-card-seats {
  color: var(--color-neutral-500, #6b7280);
  font-size: var(--text-2xs, 11px);
  font-weight: 600;
}

/* Poucas vagas chama atencao sem virar alerta: e informacao, nao erro. */
.geduc-activity-card-seats-last {
  color: var(--color-gold-text, #8a5e0d);
}

/*
	O rotulo dos estados que substituem o par vagas + acao.

	Italico como no `CardFooter` do React, e cinza: o cartao inteiro ja esta em
	`grayscale`, e uma cor viva aqui brigaria com isso.

	A variante `-acao` e o esgotado, que **e um `<button>`** porque continua
	clicavel (RN50). Ela zera a aparencia de botao do navegador e some com o
	cursor de texto — o que muda entre os dois estados e o cursor e o foco, nao
	a cor.
*/
.geduc-activity-card-status-inline {
  color: var(--color-neutral-500, #6b7280);
  font-size: var(--text-xs, 12px);
  font-style: italic;
  font-weight: 600;
}

.geduc-activity-card-status-acao {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.geduc-activity-card-status-acao:hover, .geduc-activity-card-status-acao:focus {
  color: var(--color-neutral-600, #4b5563);
}
.geduc-activity-card-status-acao:focus-visible {
  outline: 2px solid var(--color-primary, #007889);
  outline-offset: 2px;
  border-radius: var(--radius-1, 4px);
}

/* ---------- card de atividade, variante `card` ---------- */
/*
	Sem a barra de tipo na lateral. Na variante `card` o tipo já aparece duas
	vezes — na cor da capa e na pílula — e a terceira desalinha o card com os
	vizinhos, porque a barra come 3px da largura do conteúdo.
*/
.geduc-activity-card.geduc-activity-card-card {
  border-left: 1px solid var(--surface-border, #e5e5e5);
  /*
  	O corpo do protótipo é `padding: 16px 18px 18px` com `gap: 7px`. A
  	biblioteca não emite esse corpo: manda cabeçalho, corpo e rodapé soltos,
  	cada um com `margin: 16px 20px 0`. As regras abaixo remontam a mesma
  	medida por fora, para o cartão da prévia ficar igual ao da programação.
  */
  padding-bottom: 18px;
  /* A macro carimba o `shadow-sm` do Bootstrap (`0 2px 4px`); a do design é
     mais rasa, e e a que o cartao da programacao usa. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  /* O espaço que sobra cai antes do rodapé, e não depois dele — assim os
     cartões da mesma linha alinham vagas e ação. */
  /* Uma linha por item, como no protótipo: sala e palestrante empilham. */
}
.geduc-activity-card.geduc-activity-card-card > .geduc-activity-card-header,
.geduc-activity-card.geduc-activity-card-card > .geduc-activity-card-body,
.geduc-activity-card.geduc-activity-card-card > .geduc-activity-card-footer {
  margin-right: 18px;
  margin-left: 18px;
}
.geduc-activity-card.geduc-activity-card-card > .geduc-activity-card-body {
  margin-top: 7px;
}
.geduc-activity-card.geduc-activity-card-card > .geduc-activity-card-footer {
  margin-top: auto;
  padding-top: 12px;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-meta {
  flex-direction: column;
  gap: 3px;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-meta > li {
  gap: 5px;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-meta .las {
  font-size: 12px;
}

/*
	A capa.

	A ordem no HTML é data, início, separador, fim; no protótipo é o horário
	numa linha e a data embaixo. Em vez de pedir outra macro, a data vai para o
	fim por `order` e ocupa a linha inteira — o resultado é o mesmo e a
	marcação continua sendo a que a biblioteca emite.
*/
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time {
  position: relative;
  overflow: hidden;
  flex-flow: row wrap;
  gap: 6px 5px;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  min-height: 130px;
  padding: 0;
}

/*
	Retângulo girado e círculo dourado, as duas formas do fundo da capa. São
	decoração pura: não há como pedi-las à macro, e não há nada a anunciar.
*/
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time::before, .geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time::before {
  right: -28px;
  bottom: -28px;
  width: 110px;
  height: 110px;
  border: 2px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transform: rotate(22deg);
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time::after {
  top: -18px;
  left: -18px;
  width: 72px;
  height: 72px;
  border: 2px solid rgba(244, 170, 24, 0.14);
  border-radius: 50%;
}

.geduc-activity-card.geduc-activity-card-card {
  /*
  	A biblioteca desenha o separador como um traço vertical de 1px, para a
  	capa em coluna. Em linha ele volta a ser o que a macro escreveu: um
  	travessão.
  */
  /*
  	A descrição do cartão, que só a prévia da Home mostra.

  	A classe é nossa: a biblioteca não tem macro para ela. Por isso os recuos
  	laterais também vêm daqui — ela aplica `margin-inline` só aos filhos que
  	conhece (cabeçalho, corpo, meta, rodapé), e um filho estranho nasceria
  	colado na borda do cartão.

  	Duas linhas e corta: o cartão tem altura fixa na trilha, e um texto longo
  	empurraria o rodapé para fora.
  */
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time-start,
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time-end {
  position: relative;
  z-index: 1;
  color: var(--color-white, #fff);
  font-family: var(--font-family-display);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-time-separator {
  display: inline;
  align-self: center;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-sm, 13px);
  font-weight: 400;
  line-height: normal;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-date {
  position: relative;
  z-index: 1;
  order: 2;
  width: 100%;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-3xs, 10px);
  letter-spacing: 0.12em;
  line-height: normal;
  text-align: center;
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-title {
  font-size: var(--text-h5, 16px);
}
.geduc-activity-card.geduc-activity-card-card .geduc-activity-card-desc {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--space-2, 8px) var(--space-5, 20px) 0;
  color: var(--color-neutral-400, #a3a3a3);
  font-size: var(--text-sm, 13px);
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*
	Cores da capa por tipo. A biblioteca escolheu outra paleta: azul claro na
	palestra, roxo na oficina e verde chapado na abertura. O protótipo usa o
	gradiente da marca na palestra, magenta na oficina e navy→coral→dourado na
	abertura — quatro classes no seletor porque a regra da biblioteca já tem
	três e carrega depois.
*/
.geduc-activity-card.geduc-activity-card-card.geduc-activity-card-type-palestra .geduc-activity-card-time {
  background: var(--gradient-brand-accent);
}

.geduc-activity-card.geduc-activity-card-card.geduc-activity-card-type-oficina .geduc-activity-card-time,
.geduc-activity-card.geduc-activity-card-card.geduc-activity-card-type-workshop .geduc-activity-card-time {
  background: var(--gradient-graphic-magenta);
}

.geduc-activity-card.geduc-activity-card-card.geduc-activity-card-type-abertura .geduc-activity-card-time {
  background: linear-gradient(135deg, var(--color-brand-navy, #001548) 0%, var(--color-graphic-coral, #ee5a67) 62%, var(--color-brand-gold, #f4aa18) 100%);
}

/* ---------- nada encontrado ---------- */
/*
	O diálogo do tema — hoje só a explicação de "Vagas esgotadas".

	Desenho do `Dialog` do protótipo: caixa branca centrada, canto arredondado,
	título, uma frase e um botão só. O `<dialog>` nativo entrega o cerco de foco,
	a tecla Esc e o `::backdrop`; aqui fica apenas a aparência.

	A regra `:not([open])` existe porque o navegador esconde o `<dialog>` fechado
	com `display: none`, e qualquer `display` declarado fora dela venceria essa
	regra do user agent — o diálogo apareceria na página, aberto, para todo
	mundo. Já aconteceu em outro tema.
*/
dialog.geduc-dialogo {
  max-width: min(420px, 100vw - var(--space-8, 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-3, 12px);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
}
dialog.geduc-dialogo::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.geduc-dialogo-caixa {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-6, 24px);
  text-align: center;
}

.geduc-dialogo-titulo {
  margin: 0;
  color: var(--color-neutral-900, #111827);
  font-size: var(--text-lg, 18px);
  font-weight: 700;
}

.geduc-dialogo-texto {
  margin: 0;
  color: var(--color-neutral-600, #4b5563);
  font-size: var(--text-sm, 13px);
  line-height: 1.5;
}

/* O botão ocupa a largura da caixa, como no protótipo: é a única saída. */
.geduc-dialogo-acao {
  align-self: stretch;
  margin-top: var(--space-2, 8px);
}

/*
	### ACESSIBILIDADE ###

	As regras de RAIZ deste arquivo viviam so no `addBase` de
	`client-extensions/packages/config/tailwind.config.ts`, isto e, so no CSS do
	bundle React. Em pagina do portal sem widget — Inicio, Sobre, Programacao,
	Palestrantes, FAQ, Regulamento, entrada — o bundle nao carrega: sublinhar
	links e tamanho de fonte nao faziam NADA, e a sobrescrita de tokens na raiz
	nao acontecia. Respondiam so as 18 regras por componente de
	`geduc-components.css`, o que dava uma pagina em contraste pela metade.

	### Por que `html:root`

	`:root[data-a11y-contrast]` (0,2,0) ja vence `:root` (0,1,0) por
	especificidade, independente de ordem — o `html` na frente e SEGURO, nao
	necessidade. A biblioteca e vendorada por `sea-li add-ftl`, ja tem 18 regras
	com esse seletor, e carrega DEPOIS do tema (ver a ordem da cascata no
	`portal_normal.ftl`). Se uma reimportacao trouxer um bloco de tokens com o
	mesmo seletor, ele empata e vence pela ordem — e o contraste para de
	funcionar sem que nada quebre visivelmente em revisao. Um seletor de tipo a
	mais custa nada e fecha o caminho.

	Importado por ultimo em `_custom.scss`: precisa vir depois de
	`base/_tokens.scss`, de onde sai `--surface-focus`.
*/
/* ---------- os tokens, em alto contraste ---------- */
html:root[data-a11y-contrast] {
  --surface-bg: #ffffff;
  --surface-alt: #ffffff;
  --surface-border: #000000;
  --surface-text: #000000;
  --surface-muted: #000000;
  --surface-focus: #000000;
  /*
  	#8c5d0d, e nao o dourado de marca: #f4aa18 da ~1,98:1 sobre branco e
  	ficaria ilegivel justamente no modo que existe para maximizar leitura.
  	Mesmos valores do preset Tailwind e do `tokens.css` do prototipo.
  */
  --color-primary: #8c5d0d;
  --color-primary-hover: #6b4700;
  --color-primary-active: #522f00;
  --color-primary-light: #fff3da;
}

/* ---------- sublinhar links ---------- */
/*
	(0,2,2), o que vence as regras de `text-decoration: none` do tema e da
	biblioteca — todas em classe simples ou dupla, nenhuma com `!important`.

	Sublinha tambem o link com cara de botao. E o comportamento do prototipo e
	do `addBase` que sai daqui; se o desenho pedir excecao,
	`:not([class*="geduc-btn"])` resolve sem perder a briga de especificidade.
*/
html:root[data-a11y-underline-links] a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- tamanho da fonte ---------- */
/*
	`zoom`, e nao `font-size`: tema e biblioteca escrevem quase tudo em `px` e
	em `clamp(px, vw, px)`, entao so reescalar a pagina inteira tem efeito
	visivel em tudo. Reescrever a escala em `rem` exigiria mexer na biblioteca,
	que e vendorada.

	Dois custos conhecidos, e nenhum deles quebra a pagina:

	- as unidades de viewport sao resolvidas contra a viewport NAO ampliada, e
	  ha quatro `100vh`/`100dvh` no tema (`_wrapper.scss`, `_login.scss`). A
	  1,3 elas medem 130% da area visivel e sobra rolagem;
	- o Firefox so implementou `zoom` na versao 126. Em versao anterior o
	  tamanho de fonte simplesmente nao faz efeito, e nao ha aviso. Medido em
	  15/09/2026: Chromium 151 e Firefox 153 escalam (1,33x e 1,32x no
	  `largest`), e o caso `@cascata` da suite roda nos dois.

	WebKit nao foi medido: o binario do Playwright baixa, mas faltam `libgtk-4`,
	`libgstcodecparsers` e `libavif` na maquina, e instalar biblioteca de sistema
	nao e coisa que a suite deva exigir de quem clona o repositorio.

	Falta de medicao, e nao motor sem a propriedade — a revisao leu a ausencia
	como "Safari ignora, e o recurso nao faz nada la". `zoom` nasceu no IE e o
	WebKit a adotou cedo; o Firefox foi o ultimo a chegar. O binario em disco
	traz `Element.currentCSSZoom`, a API que a especificacao define JUNTO da
	propriedade — motor que nao a implementasse nao teria porque expor a leitura
	dela. Trocar por `font-size: 130%` na raiz, como se sugeriu, nao seria um
	resguardo: tema e biblioteca escrevem em `px`, e e essa a razao de a escala
	ser `zoom` (primeiro paragrafo). O fallback nao mudaria pixel nenhum — so
	pareceria cobertura.

	`position: fixed` esta OK: o bloco continua sendo a viewport, expressa no
	mesmo espaco ampliado. E por isso que o painel abaixo se dimensiona por
	`inset`, e nunca por `100dvh` como o CSS do prototipo faz no breakpoint
	estreito — ali o fim do painel ficaria fora da tela, sem como rolar ate ele.
*/
html:root[data-a11y-font-size=large] {
  zoom: 1.15;
}

html:root[data-a11y-font-size=largest] {
  zoom: 1.3;
}

/* ---------- destaque da chamada final ---------- */
/*
	O ciano do destaque vira dourado no alto contraste, como no prototipo
	(`CtaBanner.module.css:60`): a paleta de contraste troca o fundo do banner, e
	o ciano deixaria de ter a sobreposicao escura que o sustenta.
*/
html:root[data-a11y-contrast] .geduc-cta-banner .geduc-destaque {
  color: #ffd700;
}

/* ---------- foco visivel (RNF03) ---------- */
/*
	Global de proposito, como era no `addBase` — e como ja acontecia em
	qualquer pagina com widget React, porque o bundle roda em light DOM e a
	regra dele alcancava o documento inteiro. Nunca `outline: none`.
*/
*:focus-visible {
  outline: 3px solid var(--surface-focus);
  outline-offset: 2px;
}

html:root[data-a11y-contrast] *:focus-visible {
  outline: 3px solid #000000;
}

/*
	O aviso de atencao em alto contraste.

	O prototipo trata o `Notice` no mesmo lugar em que trata os demais
	(`Notice.module.css`): fundo branco e texto preto. A borda de 2px que
	acompanhava estes tokens saiu junto com a grade nativa — o unico aviso que
	a usava era o dela, e o `Notice` do bundle desenha o proprio contorno.
*/
html:root[data-a11y-contrast] {
  --color-warning-bg: #ffffff;
  --color-warning-text: #000000;
}

/* ---------- movimento reduzido ---------- */
/*
	`_animacao.scss` cobre as entradas por rolagem e `anima.js` confere em
	JavaScript, mas a transicao de componente da biblioteca e do tema continuava
	rodando em pagina sem React. Vem do mesmo `addBase`.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ---------- o menu ---------- */
/*
	45: acima da pilha do cabecalho (40) e abaixo do menu de telas estreitas
	(50), do link de pular (60), da barra de controle do portal (989) e do menu
	de acoes do widget em edicao (1000). O menu de telas estreitas cobrir o
	gatilho e proposital: ele ja prende o foco, e dois dialogos disputando a
	tela e defeito.
*/
/*
	44px, e nao os 40 e 36 do prototipo. Alvo de toque minimo e requisito
	(RNF08, WCAG 2.5.8), e a barra que este menu substitui ja tinha escolhido 44.
*/
/*
	### VISIBILIDADE SEM DEPENDER DE JAVASCRIPT ###

	O menu nao funciona sem JavaScript, e controle morto na tela e pior que
	controle ausente — mas esconder por CSS que depende de JS custou dois
	defeitos antes de esta versao:

	1. `.js .geduc-a11y` — a SPA reescreve o `class` do `<html>` e leva embora a
	   classe `js` que o `portal_normal.ftl` carimba na carga real. O menu sumia
	   da segunda pagina em diante e so voltava com F5.
	2. atributo carimbado pelo proprio script — corrigia o item 1, mas o script
	   do fim do `<body>` so reexecuta depois da troca de conteudo: media 5
	   quadros (~90ms) com o menu ausente a cada navegacao.

	Quem responde a pergunta certa e `<noscript>`: o `<style>` que ele embrulha
	so e aplicado quando scripting esta DESLIGADO. Ver `acessibilidade.ftl`.
	Com JavaScript ligado nao ha gate nenhum, portanto nao ha janela.

	O preco e um intervalo curto, na primeira carga, em que o gatilho aparece
	antes de o script ligar o clique. E o mesmo de todo controle do tema — o
	hamburguer e as abas tambem so respondem depois do fim do `<body>` — e vale
	menos que piscar a cada navegacao.
*/
.geduc-a11y__gatilho {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(26, 32, 53, 0.55);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--shadow-lg);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  transition: background var(--dur-quick) ease, transform var(--dur-quick) ease;
}
.geduc-a11y__gatilho:hover {
  background: rgba(26, 32, 53, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
}
.geduc-a11y__gatilho:active {
  transform: scale(0.94);
}

.geduc-a11y__painel {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 45;
  width: min(320px, 100vw - 40px);
  padding: var(--space-5);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-3);
  background: var(--surface-bg);
  box-shadow: var(--shadow-lg);
  color: var(--surface-text);
}

.geduc-a11y__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.geduc-a11y__titulo {
  margin: 0;
  color: var(--surface-text);
  font-size: var(--text-h5);
  font-weight: var(--font-weight-bold);
}

.geduc-a11y__fechar {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--surface-muted);
  cursor: pointer;
  font-size: 18px;
  transition: background var(--dur-quick) ease;
}
.geduc-a11y__fechar:hover {
  background: var(--surface-alt);
}

.geduc-a11y__fonte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: var(--space-2);
}

.geduc-a11y__rotulo {
  color: var(--surface-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.geduc-a11y__fonte-grupo {
  display: flex;
  gap: 4px;
}

.geduc-a11y__fonte-botao {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-2);
  background: var(--surface-bg);
  color: var(--surface-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  transition: background var(--dur-quick) ease, border-color var(--dur-quick) ease;
  /*
  	O estado ligado nao e so cor: a borda muda junto. Estado comunicado so
  	por cor e o que o requisito proibe, e aqui o `aria-pressed` ja diz para
  	quem usa leitor de tela — falta quem enxerga e nao distingue matiz.
  */
}
.geduc-a11y__fonte-botao--media {
  font-size: 18px;
}
.geduc-a11y__fonte-botao--grande {
  font-size: 22px;
}
.geduc-a11y__fonte-botao:hover {
  background: var(--surface-alt);
}
.geduc-a11y__fonte-botao[aria-pressed=true] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.geduc-a11y__lista {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: var(--space-2);
  list-style: none;
}

.geduc-a11y__item {
  border-top: 1px solid var(--surface-border);
}
.geduc-a11y__item:first-child {
  border-top: 0;
}

.geduc-a11y__opcao {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  margin: 0;
  gap: var(--space-4);
  cursor: pointer;
}

.geduc-a11y__opcao-titulo {
  display: block;
  color: var(--surface-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.geduc-a11y__opcao-descricao {
  display: block;
  margin-top: 2px;
  color: var(--surface-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.geduc-a11y__caixa {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ---------- o proprio menu, em alto contraste ---------- */
html:root[data-a11y-contrast] .geduc-a11y__gatilho {
  border-color: #fff;
  background: #000;
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
  -webkit-backdrop-filter: none;
}
html:root[data-a11y-contrast] .geduc-a11y__gatilho:hover {
  border-color: #fff;
  background: #000;
}
html:root[data-a11y-contrast] .geduc-a11y__gatilho:focus-visible {
  outline-color: #fff;
}

@media (max-width: 520px) {
  .geduc-a11y__gatilho {
    right: 16px;
    bottom: 16px;
  }
  /*
  	Caixa por `inset`, e nao por `max-height: calc(100dvh - 96px)` como o
  	prototipo: sob `zoom: 1.3` a unidade de viewport rende 130% da area
  	visivel e o fim do painel ficaria inalcancavel.
  */
  .geduc-a11y__painel {
    top: 12px;
    right: 12px;
    bottom: 80px;
    left: 12px;
    width: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/*# sourceMappingURL=main.css.map */
/*# sourceMappingURL=main.css.map */