:root{
  /* MÒBIL */
  --topbar-h-mobile: 10rem;

  /* DESKTOP (10/80/10) */
  --topbar-h-desktop: 10vh;
  --bottombar-h-desktop: calc(26vh + 0.5rem);

  --sidebar-w: 280px;
  --pink: #e83e8c;

  /* si el PNG té marge transparent (només afecta mòbil, on el logo és a topbar) */
  --logo-offset-x: 0rem;
}

/* =========================
   BASE
========================= */

*{ box-sizing: border-box; }

body{ margin: 0; }

/* =========================
   TOPBAR (base)
========================= */

.app-topbar{
  background: #fff;
  z-index: 1000;
  border: 0;

  display: flex;
  align-items: center;
  padding: 0 12px;
}

/* Branding TOPBAR (només mòbil; en desktop s’amaga) */
.topbar-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;

  /* centrat com abans */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--logo-offset-x)), -50%);
}

.app-topbar__logo{
  height: 6rem;
  width: auto;
  display: block;
}

.app-topbar__social{
  display: flex;
  align-items: center;
  gap: .75rem;
}

.app-topbar__socialIcon{
  height: 2.2rem;
  width: auto;
  display: block;
}

/* Botó MENU (base ocult; només mòbil) */
.app-topbar__menuImgBtn{
  display: none;
  background: grey;
  color: white;
  padding: 0.3rem 0.6rem;
  border: 0;
  font-family: "Bebas Neue", Bebas, Arial, sans-serif;
  font-size: 1.3rem;
  border-radius: 6px;
  cursor: pointer;
}

/* CTA (desktop) */
.app-topbar__cta{
  margin-left: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 14px;

  background: var(--pink);
  color: #fff;

  font-family: "Bebas Neue", Bebas, Arial, sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.02em;

  text-decoration: none;
  white-space: nowrap;
}

/* =========================
   SIDEBAR (base)
========================= */

