@charset "UTF-8";
.treball-catalog-services {
  /* =========================================================
     5) Contenidos de pestanas (desktop/tablet)
     - Fondo, bordes y visibilidad de la pestana seleccionada
     ========================================================= */
  /* =========================================================
     6) Estilos compartidos de grid/cards
     - Se aplican tanto a tabs (desktop) como a dropdowns (mobile)
     - Esto evita duplicar markup y asegura consistencia visual
     ========================================================= */
  /* =========================================================
     7) Responsive switch: desktop tabs vs mobile dropdowns
     - Por defecto se ve tabs (desktop)
     - En mobile se oculta tabs y se muestran dropdowns
     ========================================================= */
  /* =========================================================
     8) Dropdowns (mobile)
     - Columna de dropdowns
     - Cada dropdown contiene su propio grid/cards
     - "dropdowns-box" actúa como la caja contenedora (skin la aplicareis luego)
     ======================================================== */ }
  .treball-catalog-services .tabs.min-width {
    /* =========================================================
       1) Variables de layout de la barra de pestanas (desktop/tablet)
       ========================================================= */
    --tabs-gap: 4px;
    --tabs-gap-compact: 3px;
    --tab-max-width: 200px;
    --tab-max-width-compact: 170px;
    /* =========================================================
       2) Barra de pestanas (desktop/tablet)
       - Flex en una linea
       - Sin scroll por defecto
       ========================================================= */
    /* =========================================================
       3) Modo compact de pestanas (desktop/tablet)
       - Tabs mas estrechas y tipografia un poco menor
       - Mantiene maximo 2 lineas
       ========================================================= */
    /* =========================================================
       4) Fallback de scroll (desktop/tablet)
       - Si tras compactar sigue habiendo overflow, habilita scroll horizontal
       ========================================================= */ }
    .treball-catalog-services .tabs.min-width .tab-options.wrapper {
      max-width: none;
      width: 100%;
      margin-inline: auto;
      padding-inline: 8px; }
    .treball-catalog-services .tabs.min-width .tab-options ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: center;
      gap: var(--tabs-gap);
      overflow-x: hidden;
      overflow-y: visible;
      min-width: 0; }
    .treball-catalog-services .tabs.min-width .tab-options li {
      margin: 0;
      flex: 0 1 auto;
      min-width: 0;
      max-width: var(--tab-max-width); }
    .treball-catalog-services .tabs.min-width .tab-options a {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      width: 100%;
      padding: 16px 16px;
      background-color: #fbeddd;
      border: 1px solid transparent;
      border-bottom: none;
      border-radius: 0 15px 0 0;
      text-decoration: none;
      color: #333;
      font-size: 18px;
      line-height: 1.25;
      transition: background-color 0.2s ease;
      white-space: normal;
      overflow: hidden;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none; }
    .treball-catalog-services .tabs.min-width .tab-options a:hover {
      background-color: #fbd9b5; }
    .treball-catalog-services .tabs.min-width .tab-options a.selected {
      background-color: #fbd9b5;
      border-color: #e0e0e0;
      border-top-color: transparent;
      border-bottom-color: #fbd9b5;
      font-weight: normal; }
    .treball-catalog-services .tabs.min-width.is-compact .tab-options ul {
      gap: var(--tabs-gap-compact); }
    .treball-catalog-services .tabs.min-width.is-compact .tab-options li {
      max-width: var(--tab-max-width-compact); }
    .treball-catalog-services .tabs.min-width.is-compact .tab-options a {
      padding: 18px 12px;
      font-size: 15px;
      line-height: 1.25;
      -webkit-line-clamp: 2;
      white-space: normal;
      overflow: hidden;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none; }
    .treball-catalog-services .tabs.min-width.is-scroll .tab-options ul {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; }
  .treball-catalog-services .tabs.min-width .tab-contents.micro-padding-top {
    background-color: #fbd9b5;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px; }
    .treball-catalog-services .tabs.min-width .tab-contents.micro-padding-top .tab {
      display: none; }
      .treball-catalog-services .tabs.min-width .tab-contents.micro-padding-top .tab.selected {
        display: block; }
  .treball-catalog-services .grid-container ul.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 25px; }
    .treball-catalog-services .grid-container ul.grid li.item.box {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.3s ease;
      min-height: 180px;
      margin: 0;
      padding: 0;
      overflow: hidden; }
      .treball-catalog-services .grid-container ul.grid li.item.box:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
      .treball-catalog-services .grid-container ul.grid li.item.box .favorite-selector {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        z-index: 3; }
      .treball-catalog-services .grid-container ul.grid li.item.box a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 15px;
        text-decoration: none; }
      .treball-catalog-services .grid-container ul.grid li.item.box h3 {
        font-size: 16px !important;
        color: #cc5d27;
        margin: 0;
        width: 80%;
        -webkit-line-clamp: 4;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; }
      .treball-catalog-services .grid-container ul.grid li.item.box svg {
        position: static;
        align-self: flex-start;
        margin-top: 10px; }
    @media screen and (max-width: 1024px) {
      .treball-catalog-services .grid-container ul.grid {
        grid-template-columns: repeat(3, 1fr); } }
    @media screen and (max-width: 768px) {
      .treball-catalog-services .grid-container ul.grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; } }
    @media screen and (max-width: 480px) {
      .treball-catalog-services .grid-container ul.grid {
        grid-template-columns: 1fr; } }
  .treball-catalog-services .tabs-desktop {
    display: block; }
  .treball-catalog-services .dropdowns-mobile {
    display: none; }
  @media screen and (max-width: 768px) {
    .treball-catalog-services .tabs-desktop {
      display: none; }
    .treball-catalog-services .dropdowns-mobile {
      display: block; } }
  .treball-catalog-services .dropdowns-mobile .dropdowns-box {
    width: 100%;
    padding-inline: 8px; }
  .treball-catalog-services .dropdowns-mobile details.ambit-dropdown {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fbeddd;
    /* Separacion vertical entre dropdowns */
    /* Quita el marcador por defecto del <summary> en WebKit */ }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown + details.ambit-dropdown {
      margin-top: 10px; }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown summary::-webkit-details-marker {
      display: none; }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown .ambit-dropdown__summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 14px;
      font-size: 16px;
      line-height: 1.2;
      color: #333;
      user-select: none; }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown .ambit-dropdown__title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden; }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown .ambit-dropdown__chevron {
      flex: 0 0 auto;
      width: 10px;
      height: 10px;
      border-right: 2px solid #457a98;
      border-bottom: 2px solid #457a98;
      transform: rotate(45deg);
      transition: transform 0.2s ease; }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown[open] {
      background: #fbd9b5; }
      .treball-catalog-services .dropdowns-mobile details.ambit-dropdown[open] .ambit-dropdown__chevron {
        transform: rotate(-135deg); }
    .treball-catalog-services .dropdowns-mobile details.ambit-dropdown .ambit-dropdown__content {
      background-color: #fbd9b5;
      border-top: 1px solid #e0e0e0;
      padding: 14px;
      /* En mobile, forzamos 1 columna para mayor legibilidad */
      /* Ajuste leve de altura minima en mobile */ }
      .treball-catalog-services .dropdowns-mobile details.ambit-dropdown .ambit-dropdown__content .grid-container ul.grid {
        grid-template-columns: 1fr;
        gap: 14px; }
      .treball-catalog-services .dropdowns-mobile details.ambit-dropdown .ambit-dropdown__content .grid-container ul.grid li.item.box {
        min-height: 160px; }