.sidebar-item{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.app-sidebar__content .sidebar-item{
  opacity: 0;
  transform: translateX(-28px);
  animation: sidebarItemSlideInLeft 520ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes sidebarItemSlideInLeft{
  0%{
    opacity: 0;
    transform: translateX(-28px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Escalonat (botó per botó) */
.app-sidebar__content .sidebar-item:nth-child(1){ animation-delay: 0ms; }
.app-sidebar__content .sidebar-item:nth-child(2){ animation-delay: 90ms; }
.app-sidebar__content .sidebar-item:nth-child(3){ animation-delay: 180ms; }
.app-sidebar__content .sidebar-item:nth-child(4){ animation-delay: 270ms; }
.app-sidebar__content .sidebar-item:nth-child(5){ animation-delay: 360ms; }
.app-sidebar__content .sidebar-item:nth-child(6){ animation-delay: 450ms; }
.app-sidebar__content .sidebar-item:nth-child(7){ animation-delay: 540ms; }
.app-sidebar__content .sidebar-item:nth-child(8){ animation-delay: 630ms; }
.app-sidebar__content .sidebar-item:nth-child(9){ animation-delay: 720ms; }
.app-sidebar__content .sidebar-item:nth-child(10){ animation-delay: 810ms; }
.app-sidebar__content .sidebar-item:nth-child(11){ animation-delay: 900ms; }
.app-sidebar__content .sidebar-item:nth-child(12){ animation-delay: 990ms; }
.app-sidebar__content .sidebar-item:nth-child(13){ animation-delay: 1080ms; }
.app-sidebar__content .sidebar-item:nth-child(14){ animation-delay: 1170ms; }
.app-sidebar__content .sidebar-item:nth-child(15){ animation-delay: 1260ms; }
.app-sidebar__content .sidebar-item:nth-child(16){ animation-delay: 1350ms; }
.app-sidebar__content .sidebar-item:nth-child(17){ animation-delay: 1440ms; }
.app-sidebar__content .sidebar-item:nth-child(18){ animation-delay: 1530ms; }
.app-sidebar__content .sidebar-item:nth-child(19){ animation-delay: 1620ms; }
.app-sidebar__content .sidebar-item:nth-child(20){ animation-delay: 1710ms; }

@media (prefers-reduced-motion: reduce){
  .app-sidebar__content .sidebar-item{
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.app-sidebar .sidebar-item .bototext{
  transition: transform 160ms ease, box-shadow 180ms ease, background-color 0.3s;
  transform-origin: center;
}

.app-sidebar .sidebar-item .bototext:hover{
  transform: scale(1.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

/* Branding a la SIDEBAR (només desktop) - SENSE LÍNIA */
.sidebar-brand{
  display: none;
  padding: 8px 4px 8px 4px;
  margin-bottom: 20px;
  border: 0; /* <-- important: cap línia separadora */
}

.sidebar-logo{
  height: 6.2rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

.sidebar-social{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: .75rem;
}

.sidebar-socialIcon{
  height: 2.2rem;
  width: auto;
  display: block;
}

/* =========================
   BACKDROP (mòbil)
========================= */

.app-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1999;
}

/* =========================
   BOTTOMBAR (base)
========================= */

.app-bottombar{
  background: #fff;
  border: 0;
}

.app-bottombar__inner{
  padding: 12.5px;
}

/* Textos bottombar */
.bottombar-title{
  font-family: "Bebas Neue", Bebas, Arial, sans-serif;
  color: var(--pink);
  font-size: 1.5rem;
  letter-spacing: .02em;
  margin-top: 0.45rem;
  margin-bottom: 0.6rem;
}

.bottombar-text{
  margin-top: 0;
  font-size: .95rem;
  line-height: 1.25rem;
}

.bottombar-logos{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.bottombar-logos__line{
  max-width: 170px;
  width: 100%;
  height: auto;
}

.bottombar-logos__consorci{
  max-width: 210px;
  width: 100%;
  height: auto;
}


.app-bottombar__col--left{
  text-align: left;
}

.app-bottombar__col:nth-child(2){
  text-align: center;
}

.app-bottombar__col--right{
  text-align: right;
}

.app-bottombar__col--right .bottombar-text{
  display: flex;
  justify-content: flex-end;
}

.app-bottombar__col--right .horarisatencio-table{
  margin-left: auto;
}


/* =========================
   DESKTOP (>=901px)
   Sidebar 100vh + dreta en 10/80/10 (fixes)
========================= */
@media (min-width: 901px){

  /* sense scroll global: el scroll el fa main i sidebar */
  html, body{
    height: 100%;
    overflow: hidden;
  }

  /* TOPBAR fixa a la dreta */
  .app-topbar{
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    height: var(--topbar-h-desktop);

    /* topbar “neta”: CTA a la dreta */
    justify-content: flex-end;
  }

  /* En desktop, NO es veu el branding de la topbar */
  .topbar-brand{
    display: none;
  }

  /* Branding a topbar només quan la pàgina conté menuppal */
  .topbar-brand--desktop-menuppal{
    display: none;
  }

  body.is-menuppal-page .topbar-brand--desktop-menuppal{
    position: absolute;
    left: 50%;
    right: auto;
    top: 6px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 220px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    pointer-events: auto;
  }

  /* Sidebar fixa 100vh */
  .app-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;

    overflow-y: auto;
    background: #fff;

    z-index: 900;
    padding: 12px;

    border: 0;
    margin: 0;
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .app-sidebar[aria-hidden="true"]{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* En desktop, SÍ es veu el branding dins sidebar (pàgines normals) */
  .sidebar-brand{
    display: block;
  }

  /* Si hi ha menuppal, el branding es veu a topbar i no al lateral */
  body.is-menuppal-page .sidebar-brand--desktop{
    display: none;
  }

  /* Si hi ha menuppal, el menú lateral queda a dalt
     amb un marge superior de l'alçada del logotip */
  body.is-menuppal-page .app-sidebar{
    display: none !important;
  }

  body.is-menuppal-page .app-sidebar__content{
    width: 100%;
    margin-top: calc(6rem + 0.35rem + 2.2rem + 0.6rem);
  }

  body.is-menuppal-page .app-topbar{
    left: 0;
    width: 100%;
  }

  body.is-menuppal-page .app-main{
    left: 0;
    width: 100%;
  }

  body.is-menuppal-page .app-bottombar{
    left: 0;
    width: 100%;
  }

  /* Contenidor shell neutre */
  .app-shell{
    padding: 0;
    margin: 0;
    min-height: 0;
  }

  /* MAIN ocupa la franja central (80vh) i fa scroll */
  .app-main{
    position: fixed;
    left: var(--sidebar-w);
    top: var(--topbar-h-desktop);
    width: calc(100% - var(--sidebar-w));
    height: calc(100vh - var(--topbar-h-desktop) - var(--bottombar-h-desktop));

    display: flex;              /* ← clau */
    align-items: flex-start;

    overflow-y: auto;

    margin: 0;
    padding: 0;
  }


  .app-main.app-main--centered{
    align-items: center;
  }

  .app-container{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px;
  }

  /* BOTTOMBAR fixa (10vh) i 3 columnes, alineades a dalt */
  .app-bottombar{
    position: fixed;
    left: var(--sidebar-w);
    bottom: 0;
    width: calc(100% - var(--sidebar-w));
    height: var(--bottombar-h-desktop);

    display: flex;
    align-items: flex-start;   /* <-- a dalt */

    padding-top: 12px;
    overflow: hidden;
    z-index: 950;
  }

  .app-bottombar__inner{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;

    align-items: start;
    align-content: start;      /* <-- reforç a dalt */

    padding: 0 16px;
  }

  /* En desktop no cal botó tancar */
  .app-sidebar__close{
    display: none;
  }

  /* En desktop no cal backdrop */
  .app-backdrop{
    display: none;
  }

  /* Alineacions específiques per columna */
  .app-bottombar__inner > section:nth-child(1){
    text-align: left;
  }

  .app-bottombar__inner > section:nth-child(2){
    text-align: center;
  }

  .app-bottombar__inner > section:nth-child(3){
    text-align: right;
  }
}

/* =========================
   MÒBIL (<=900px)
   Topbar fixa, sidebar overlay, bottombar després del main
========================= */
@media (max-width: 900px){

  /* En mòbil el scroll és de pàgina perquè la bottombar quedi després del main */
  html, body{
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* TOPBAR fixa */
  .app-topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h-mobile);
    z-index: 2500;
  }

  .app-shell{
    display: block;
  }

  /* En mòbil: mostra botó menú */
  .app-topbar__menuImgBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* En mòbil: NO mostrar Inscriu-te */
  .app-topbar__cta{
    display: none;
  }

  /* Branding centrat dins topbar */
  .topbar-brand{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .topbar-brand--desktop-menuppal{
    display: none !important;
  }

  /* Centra també la fila d’icones + botó MENU */
  .app-topbar__social{
    width: 100%;
    justify-content: center;
  }

  /* Textos bottombar */
  .bottombar-title{
    margin-top: 2rem;
  }

  /* (Opcional) treu qualsevol offset en mòbil */
  :root{
    --logo-offset-x: 0rem;
  }

  /* MAIN en flux normal, sota topbar fixa */
  .app-main{
    position: static;
    margin-top: var(--topbar-h-mobile);
    padding: 0;
    overflow: visible;
    min-height: 0;
  }

  /* Marges laterals del contingut */
  .app-container{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Sidebar overlay */
  .app-sidebar{
    position: fixed;
    top: 0;     /* overlay també sobre la topbar */
    left: 0;
    bottom: 0;

    width: min(86vw, 360px);
    background: #fff;

    transform: translateX(-110%);
    transition: transform .22s ease;

    z-index: 3000;
    overflow-y: auto;

    padding: 16px;
    padding-top: 76px;

    border: 0;
  }

  body.sidebar-open .app-sidebar{
    transform: translateX(0);
  }

  /* En mòbil NO volem el branding a la sidebar */
  .sidebar-brand{
    display: none;
  }

  /* Botó tancar visible en mòbil */
  .app-sidebar__close{
    display: block !important;
    position: absolute;
    top: 8px;
    right: 8px;

    width: 52px;
    height: 52px;

    background: #fff;
    border: 0;
    border-radius: 0;
    color: #000;

    font-size: 2rem;
    line-height: 52px;
    cursor: pointer;

    z-index: 3100;
  }

  /* BOTTOMBAR (en mòbil): que sigui part del scroll del main */
  .app-bottombar{
    position: static;
    height: auto;
  }

  /* En mòbil, 3 blocs en vertical */
  .app-bottombar__inner{
    display: block;
    padding: 12.5px;
  }

  .app-bottombar__inner > section:nth-child(1){
    text-align: center;
  }

  .app-bottombar__inner > section:nth-child(1) .bottombar-logos{
    align-items: center;
  }

  .app-bottombar__inner > section:nth-child(2),
  .app-bottombar__inner > section:nth-child(3){
    text-align: center;
  }

  .app-bottombar__col--right .bottombar-text{
    justify-content: center;
  }

  .app-bottombar__col--right .horarisatencio-table{
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px){
  .pagina-body .table-mobile-scroll-wrap,
  .pagina-body-main .table-mobile-scroll-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.9rem;
  }

  .pagina-body table.pagina-table-managed.table-mobile-scroll,
  .pagina-body-main table.pagina-table-managed.table-mobile-scroll {
    min-width: 640px;
    width: 100%;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile {
    display: block;
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile thead,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile thead,
  .pagina-body table.pagina-table-managed.table-stack-mobile colgroup,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile colgroup {
    display: none;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile tbody,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile tbody {
    display: block;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile tr,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    background: #fff;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile td,
  .pagina-body table.pagina-table-managed.table-stack-mobile th,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile td,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile th {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eee;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile td:not([style*="padding"]),
  .pagina-body table.pagina-table-managed.table-stack-mobile th:not([style*="padding"]),
  .pagina-body-main table.pagina-table-managed.table-stack-mobile td:not([style*="padding"]),
  .pagina-body-main table.pagina-table-managed.table-stack-mobile th:not([style*="padding"]) {
    padding: 2px 0;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile td:last-child,
  .pagina-body table.pagina-table-managed.table-stack-mobile th:last-child,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile td:last-child,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile th:last-child {
    border-bottom: 0;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile:not([border]):not([style*="border"]) tr,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile:not([border]):not([style*="border"]) tr,
  .pagina-body table.pagina-table-managed.table-stack-mobile:not([border]):not([style*="border"]) td:not([style*="border"]),
  .pagina-body table.pagina-table-managed.table-stack-mobile:not([border]):not([style*="border"]) th:not([style*="border"]),
  .pagina-body-main table.pagina-table-managed.table-stack-mobile:not([border]):not([style*="border"]) td:not([style*="border"]),
  .pagina-body-main table.pagina-table-managed.table-stack-mobile:not([border]):not([style*="border"]) th:not([style*="border"]) {
    border: 0 !important;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile td::before,
  .pagina-body table.pagina-table-managed.table-stack-mobile th::before,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile td::before,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile th::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    text-align: left;
    color: #444;
    margin-bottom: 0.2rem;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile td[data-label='']::before,
  .pagina-body table.pagina-table-managed.table-stack-mobile th[data-label='']::before,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile td[data-label='']::before,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile th[data-label='']::before {
    content: none;
    display: none;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows td,
  .pagina-body table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows th,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows td,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows th {
    font-weight: 400;
  }

  .pagina-body table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows td::before,
  .pagina-body table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows th::before,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows td::before,
  .pagina-body-main table.pagina-table-managed.table-stack-mobile.table-stack-mobile--plain-rows th::before {
    content: none;
    display: none;
  }
}

/* ==========================================================
   MAIN com "pestanya": tipografia + llistes
   (NO s'aplica si <main> té .has-menuppal)
========================================================== */

/* Contenidor central */
.app-main:not(.has-menuppal) .app-container .pagina-body-main{
  max-width: 1000px;
  width: 100%;
  margin: 1rem auto;

  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: left;
}

/* Paràgrafs */
.app-main:not(.has-menuppal) .app-container .pagina-body-main p{
  margin: 0.3rem 0;
}

/* Taules de contingut: per defecte, sense vora si no està especificada */
.pagina-body table.pagina-table-managed:not([border]):not([style*="border"]),
.pagina-body-main table.pagina-table-managed:not([border]):not([style*="border"]) {
  border: 0 !important;
}

@media (min-width: 901px) {
  .pagina-body table.pagina-table-managed td:not([style*="padding"]),
  .pagina-body table.pagina-table-managed th:not([style*="padding"]),
  .pagina-body-main table.pagina-table-managed td:not([style*="padding"]),
  .pagina-body-main table.pagina-table-managed th:not([style*="padding"]) {
    padding: 0.4rem;
  }
}

.pagina-body table.pagina-table-managed:not([border]):not([style*="border"]) td:not([style*="border"]),
.pagina-body table.pagina-table-managed:not([border]):not([style*="border"]) th:not([style*="border"]),
.pagina-body-main table.pagina-table-managed:not([border]):not([style*="border"]) td:not([style*="border"]),
.pagina-body-main table.pagina-table-managed:not([border]):not([style*="border"]) th:not([style*="border"]) {
  border: 0 !important;
}

/* Links */
.app-main:not(.has-menuppal) .app-container .pagina-body-main a{
  color: #708090;      /* blaumari */
  font-size: inherit;
  text-decoration: none;
  font-weight: 700;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main a:hover,
.app-main:not(.has-menuppal) .app-container .pagina-body-main a:focus-visible{
  text-decoration: underline;
}

/* UL */
.app-main:not(.has-menuppal) .app-container .pagina-body-main ul{
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main ul li{
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.3rem;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main ul li::before{
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.6rem;
  background-color: currentColor;
  opacity: 0.8;
}

/* OL */
.app-main:not(.has-menuppal) .app-container .pagina-body-main ol{
  counter-reset: list-counter;
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main ol li{
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: flex-start;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main ol li::before{
  counter-increment: list-counter;
  content: counter(list-counter);

  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;

  background-color: currentColor;
  color: #fff;
  font-weight: bold;
  font-size: 0.7em;
  text-align: center;
  line-height: 1.5em;

  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0.1em);
}

/* Responsive */
@media (max-width: 767px){
  .app-main:not(.has-menuppal) .app-container .pagina-body-main{
    font-size: 1.1rem;
  }
  .app-main:not(.has-menuppal) .app-container .pagina-body-main ol li::before{
    font-size: 0.8rem;
    line-height: 1.2rem;
  }
}

/* ==========================================================
   HEADERS
========================================================== */

.app-main:not(.has-menuppal) .app-container .pagina-body-main h1,
.app-main:not(.has-menuppal) .app-container .pagina-body-main h2,
.app-main:not(.has-menuppal) .app-container .pagina-body-main h3{
  font-family: "Bebas Neue", sans-serif;
  color: #ffffff;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0.9rem 0;
  line-height: 1;
  width: 100%;
  display: block;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main h1{
  background-color: #e55381;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main h2{
  background-color: #b2abbe;
}

.app-main:not(.has-menuppal) .app-container .pagina-body-main h3{
  background-color: #aed581;
}