/* Colors */
:root {
    --background-color: #ffffff;
    --text-color: #4b4f58;
    --accent-color: #e63e53;
    --background-color-secondary: #ecefed;
    --text-color-secondary: #3a3a3a;
    --accent-color-secondary: #bf444e;
    --bg-color-secondary: #ecefed;
}

body {
    background-color: #ffffff;
    color: var(--text-color);
}

a {
    color: var(--accent-color);
}

/* Typography */
:root {
    --h1-font-family: Besley;
    --h1-font-size-value: 48px;
    --h1-line-height: 1.2;
    --h1-font-weight: 700;
    --h1-font-style: normal;
    --h1-text-transform: none;
    --h1-color: var(--accent-color);
    --h2-font-family: Besley;
    --h2-size: 22px;
    --h2-line-height: 1.3;
    --h2-font-weight: 600;
    --h2-font-style: normal;
    --h2-text-transform: none;
    --h2-color: var(--accent-color);
    --h3-font-family: Besley;
    --h3-size: 18px;
    --h3-line-height: 1.4;
    --h3-font-weight: 600;
    --h3-font-style: normal;
    --h3-text-transform: none;
    --h3-color: var(--text-color);
    --p-font-family: Raleway;
    --p-size: 16px;
    --p-line-height: 1.5;
    --p-font-weight: 300;
    --p-font-style: normal;
    --p-text-transform: none;
    --p-color: var(--text-color);
    --button-font-family: Raleway;
    --button-font-size: 16px;
    --button-line-height: 1.5;
    --button-font-weight: 300;
    --button-font-style: normal;
    --button-text-transform: none;
    --button-color: custom;
    --link-color: var(--accent-color);
    --link-underline: none;
    --link-hover-color: var(--accent-color);
    --link-hover-underline: none;
}

#device-wrapper body {
    font-family: var(--p-font-family);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    font-weight: var(--p-font-weight);
    font-style: var(--p-font-style);
    text-transform: var(--p-text-transform);
}

#device-wrapper h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-value);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    text-transform: var(--h1-text-transform);
    color: var(--h1-color);
}

#device-wrapper h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
    text-transform: var(--h2-text-transform);
    color: var(--h2-color);
}

#device-wrapper h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    text-transform: var(--h3-text-transform);
    color: var(--h3-color);
}

#device-wrapper p {
    font-family: var(--p-font-family);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    font-weight: var(--p-font-weight);
    font-style: var(--p-font-style);
    text-transform: var(--p-text-transform);
    color: var(--p-color);
}

#device-wrapper button, #device-wrapper .btn, #device-wrapper .btn-primary, #device-wrapper .btn-secondary, #device-wrapper input[type="submit"], #device-wrapper input[type="button"] {
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    font-style: var(--button-font-style);
    text-transform: var(--button-text-transform);
    color: var(--button-color);
}

#device-wrapper #page a:not([class*="btn"]):not([class*="button"]):not(.filter-tab) {
    color: var(--link-color) !important;
    text-decoration: var(--link-underline) !important;
}

#device-wrapper #page a:not([class*="btn"]):not([class*="button"]):not(.filter-tab):hover {
    color: var(--link-hover-color) !important;
    text-decoration: var(--link-hover-underline) !important;
}

/* Buttons */
:root {
    /* Primary Button */
    --btn-primary-bg-color: var(--accent-color);
    --btn-primary-text-color: #ffffff;
    --btn-primary-border-color: #000000;
    --btn-primary-hover-bg-color: var(--accent-color);
    --btn-primary-hover-text-color: #ffffff;
    --btn-primary-hover-border-color: #ffffff;
    --btn-primary-selected-bg-color: #000000;
    --btn-primary-selected-text-color: #ffffff;
    --btn-primary-selected-border-color: #ffffff;
    --btn-primary-border-radius: 5px;
    --btn-primary-border-width: 0px;
    --btn-primary-box-shadow: none;
    --btn-primary-padding-vertical: 5px;
    --btn-primary-padding-horizontal: 20px;

    /* Secondary Button */
    --btn-secondary-bg-color: rgba(0, 0, 0, 0);
    --btn-secondary-text-color: #000000;
    --btn-secondary-border-color: #000000;
    --btn-secondary-hover-bg-color: #ffffff;
    --btn-secondary-hover-text-color: #4b4f58;
    --btn-secondary-hover-border-color: #000000;
    --btn-secondary-selected-bg-color: rgba(211, 217, 223, 0);
    --btn-secondary-selected-text-color: #495057;
    --btn-secondary-selected-border-color: #98a2ac;
    --btn-secondary-border-radius: 5px;
    --btn-secondary-border-width: 1px;
    --btn-secondary-box-shadow: none;
    --btn-secondary-padding-vertical: 4px;
    --btn-secondary-padding-horizontal: 20px;

    /* Menu */
    --menu-bg-color: #ffffff;
    --menu-text-color: #4b4f58;
    --menu-border-color: #ffffff;
    --menu-hover-bg-color: #ffffff;
    --menu-hover-text-color: var(--accent-color);
    --menu-hover-border-color: #ffffff;
    --menu-active-bg-color: #ffffff;
    --menu-active-text-color: var(--accent-color);
    --menu-active-border-color: #ffffff;
    --menu-border-radius: 0px;
    --menu-border-width: 0px;
    --menu-box-shadow: none;
    --menu-font-size: 16px;
    --menu-padding-vertical: 10px;
    --menu-padding-horizontal: 20px;
    --menu-font-weight: 300;
    --menu-text-transform: none;
}

/* Layout */
:root {
    --container-width-value: 1400px;
    --spacing-value: 40px;
    --header-height: 100px;
    --logo-max-height: 52px;
    --header-fixed: 1;
    --header-bg-color-select: var(--background-color-secondary);
    --header-bg-color-custom: #ffffff;
    --header-bg-color: var(--background-color-secondary);
    --page-bg-color-select: var(--background-color);
    --page-bg-color-custom: #ffffff;
    --page-bg-color: var(--background-color);
    --footer-bg-color-select: var(--background-color-secondary);
    --footer-bg-color-custom: #ffffff;
    --footer-bg-color: var(--background-color-secondary);
}

.container {
    max-width: var(--container-width-value);
    padding: var(--spacing-value);
}

#device-wrapper header {
    background-color: var(--header-bg-color) !important;
    height: var(--header-height) !important;
}

#device-wrapper #page, #device-wrapper main {
    background-color: var(--page-bg-color) !important;
}

#device-wrapper footer {
    background-color: var(--footer-bg-color) !important;
}

#device-wrapper .site-footer .container {
    padding: 0px 30px 20px 30px !important;
}

/* Deshabilitar el "span automàtic" de les seccions a dispositius mòbils.
   Sobreescriu les regles de /usr/share/kms/websfera/css/websfera-global.css que:
   - a producció en touch real: min-height: 100svh (cada section ocupa la pantalla)
   - al preview de l'editor (mobile/tablet): min-height: 700px + scroll-snap-align: start
   En aquest web no volem aquest comportament — les seccions tenen la seva alçada natural. */
html.touch-device body section,
html.touch-device #device-wrapper section,
#device-wrapper.responsive-mobile section,
#device-wrapper.responsive-tablet section {
    min-height: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}
html.touch-device,
html.touch-device body,
#device-wrapper.responsive-mobile,
#device-wrapper.responsive-tablet {
    scroll-snap-type: none !important;
}

/* Custom */
@media (max-width: 768px) {
    : root {
        --spacing-value: 10px;
}

#device-wrapper .container {
    padding: 8px !important;
}

#device-wrapper .page_container {
    max-width: 100%;
    padding: 0 10px;
}

#device-wrapper .page-center {
    max-width: 100%;
    padding: 0 10px;
}

#device-wrapper #page .block {
    padding: 15px 8px !important;
}

#device-wrapper .block {
    max-width: 100%;
}

#device-wrapper .sidepad {
    padding: 0 10px !important;
}

#device-wrapper .sidepad100 {
    padding: 0 10px !important;
}

#device-wrapper .maxwidth,
    #device-wrapper .maxwidth-shorter {
    padding: 0 10px;
}

#device-wrapper .wrapper {
    margin-bottom: 40px;
}

#device-wrapper .margin_left_40_desktop {
    padding: 0 !important;
}

#device-wrapper .hero-section {
    padding: 20px 8px;
}

#device-wrapper .hero-content {
    padding: 0;
}

#device-wrapper .punts-section,
    #device-wrapper .metode-section,
    #device-wrapper .equip-section,
    #device-wrapper .cooperativa-section,
    #device-wrapper .testimonials-section,
    #device-wrapper .clients-section {
    padding: 30px 8px;
}

#device-wrapper .metode-content,
    #device-wrapper .cooperativa-content,
    #device-wrapper .equip-section .team-description {
    max-width: 100%;
    padding: 0;
}

#device-wrapper .pad30 {
    padding: 15px !important;
}

#device-wrapper .pad40 {
    padding: 15px !important;
}

body.presentacio .content {
    max-width: 100%;
    padding: 20px 10px;
}

body.about .about-content {
    max-width: 100%;
    padding: 40px 10px;
}

body.contact .contact-content {
    max-width: 100%;
    padding: 30px 10px;
}

body.blog .blog-content {
    max-width: 100%;
    padding: 30px 10px;
}

.product-detail-container {
    padding: 15px 8px;
}

.products-container {
    padding: 15px 8px;
}

.related-products-section {
    padding: 30px 10px 0 10px;
}

header .head {
    padding: 0 8px !important;
}

}

@media (max-width: 480px) {
    : root {
        --spacing-value: 8px;
}

#device-wrapper .page_container,
    #device-wrapper .page-center {
    padding: 0 8px;
}

body.presentacio .content,
    body.about .about-content,
    body.contact .contact-content,
    body.blog .blog-content {
    padding: 15px 8px;
}

#device-wrapper #page > section:nth-of-type(2) > div {
    max-width: var(--container-width-value) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

}

/* Spacing */
#device-wrapper #actualitat > div {
    padding-top: 60px !important;
    padding-bottom: 0px !important;
}

#device-wrapper #ws-nb6nxvnx {
    max-width: 100% !important;
}

/* Text selection */
#device-wrapper ::selection {
    background: var(--accent-color) !important;
    color: #fff !important;
}

#device-wrapper ::-moz-selection {
    background: var(--accent-color) !important;
    color: #fff !important;
}
/**
 * Estils per a la pàgina d'actualitat - Websfera.cloud
 * Disseny modern amb colors corporatius
 * Color d'accent: var(--accent-color) (definit a custom.css :root = #e63e53)
 * Data: 12/12/2025
 */

/* Colors corporatius websfera.cloud — tots vinculats a --accent-color */
:root {
    --color-primary: var(--accent-color);
    --color-primary-dark: #a83444;
    --color-primary-darker: #882835;
    --color-primary-light: var(--accent-color);
    --color-secondary: var(--accent-color);
    --color-accent: var(--accent-color);
    --color-accent-light: var(--accent-color);
    --color-text-dark: #2c3e50;
    --color-text-medium: #5a6c7d;
    --color-text-light: #95a5a6;
    --color-bg-light: #f8f9fb;
    --color-bg-white: #ffffff;
    --color-border: #e1e8ed;
    --color-error: #e74c3c;
    --color-success: #27ae60;
    --shadow-sm: 0 2px 8px rgba(200, 64, 83, 0.08);
    --shadow-md: 0 4px 16px rgba(200, 64, 83, 0.12);
    --shadow-lg: 0 8px 24px rgba(200, 64, 83, 0.16);
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 8px;
}

/* Page container */
#page.actualitat {
    padding-bottom: 20px;
}

/* Container principal */
#device-wrapper #actualitat {
    padding: 60px 0;
    min-height: calc(100vh - var(--header-height, 80px));
}

#device-wrapper #actualitat .container.block {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
}

/* Títol de la pàgina — hereta de la regla global h1 (text.css) per consistència
   amb la resta de pàgines (El projecte, etc.) */
#device-wrapper #actualitat .page-title {
    margin-bottom: 40px;
}

/* Grid de targetes de notícies */
#device-wrapper #actualitat .row.nomargin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 32px;
    margin: 0 !important;
}

/* Targeta de notícia */
#device-wrapper .actualitat-post {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#device-wrapper .actualitat-post .post-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

#device-wrapper .actualitat-post .post-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

/* Imatge de la notícia */
#device-wrapper .actualitat-post .post-image {
    width: 100%;
    height: 260px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

#device-wrapper .actualitat-post .post-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(200, 64, 83, 0.4), transparent);
    transition: opacity 0.3s ease;
}

#device-wrapper .actualitat-post .post-card:hover .post-image::after {
    opacity: 0.6;
}

/* Contingut de la targeta */
#device-wrapper .actualitat-post .post-content {
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#device-wrapper .actualitat-post .post-date {
    font-size: 0.85em;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

#device-wrapper .actualitat-post .post-date::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    content: '\f133';
    margin-right: 8px;
    color: var(--color-primary);
}

#device-wrapper .actualitat-post .post-title {
    font-size: 1.5em;
    color: var(--color-text-dark);
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

#device-wrapper .actualitat-post .post-card:hover .post-title {
    color: var(--color-primary);
}

#device-wrapper .actualitat-post .post-subtitle {
    font-size: 1em;
    color: var(--color-text-medium);
    margin-bottom: 16px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#device-wrapper .actualitat-post .post-excerpt {
    font-size: 0.95em;
    color: var(--color-text-medium);
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}

/* Etiquetes petites */
#device-wrapper .actualitat-post .post-tags-preview {
    margin-top: 12px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#device-wrapper .actualitat-post .tag-small {
    display: inline-block;
    padding: 5px 12px;
    background: linear-gradient(135deg, rgba(200, 64, 83, 0.1), rgba(235, 106, 122, 0.1));
    color: var(--color-primary-dark);
    border-radius: 14px;
    font-size: 0.75em;
    font-weight: 600;
    border: 1px solid rgba(200, 64, 83, 0.2);
}

#device-wrapper .actualitat-post .post-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

#device-wrapper .actualitat-post .btn-read-more {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9em;
    box-shadow: var(--shadow-sm);
}

#device-wrapper .actualitat-post .btn-read-more:hover {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    box-shadow: var(--shadow-md);
}

/* Paginació */
#device-wrapper #actualitat .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 60px;
    padding: 40px;
}

#device-wrapper #actualitat .btn-pagination {
    padding: 14px 32px;
    background: var(--color-bg-white);
    color: var(--color-primary);
    text-decoration: none;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

#device-wrapper #actualitat .btn-pagination:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    box-shadow: var(--shadow-md);
}

#device-wrapper #actualitat .page-info {
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: 1.1em;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(200, 64, 83, 0.05), rgba(235, 106, 122, 0.05));
    border-radius: var(--radius-md);
}

/* Missatge quan no hi ha notícies */
#device-wrapper #actualitat .no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, rgba(200, 64, 83, 0.03), rgba(235, 106, 122, 0.03));
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

#device-wrapper #actualitat .no-posts p {
    font-size: 1.3em;
    color: var(--color-text-medium);
    margin-bottom: 20px;
}

#device-wrapper #actualitat .btn-clear-filters,
#device-wrapper #actualitat .btn-back {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white !important;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
}

#device-wrapper #actualitat .btn-clear-filters:hover,
#device-wrapper #actualitat .btn-back:hover {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    box-shadow: var(--shadow-md);
}

/* =====================================================
   Vista completa de notícia (apost-*)
   ===================================================== */

/* Header */
#device-wrapper .actualitat-post-full .apost-header {
    background: var(--color-primary);
    padding: 0;
}

#device-wrapper .actualitat-post-full .apost-header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 48px 40px;
}

#device-wrapper .actualitat-post-full .apost-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#device-wrapper .actualitat-post-full .apost-date {
    font-size: 0.82em;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#device-wrapper .actualitat-post-full .apost-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-size: 0.85em;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 6px;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

#device-wrapper .actualitat-post-full .apost-back:hover {
    opacity: 0.88;
}

#device-wrapper .actualitat-post-full .apost-title {
    font-size: 2.4em !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    color: white !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.01em;
}

#device-wrapper .actualitat-post-full .apost-subtitle {
    font-size: 1.15em;
    font-weight: 400;
    color: rgba(255,255,255,0.88) !important;
    line-height: 1.55;
    margin: 0;
}

/* Imatge portada */
#device-wrapper .actualitat-post-full .apost-cover {
    line-height: 0;
    max-height: 480px;
    overflow: hidden;
}

#device-wrapper .actualitat-post-full .apost-cover img {
    width: 100% !important;
    height: 480px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
}

/* Cos */
#device-wrapper .actualitat-post-full .apost-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 48px;
}

#device-wrapper .actualitat-post-full .apost-content {
    font-size: 1.1em;
    line-height: 1.85;
    color: #2c3e50;
}

#device-wrapper .actualitat-post-full .apost-content p { margin-bottom: 20px; }
#device-wrapper .actualitat-post-full .apost-content h2 { margin: 36px 0 14px; color: var(--color-primary); }
#device-wrapper .actualitat-post-full .apost-content h3 { margin: 28px 0 10px; }
#device-wrapper .actualitat-post-full .apost-content ul,
#device-wrapper .actualitat-post-full .apost-content ol { margin: 0 0 20px 24px; }
#device-wrapper .actualitat-post-full .apost-content li { margin-bottom: 6px; }

/* Imatges dins del cos: sobreescriu estils inline de l'editor */
#device-wrapper .actualitat-post-full .apost-content img,
#device-wrapper .actualitat-post-full .apost-content .blog-rte-img-wrap {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    border-radius: 8px;
    margin: 16px 0;
}

#device-wrapper .actualitat-post-full .apost-content .blog-rte-img-wrap img {
    display: block;
    width: 100% !important;
    height: auto !important;
    pointer-events: auto !important;
    border-radius: 8px;
}

/* Tags */
#device-wrapper .actualitat-post-full .apost-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e1e8ed;
}

#device-wrapper .actualitat-post-full .apost-tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(230,62,83,0.07);
    color: var(--color-primary);
    border: 1px solid rgba(230,62,83,0.2);
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 600;
    transition: all 0.2s ease;
}

#device-wrapper .actualitat-post-full .apost-tag:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Relacionades */
#device-wrapper .actualitat-post-full .apost-related {
    background: #f7f5f2;
    border-top: 3px solid var(--color-primary);
    padding: 56px 48px;
}

#device-wrapper .actualitat-post-full .apost-related-inner {
    max-width: 1100px;
    margin: 0 auto;
}

#device-wrapper .actualitat-post-full .apost-related-title {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin: 0 0 28px 0 !important;
    text-align: center;
}

#device-wrapper .actualitat-post-full .apost-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

#device-wrapper .actualitat-post-full .apost-related-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e1e8ed;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#device-wrapper .actualitat-post-full .apost-related-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

#device-wrapper .actualitat-post-full .apost-related-img {
    height: 160px;
    background: #e1e8ed center / cover no-repeat;
}

#device-wrapper .actualitat-post-full .apost-related-img[data-no-img] {
    background: linear-gradient(135deg, rgba(230,62,83,0.08), rgba(230,62,83,0.03));
}

#device-wrapper .actualitat-post-full .apost-related-info {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

#device-wrapper .actualitat-post-full .apost-related-date {
    font-size: 0.78em;
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#device-wrapper .actualitat-post-full .apost-related-name {
    font-size: 0.95em;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.4;
}

/* Icones Font Awesome */
#device-wrapper #actualitat .btn-pagination i {
    font-size: 0.85em;
}

/* Responsive Design */
@media (max-width: 1024px) {
    #device-wrapper #actualitat .row.nomargin {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    #device-wrapper .actualitat-post-full {
        width: 100% !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
    }

    #device-wrapper #actualitat {
        padding: 40px 0;
    }

    #device-wrapper #actualitat .page-title {
        margin-bottom: 30px;
    }

    #device-wrapper #actualitat .row.nomargin {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #device-wrapper #actualitat .pagination {
        flex-direction: column;
        gap: 16px;
        padding: 30px 10px;
    }

    #device-wrapper #actualitat .btn-pagination {
        width: 100%;
        max-width: 300px;
    }

    #device-wrapper .actualitat-post-full .apost-header-inner,
    #device-wrapper .actualitat-post-full .apost-body,
    #device-wrapper .actualitat-post-full .apost-related { padding-left: 28px; padding-right: 28px; }

    #device-wrapper .actualitat-post-full .apost-title { font-size: 2em !important; }
    #device-wrapper .actualitat-post-full .apost-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    #device-wrapper #actualitat .page-title {
        margin-bottom: 24px;
    }

    #device-wrapper .actualitat-post .post-image {
        height: 200px;
    }

    #device-wrapper .actualitat-post .post-content {
        padding: 20px;
    }

    #device-wrapper .actualitat-post .post-title {
        font-size: 1.3em;
    }

    #device-wrapper .actualitat-post-full .apost-header-inner,
    #device-wrapper .actualitat-post-full .apost-body,
    #device-wrapper .actualitat-post-full .apost-related { padding-left: 20px; padding-right: 20px; }

    #device-wrapper .actualitat-post-full .apost-title { font-size: 1.65em !important; }
    #device-wrapper .actualitat-post-full .apost-cover img { height: 260px !important; }
    #device-wrapper .actualitat-post-full .apost-related-grid { grid-template-columns: 1fr; }
}

/* Animacions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#device-wrapper .actualitat-post {
    animation: fadeInUp 0.5s ease-out;
}

#device-wrapper .actualitat-post:nth-child(1) { animation-delay: 0.05s; }
#device-wrapper .actualitat-post:nth-child(2) { animation-delay: 0.1s; }
#device-wrapper .actualitat-post:nth-child(3) { animation-delay: 0.15s; }
#device-wrapper .actualitat-post:nth-child(4) { animation-delay: 0.2s; }
#device-wrapper .actualitat-post:nth-child(5) { animation-delay: 0.25s; }
#device-wrapper .actualitat-post:nth-child(6) { animation-delay: 0.3s; }
/* Base styles - HTML and body scoped to device-wrapper */
#device-wrapper html, #device-wrapper body {
    background-
    overscroll-behavior: contain; /* Control the scrolling behavior */
}

/* screen reader only */
#device-wrapper .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

#device-wrapper html, #device-wrapper body { 
    width:100%;
    height:100%; 
}

#device-wrapper body { 
    background:#000; 
    display:block;
}

#device-wrapper html {
    border-top:0 solid #00481d;
}

/* Selection color scoped to device-wrapper */
#device-wrapper ::selection, #device-wrapper ::selection {  

    background: #000; 
}

#device-wrapper .black ::selection, #device-wrapper .black ::selection {  

    background: #111; 
}

/* Links scoped to device-wrapper */
#device-wrapper a:link, #device-wrapper a:visited {
    transition: 0.3s;
    text-decoration: none;
}

#device-wrapper a{ 
    outline: 0; 
}

/* Placeholder styles scoped to device-wrapper */
#device-wrapper ::placeholder, #device-wrapper -ms-input-placeholder, #device-wrapper ::input-placeholder { 
    color:#510027 !important
}

/* Container and layout scoped to device-wrapper */
#device-wrapper .container-fluid { 
    padding:0 !important; 
}

#device-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    width:100%; 
    display:block;
}

#device-wrapper .contact-full .row {
    align-items: center;
    justify-content: space-between;
}

#device-wrapper .sb-section.option-align-left .sb-section-alignable {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

/* Utility classes scoped to device-wrapper */
#device-wrapper .nomargin { 
    margin:0 !important; 
}

#device-wrapper .nomargins, #device-wrapper .nomargins div { 
    margin:0 !important;
    padding:0 !important; 
}

#device-wrapper .width100 { 
    width:100%; 
}

#device-wrapper .left { 
    float:left; 
}

#device-wrapper .right { 
    float:right; 
    text-align:right; 
}

#device-wrapper .center { 
    margin:auto;
    vertical-align:top;
    margin-top:0 !important;
    display:block;
    left:0;
    right:0;
    text-align:center; 
}

#device-wrapper .mini img { 
    width:30px; 
}

#device-wrapper .mob { 
    display:none; 
}

/* Padding utilities scoped to device-wrapper */
#device-wrapper .pad10 { padding:10px !important; }
#device-wrapper .pad15 { padding:15px !important; }
#device-wrapper .pad20 { padding:20px !important; }
#device-wrapper .pad30 { padding:30px !important; }
#device-wrapper .pad40 { padding:40px !important; }

/* Color utilities scoped to device-wrapper */
#device-wrapper .blackink { 

}

#device-wrapper .bold { 
    
}

#device-wrapper .grey { 

}

#device-wrapper .txt, #device-wrapper .txt p { 

}

#device-wrapper .positive { 

}

#device-wrapper .negative { 

}

#device-wrapper .neutral { 

}

#device-wrapper .neutralized  { 

    text-decoration:line-through !important; 
}

#device-wrapper .error {
    background-

    padding:4px 10px; 
}

#device-wrapper .small, #device-wrapper .small div, #device-wrapper .small div span {
    
}

#device-wrapper .small div, #device-wrapper .small div span {
    background:none !important;
}

#device-wrapper .mini, #device-wrapper .mini div {
    border:0;
    padding:5px;
    
}

/* Page container */
#device-wrapper .page_container {
    max-width:1000px;
    margin:auto;
}

#device-wrapper .page-center {
    max-width:800px;
    margin:auto;
}

/* Wrapper */
#device-wrapper .wrapper {
    margin-top: 0px;
    margin-bottom: 80px;
}

/* Fixed background */
#device-wrapper .fixed {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Classic border */
#device-wrapper .classic {
    border:1px solid #000;
    padding:3px;
    background:none;
    max-width:100%;
}

/* Margin utilities */
#device-wrapper .margin_left_40_desktop {
    padding:0 0 0 40px !important;
}

#device-wrapper .addspace {
    padding-top:40px;
}

/* Unbreakable layout */
#device-wrapper .unbreakable {
    width:100% !important;
    float:left !important;
    margin: 0;
    page-break-inside: avoid;
    break-inside: avoid-column;
    display:table;
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
    list-style:none;
}

#device-wrapper .unbreakable li {
    list-style:none;
    padding-bottom:5px;
}

/* Cap text style */
#device-wrapper .cap {
    
    letter-spacing:1px;
    text-transform:uppercase;
}

/* Grey box */
#device-wrapper .greybox {
    padding:30px 20px !important;
    background-
}
#device-wrapper html, #device-wrapper body {
  width: 100%;
  display:block;
  overscroll-behavior: contain;
}
#device-wrapper #page.shopping_cart { padding-top:50px; }
#device-wrapper .container-fluid {
  padding: 0 !important;
}
#device-wrapper .block {
/*  min-height: 322px;*/
  margin: auto;
}
#device-wrapper .bgwhite {
  background-
}
.col-round {
  width: 270px;
  min-height: 400px;
  border-radius: 20px;
  padding: 25px;
  margin:0px 10px;
  vertical-align:top;
  display:flex;
  align-items: flex-start;
}



.flex {display:flex !important; flex-wrap:wrap;justify-content:center; align-items:center; }
.top { align-self: flex-start; }
.flex-column { flex-direction:column;max-width:560px; }
.flex-row { flex-direction:row; flex-flow:row}
.desktop, .tablet { display:inline-block; }
.top0 { top:0px !important; }
.sidepad { padding:0px 30px !important}
.sidepad100 { padding:0px 100px !important}
.maxsize { max-width:100%;width:100%; }
.maxwidth { max-width:1350px !important; width:100%; }
.maxwidth-shorter {  max-width:1250px; width:100%;  }
.custompad { padding: 30px 18px 20px 18px !important }
.nopad { padding:0px !important }
.leftpad10 { padding-left:10px; }
.h400 { height:300px;}
div.block0 {  min-height:690px }
div.page { width:100%; }
#page .block { padding:40px 30px 40px 30px;}
.top5 { padding-top:5px;}
.top15 { padding-top:15px; }
.radius10 { border-radius:10px }
div#header-bg { max-height:282px; }
.padside10 { padding:0px 10px; }
.padside10.first { padding:0px 10px 0px 0px; }
.padside10.last { padding:0px 0px 0px 10px; }
#device-wrapper img { margin:0;text-align:left; display:block; }
#device-wrapper .shadow { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); }
/* logo */
.logo_mob { padding:0; }
.logo a,.logo_mob a {text-decoration:none !important; }
.logo img, .logo_mob img { width:100%;margin:0 !important;max-width:187px; }
header .head div.logo { padding:0px 0px 0px 24px}
.light .logo-light { display:block; }
.light .logo-dark { display:none; }
.dark .logo-light { display:none; }
.dark .logo-dark { display:block; opacity:0.8}

/* Header global styles */
header {
 position: var(--header-position, fixed) !important;
 width:100%;
 left:0;
 top:0;
 height:80px;
 background-
 transition: background-color 0.5s, opacity 0.3s ease-in-out;
 z-index:1000;
 padding:0;
 margin-top:0px;
 border-bottom: 1px solid #eee;
}

/* Regla #device-wrapper header eliminada: és redundant amb la regla `header { ... }`
   anterior i la regla de `header-device-wrapper.css` que llegeix
   --header-position-wrapper per respectar el checkbox de capçalera fixa. */


.triangle { position:relative;left:-10px;top:-8px;display:none; justify-content:center; align-items:center;}
header .head {
  padding: 0 !important;
  margin: auto;
  max-width: 1400px;
}

.top {
  display: flex;
  z-index: 99;
  width: 100%;
  border-top: 0 solid #000;
  margin-top: 0;
}

.table-wrapper {
  overflow-x: auto;
  margin-top: 20px;
}


@media(max-width: 900px) {

	.col-round {
	        width:100%;
	        margin-bottom:20px;
  align-items: center;
	}
        #column1 { width:80%;padding:30px 0px;min-height:auto }
	.flex-column { max-width: 100%; }

}

@media (max-width: 680px) {
  .desktop { display: none !important; }
  .mob { display: block !important; }
  /* Eliminar padding-left del logo a mòbil (a desktop és 24px) */
  header .head div.logo { padding-left: 0 !important; }
}
@container device (max-width: 680px) {
  #device-wrapper header .head div.logo { padding-left: 0 !important; }
}

/* Botó de més informació */
.whitebut {
   background: white;
  text-decoration:none !important;
  display: inline-block;
  padding: 9px 16px;
  text-decoration: none;
  border-radius: 19px;
  width: fit-content;
}
.whitebut:hover {
   background: #eee !important;
}
.whitebut2 {
   background: white !important;
  text-decoration:none !important;
  display: inline-block;
  padding: 5px 16px;
  text-decoration: none;
  border-radius: 19px;
  border:2px solid #30a3aa;
  width: fit-content;
  cursor:pointer;
}
.bg0 a.whitebut2:hover { }
.whitebut2:hover {
   background: #30a3aa !important;
}














/* ===================================
   PRIMARY BUTTON - Using CSS variables
   =================================== */
.button-primary {
	float: inherit;
	clear: both;
	border: var(--btn-primary-border-width, 2px) solid var(--btn-primary-border-color, #16b5b6);
	border-radius: var(--btn-primary-border-radius, 6px);
	transition: .3s ease;
	background-color: var(--btn-primary-bg-color, #16b5b6);
	margin-top: 30px;
	font-size: var(--btn-primary-font-size, 14px);
	padding: var(--btn-primary-padding-vertical, 12px) var(--btn-primary-padding-horizontal, 24px);
	text-align: center;
	width: fit-content;
	color: var(--btn-primary-text-color, #ffffff);
	text-decoration: none;
	box-shadow: var(--btn-primary-box-shadow, none);
	cursor: pointer;
	display: inline-block;
}

.button-primary:hover {
    text-decoration: none;
    background-color: var(--btn-primary-hover-bg-color, #139d9e);
    color: var(--btn-primary-hover-text-color, #ffffff);
    border-color: var(--btn-primary-hover-border-color, #139d9e);
}

.button-primary:active,
.button-primary.active {
    background-color: var(--btn-primary-selected-bg-color, #0f7c7d);
    color: var(--btn-primary-selected-text-color, #ffffff);
    border-color: var(--btn-primary-selected-border-color, #0f7c7d);
}

/* ===================================
   SECONDARY BUTTON - Using CSS variables
   =================================== */
.button-secondary {
	float: inherit;
	clear: both;
	border: var(--btn-secondary-border-width, 1px) solid var(--btn-secondary-border-color, #dee2e6);
	border-radius: var(--btn-secondary-border-radius, 6px);
	transition: .3s ease;
	background-color: var(--btn-secondary-bg-color, #f8f9fa);
	margin-top: 30px;
	font-size: var(--btn-secondary-font-size, 14px);
	padding: var(--btn-secondary-padding-vertical, 12px) var(--btn-secondary-padding-horizontal, 24px);
	text-align: center;
	width: fit-content;
	color: var(--btn-secondary-text-color, #495057);
	text-decoration: none;
	box-shadow: var(--btn-secondary-box-shadow, none);
	cursor: pointer;
	display: inline-block;
}

.button-secondary:hover {
    text-decoration: none;
    background-color: var(--btn-secondary-hover-bg-color, #e2e6ea);
    color: var(--btn-secondary-hover-text-color, #495057);
    border-color: var(--btn-secondary-hover-border-color, #adb5bd);
}

.button-secondary:active,
.button-secondary.active {
    background-color: var(--btn-secondary-selected-bg-color, #d3d9df);
    color: var(--btn-secondary-selected-text-color, #495057);
    border-color: var(--btn-secondary-selected-border-color, #98a2ac);
}

.loginbox .button-primary {
    margin-top:20px;
}

/* Disabled state for both button types */
.button-primary:disabled,
.button-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Cancel button */
.btn-cancel {
    background: #dc3545;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-cancel:hover {
    background: #c82333;
}

/* Save button */
.btn-save {
    background: #28a745;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save:hover {
    background: #218838;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Upload button */
.btn-upload {
    background: #007bff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-upload:hover {
    background: #0056b3;
}

.btn-lg, .btn-group-lg > .btn {
    border-radius:0; 
}

button.button-primary,
button.button-secondary {
    width: auto;
    text-align: center;
    justify-content: center;
}

.openbtn {
    cursor: pointer;
    background-color: #111;
    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#contact_bt {
    padding:10px 20px;
}

/* Media queries for buttons */
@media (max-width: 900px) {
    button.btn {
        margin-bottom:20px;
    }
}

    .cart-container {
      max-width: 800px;
      margin: 3rem auto;
      padding: 2rem;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .cart-header {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .cart-item {
      border-bottom: 1px solid #dee2e6;
      padding: 1rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .item-details {
      flex: 2;
    }
    .item-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 140px;
      justify-content: flex-end;
    }
    .checkout-btn {
      margin-top: 2rem;
      width: 100%;
    }
    .remove-btn {
      padding: 0.2rem 0.4rem;
      font-size: 0.8rem;
    }
    .tax-note {
      font-size: 0.9rem;
      color: #6c757d;
      margin-top: 0.5rem;
      text-align: right;
    }
.btn-sm { margin:0px !important; }
.btn-outline-danger { color:#dc3545 !important; }
.btn-outline-danger:hover { color:#fff !important; }
/**
 * Estils per al formulari de contacte
 */

/* Container principal */
#device-wrapper #contact-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 12px;
}

#device-wrapper #contact-container h1 {
    margin-bottom: 40px;
}

#device-wrapper #contact-container .contact-subtitle {
    text-align: center;
    color: #555;
    font-size: 1em;
    margin-bottom: 25px;
}

/* Formulari */
#device-wrapper #contact_form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#device-wrapper #contact_form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

#device-wrapper #contact_form label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 0px;
}

#device-wrapper #contact_form label .required {
    color: #e74c3c;
    font-size: 1.2em;
}

#device-wrapper #contact_form input[type="text"],
#device-wrapper #contact_form input[type="email"],
#device-wrapper #contact_form input[type="tel"],
#device-wrapper #contact_form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 0.95em;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
    color: #2c3e50;
}

#device-wrapper #contact_form input:focus,
#device-wrapper #contact_form textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(207, 99, 114, 0.1);
}

#device-wrapper #contact_form input.error,
#device-wrapper #contact_form textarea.error {
    border-color: #ff3838;
    background: #fff5f5;
}

#device-wrapper #contact_form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Checkbox LOPD */
#device-wrapper #contact_form .checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #ddd;
    transition: all 0.3s ease;
}

#device-wrapper #contact_form .checkbox-group:has(input:checked) {
    border-color: var(--accent-color);
    background: #fff;
}

#device-wrapper #contact_form .checkbox-group input[type="checkbox"] {
    margin-top: 3px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#device-wrapper #contact_form .checkbox-group label {
    flex: 1;
    font-weight: 400;
    font-size: 0.85em;
    line-height: 1.5;
    cursor: pointer;
    margin: 0;
    color: #2c3e50;
}

#device-wrapper #contact_form .checkbox-group a {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: 600;
}

#device-wrapper #contact_form .checkbox-group a:hover {
    color: color-mix(in srgb, var(--accent-color) 75%, black);
}

/* Honeypot (anti-spam) */
#device-wrapper #contact_form .hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Botó submit */
#device-wrapper #contact_form .btn-submit-group {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

#device-wrapper #contact_form .btn-submit {
    padding: 14px 45px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

#device-wrapper #contact_form .btn-submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-color) 85%, black);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

#device-wrapper #contact_form .btn-submit:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    box-shadow: none;
}

#device-wrapper #contact_form .btn-submit .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

#device-wrapper #contact_form .btn-submit.loading .spinner {
    display: block;
}

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

/* Missatges */
#device-wrapper #contact_form .form-message {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

#device-wrapper #contact_form .form-message.success {
    background: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}

#device-wrapper #contact_form .form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#device-wrapper #contact_form .field-error {
    color: #e74c3c;
    font-size: 0.8em;
    margin-top: -3px;
    display: none;
    font-weight: 500;
}

#device-wrapper #contact_form .field-error.show {
    display: block;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { }
    25% { }
    75% { }
}

/* Info de contacte */
#device-wrapper .contact-info {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #e0e0e0;
    text-align: center;
}

#device-wrapper .contact-info h3 {
    font-size: 1.3em;
    color: #2c3e50;
    margin-bottom: 15px;
}

#device-wrapper .contact-info-items {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

#device-wrapper .contact-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#device-wrapper .contact-info-item i {
    font-size: 1.8em;
    color: var(--accent-color);
}

#device-wrapper .contact-info-item a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
}

#device-wrapper .contact-info-item a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    #device-wrapper #contact-container {
        padding: 20px;
        margin: 20px;
    }

    #device-wrapper #contact-container h1 {
        margin-bottom: 30px;
    }

    #device-wrapper #contact_form {
        gap: 15px;
    }

    #device-wrapper #contact_form .btn-submit {
        padding: 12px 35px;
        font-size: 0.95em;
    }

    #device-wrapper .contact-info-items {
        flex-direction: column;
        gap: 20px;
    }
}

/* Sobreescriure estils de Bootstrap */
#device-wrapper #contact_form .form-group {
    margin-bottom: 0px;
}

div#contacta label {
    margin-bottom: 0px;
}
/* Sistema de grid personalitzat per substituir Bootstrap al header */
/* Aquest sistema utilitza CSS Grid i container queries quan estiguin disponibles */

.custom-header {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 0 20px;
}

/* Logo always on the left */
.custom-header .header-logo {
    grid-column: 1;
    justify-self: start;
}

/* Menu aligned to the right */
.custom-header .header-menu {
    grid-column: 2;
    justify-self: end;
}

/* Options before mobile menu */
.custom-header .header-options {
    grid-column: 3;
    justify-self: end;
}

/* Mobile menu always on the far right (hidden in desktop) */
.custom-header .header-mobile {
    grid-column: 4;
    justify-self: end;
}

/* Desktop layout - hide mobile menu and show desktop menu */
.custom-header.desktop-layout .header-mobile,
.custom-header:not(.mobile-layout):not(.tablet-layout) .header-mobile {
    display: none !important;
}

.custom-header.desktop-layout .header-menu,
.custom-header:not(.mobile-layout):not(.tablet-layout) .header-menu {
    display: block !important;
}

/* Mobile layout - logo centered, mobile menu and options to the right */
.custom-header.mobile-layout {
    grid-template-columns: 1fr auto auto;
    gap: 10px;
}

.custom-header.mobile-layout .header-logo {
    grid-column: 1;
    justify-self: left;
}

.custom-header.mobile-layout .header-menu {
    display: none; /* Hide desktop menu in mobile layout */
}

.custom-header.mobile-layout .header-options {
    grid-column: 2;
    justify-self: end;
}

.custom-header.mobile-layout .header-mobile {
    grid-column: 3;
    justify-self: end;
}

/* Tablet layout - similar to desktop but condensed */
.custom-header.tablet-layout {
    grid-template-columns: auto 1fr auto auto;
    gap: 15px;
}

.custom-header.tablet-layout .header-logo {
    grid-column: 1;
    justify-self: start;
}

.custom-header.tablet-layout .header-menu {
    display: none; /* Hide desktop menu in tablet, show mobile instead */
}

.custom-header.tablet-layout .header-options {
    grid-column: 3;
    justify-self: end;
}

.custom-header.tablet-layout .header-mobile {
    grid-column: 4;
    justify-self: end;
}

/* Flexbox fallback per navegadors antics */
.custom-header-flex {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
}

.custom-header-flex .header-logo {
    flex: 0 0 auto;
}

.custom-header-flex .header-menu {
    flex: 1 1 auto;
    text-align: center;
}

.custom-header-flex .header-options {
    flex: 0 0 auto;
}

.custom-header-flex .header-mobile {
    flex: 0 0 auto;
}

/* Mobile flexbox layout */
.custom-header-flex.mobile-layout {
    justify-content: space-between;
}

.custom-header-flex.mobile-layout .header-logo {
    flex: 1 1 auto;
    text-align: center;
}

.custom-header-flex.mobile-layout .header-menu {
    display: none;
}

.custom-header-flex.mobile-layout .header-options {
    flex: 0 0 auto;
    order: 2;
}

.custom-header-flex.mobile-layout .header-mobile {
    flex: 0 0 auto;
    order: 3;
}

/* Tablet flexbox layout */
.custom-header-flex.tablet-layout .header-menu {
    display: none;
}

.custom-header-flex.tablet-layout .header-options,
.custom-header-flex.tablet-layout .header-mobile {
    flex: 0 0 auto;
}

/* Responsive content containers - alternativa a Bootstrap */
.responsive-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.responsive-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.responsive-col {
    padding: 0 15px;
    flex: 1 1 auto;
}

/* Columnes específiques sense media queries */
.responsive-col-12 { flex: 0 0 100%; max-width: 100%; }
.responsive-col-9 { flex: 0 0 75%; max-width: 75%; }
.responsive-col-6 { flex: 0 0 50%; max-width: 50%; }
.responsive-col-3 { flex: 0 0 25%; max-width: 25%; }
.responsive-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.responsive-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.responsive-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.responsive-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }

/* Responsive classes controlades per JavaScript */
.responsive-mobile .responsive-col,
.responsive-mobile .responsive-col-2,
.responsive-mobile .responsive-col-3,
.responsive-mobile .responsive-col-4,
.responsive-mobile .responsive-col-6,
.responsive-mobile .responsive-col-8,
.responsive-mobile .responsive-col-9,
.responsive-mobile .responsive-col-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.responsive-tablet .responsive-col-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.responsive-tablet .responsive-col-9 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

/* Utilities for hiding/showing elements */
.show-mobile { display: none; }
.show-tablet { display: none; }
.show-desktop { display: block; }
.hide-mobile { display: block; }
.hide-tablet { display: block; }
.hide-desktop { display: none; }

/* When mobile layout is active */
.responsive-mobile .show-mobile { display: block !important; }
.responsive-mobile .hide-mobile { display: none !important; }
.responsive-mobile .show-desktop { display: none !important; }
.responsive-mobile .show-tablet { display: none !important; }

/* When tablet layout is active */
.responsive-tablet .show-tablet { display: block !important; }
.responsive-tablet .hide-tablet { display: none !important; }
.responsive-tablet .show-desktop { display: none !important; }

/* When desktop layout is active */
.responsive-desktop .show-desktop { display: block !important; }
.responsive-desktop .hide-desktop { display: none !important; }
.responsive-desktop .show-mobile { display: none !important; }
.responsive-desktop .show-tablet { display: none !important; }

/* Force correct alignment for mobile menu and options */
.header-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Layout per als elements fills de menu_options */
.header-options > div {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.header-options > div:first-child {
    margin-right: 10px;
}

.header-options > div:last-child {
    margin-left: 10px;
}

/* Ensure mobile menu is always visible when needed */
body.menu-mobile-active .header-mobile {
    display: flex !important;
}

body.menu-desktop-active .header-mobile {
    display: none !important;
}

/* Mobile specific adjustments */
.custom-header.mobile-layout .header-options,
.custom-header-flex.mobile-layout .header-options {
    margin-right: 10px;
}

.custom-header.mobile-layout .header-mobile,
.custom-header-flex.mobile-layout .header-mobile {
    margin-left: auto;
}

/* Assegurar que menu_mobile sigui sempre visible quan està activat */
body.menu-mobile-active #menu_mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Específicament per a l'alineació dins del header */
.header-mobile #menu_mobile {
    display: block !important;
}

/* Forçar que el menú mòbil aparegui dins del header */
header .header-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

header .custom-header.mobile-layout .header-mobile,
header .custom-header-flex.mobile-layout .header-mobile {
    display: flex !important;
}

/* Assegurar que les options sempre siguin visibles en mobile */
header .custom-header.mobile-layout .header-options,
header .custom-header-flex.mobile-layout .header-options {
    display: flex !important;
    align-items: center !important;
}

/* Forçar ordre correcte: options a l'esquerra, mobile a la dreta */
header .custom-header.mobile-layout {
    grid-template-columns: 1fr auto auto;
}

header .custom-header.mobile-layout .header-options {
    grid-column: 2;
    justify-self: end;
}

header .custom-header.mobile-layout .header-mobile {
    grid-column: 3;
    justify-self: end;
}

/* Debug: outline per veure els elements */
.debug-mode .header-mobile {
    outline: 3px solid lime !important;
}

.debug-mode #menu_mobile {
    outline: 2px solid orange !important;
}

.debug-mode .header-options {
    outline: 2px solid yellow !important;
}
/**
 * Device Wrapper Styles
 * Styles for the device-wrapper that contains all page content
 * Works in both edit and non-edit modes
 */

/* Default device-wrapper styles (non-edit mode) */
#device-wrapper {
    min-height: 100vh;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: device;
}

/* When NOT in edit mode, ensure wrapper takes full space */
body:not(.edit-mode-active) #device-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Eliminada: `transition: all 0.3s ease` al wrapper. El `all` provocava
   que qualsevol canvi de propietat al primer paint (fonts loading,
   container query application, ajust de variables CSS, etc.) animés tot
   el contingut visualment, fent que elements com la icona hamburguesa
   "es desplacessin" cap a la seva posicio final. */

/* Make sure content inside wrapper flows normally */
#device-wrapper > * {
    position: relative;
}.nomob { display:block !important; }
.mob { display: none !important; }


@media (max-width: 900px) {
.nomob { display:none !important; }
.mob { display:block !important; }

header { height:77px !important;}
}


/* Secció principal */
.features {
    max-width: 1000px;
    margin: auto;
    margin-top:0px;
}

.features h2 {
    
    margin-bottom: 20px;
}

/* Estructura de la graella */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Cada bloc */
.feature {
    background: rgba(255, 255, 255, 0.06);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
 /*   transition: transform 0.3s;*/

    display: flex; /* Disposa els elements en línia (icon + text) */
    align-items: center; /* Centra verticalment */
    gap: 15px; /* Espai entre la icona i el text */

}

/* Icones */

.icon-container {
    flex-shrink: 0; /* Evita que la icona es redueixi */
    align-self:normal;

  float: left;
  padding: 0px 15px 0px 0px;
}


.text-container {
    flex-grow: 1; /* Permet que el text ocupi l’espai disponible */

  float: left;
  width: calc(100% - 60px);
}

.icon {
    
    display: block;
    margin-bottom: 10px;

    height:auto;
}
img.icon {
        max-width:30px;
        height:30px;
        margin:auto;
}

/* Titols */
.feature h3 {
    padding-top:0px !important;
    
    line-height:normal;
    
}

/* Text */
.feature p {
    
    margin-bottom: 10px;
}

.feature a {
  text-decoration:none !important;
  display: inline-block;
  padding: 5px 16px;
  text-decoration: none;
  border-radius: 19px;
  
  

}


/* Contenidor principal */
.pricing-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Targetes de preus */
.pricing-card {
    background-
    border-radius: 12px;
/*    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);*/
    width: 300px;
    text-align: center;
    padding: 20px;
    border: 2px solid #fff;
    transition: transform 0.3s ease-in-out;
}

/* Destacar el pla més popular */
.popular {
    border-
}

/* Capçalera */
.pricing-header .badge {
    background: #38b48b;

    padding: 6px 12px;
    border-radius: 15px;
    
    
    display: inline-block;
    margin-bottom: 8px;
}

.pricing-header h3 {
    margin-bottom: 10px;
}

.discount {
    background: #eaf8f0;

    padding: 6px;
    
    
    border-radius: 5px;
    display: inline-block;
}

.old-price {
    

}

.price {
    

    margin-bottom:0px;
}

.yearly-price {
    

    margin-bottom:0px;
}

.taxes {
    

}

/* Característiques */
.pricing-features {
    margin: 15px 0px 0px 15px;
    text-align: left;
    max-width:550px;
}

.feature-title {
    display: block;
    background: #ebf5f3;

    
    
    padding: 6px;
    text-align: center;
    border-radius: 5px;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
}

.pricing-features li {
    padding: 4px 0;
    
}

.pricing-features li, .pricing-features li strong {

}

.pricing-container .pricing-features li { }
.pricing-container  .pricing-features { margin:15px 0px 15px 15px }
.featured {
    background: linear-gradient(to right,#5ac4b6 0,#50caad 100%);

    transition: background 0s ease-in-out;
}

/* Quan es fa hover, s'activa l'animació de fons en moviment */
.featured:hover {
    background: linear-gradient(45deg,#4dbfa7,#4cc1a7,#35d1af,#579ca6);
    background-size: 400% 400%;
    animation: gradientMove 1s linear forwards;
}

/* Animació del moviment del degradat */
@keyframes gradientMove {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


@media (min-width: 1000px) and (max-width: 1320px) {
        .pricing-card { width: 45%; }
}

@media (max-width: 999px) {
           .pricing-card { width: 100%;}
	.grid { margin-top:0px; }
	.grid .feature { padding:0px !important; background:none; }
}

.icon-round {
      display: inline-block;
      font-size: 24px; /* Adjust icon size */
      width: 50px; /* Make it a square */
      height: 50px;
      line-height: 50px; /* Center the icon vertically */
      text-align: center; /* Center the icon horizontally */
      border: 1px solid #fff; /* Add the border with desired color */
      border-radius: 50%; /* Make it round */
      color: #fff; /* Icon color */
      transition: all 0.3s ease; /* Add a smooth hover effect */
      padding:12px 0px;
      margin:10px 2px;
}

footer, .footer {
  clear: left;
  padding: 30px;
  height: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.footer {
  text-align: center;
}
.footer {
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer, .footer .menu a, .footer .menu span { color:#fff !important; font-size:15px;line-height:auto !important }
.footer span.title.bg  { font-size:1.3em;}
footer img.logo { margin:auto; max-width:173px}
/* General Menu Styling */
footer .menu {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    font-family: var(--p-font-family);
}

/* Main menu items (Titles) */
footer .menu > .title {
    text-decoration: none;
    color: black;
    font-weight: bold;
    display: block;
    padding: 10px;
    text-align:left;
}

/* Submenu Styling */
footer .submenu {
    display: none;
    padding-top: 5px;
}

footer .submenu .level2 {
    margin: 5px 0;
}

footer .submenu .level2 a {
    font-weight: normal;
    background: none;
    padding: 5px 0px;
    color: #555;
    display: block;
}

footer .submenu .level2 a:hover {
    color: black;
}

/* Default: Show Submenus */
footer .menu .submenu {
    display: block;
}

.footer h4 {
  font-size: 1.2rem;
}

@media (max-width: 1170px) {
        footer div.left { float:inherit !important;padding: 0px !important }
        footer .submenu .level2 { margin:0px !important;  }
}

@media (max-width: 900px) {
    .footer { text-align:left;}
    footer .menu { display: block;    }
    footer img.logo { margin:0; }
}

@media (min-width: 900px) {

    footer .menu {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }

    /* Each menu title and its submenu in a column */
    footer .menu > .title {
        flex: 1;
        padding: 15px;
    }

    /* Ensure submenus appear below their respective titles */
    footer .menu > .title + .option {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #f9f9f9;
        padding: 10px;
        border-radius: 5px;
        margin-top: 5px;
    }

    footer .menu .option .level2 {
        width: 100%;
        text-align: left;
    }

   footer .menu .bg { text-align:left !important; }
}

/* Additional footer styles from style2.css */

/* Social media buttons */
.social-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.social-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 18px;
}

.social-button:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.social-button.facebook {
    background: #3b5998;
}

.social-button.twitter {
    background: #1da1f2;
}

.social-button.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-button.linkedin {
    background: #0077b5;
}

.social-button.youtube {
    background: #ff0000;
}

/* Footer contact info */
.footer-contact {
    text-align: center;
    margin: 20px 0;
}

.footer-contact p {
    margin: 5px 0;
    color: #666;
}

.footer-contact a {
    color: #0254c1;
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
}

/* Footer copyright */
.footer-copyright {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #eee;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

/* Footer newsletter */
.footer-newsletter {
    background: #f8f9fa;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
    border-radius: 8px;
}

.footer-newsletter h3 {
    margin-bottom: 15px;
    color: #333;
}

.footer-newsletter p {
    margin-bottom: 20px;
    color: #666;
}

.newsletter-form {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.newsletter-form button {
    padding: 12px 20px;
    background: #0254c1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.newsletter-form button:hover {
    background: #0142a0;
}

/* LATAULA Footer Styles */
.lataula-footer {
    background-color: #f4d03f;
    padding: 40px 0;
    color: #333;
}

.lataula-footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lataula-footer .footer-left h2 {
    margin: 0;
}

.lataula-footer .footer-right {
    display: flex;
    align-items: center;
}

.lataula-footer .footer-contact-info {
    display: flex;
    gap: 40px;
    align-items: center;
}

.lataula-footer .contact-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.lataula-footer .contact-item strong {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.2;
}

.lataula-footer .contact-item span {
    font-size: 12px;
    color: #555;
    font-weight: 400;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .lataula-footer .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .lataula-footer .footer-contact-info {
        flex-direction: column;
        gap: 20px;
    }

    .lataula-footer .footer-left h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .lataula-footer .footer-contact-info {
        gap: 15px;
    }

    .lataula-footer .contact-item strong {
        font-size: 13px;
    }

    .lataula-footer .contact-item span {
        font-size: 11px;
    }
}

/* Footer responsive */
@media (max-width: 768px) {
    .social-buttons {
        flex-wrap: wrap;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }
}

/* Footer primary (logos) */
#device-wrapper .footer-primary {
    text-align: center;
    padding: 40px 0;
}

#device-wrapper .footer-primary .container {
    padding: 0 20px;
}

#device-wrapper .footer-primary figure {
    margin: 20px auto;
}

#device-wrapper .footer-primary img {
    display: block;
    margin: 0 auto;
}

/* Footer contact section */

#device-wrapper .footer-contact-section {
    padding: 30px 0 20px;
}

#device-wrapper .footer-partners-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#device-wrapper .footer-partner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 1 1 0;
    text-align: right;
}

#device-wrapper .footer-partner:first-child {
    flex: 2 1 0;
    align-items: flex-start;
    text-align: left;
}

#device-wrapper .footer-partner-label {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

#device-wrapper .footer-logo-qdm {
    max-height: var(--logo-max-height, 52px);
    width: auto;
    display: block;
}

#device-wrapper .footer-logo-partner {
    max-height: 28px;
    width: auto;
}

#device-wrapper .footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

#device-wrapper .footer-bottom-row a,
.footer-bottom-row a,
#device-wrapper .footer-legal-links a,
.footer-legal-links a,
#device-wrapper .footer-contact-info a,
.footer-contact-info a {
    color: #555 !important;
    text-decoration: none;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease;
}

#device-wrapper .footer-bottom-row a:hover {
    color: var(--accent-color);
}

#device-wrapper .footer-contact-info,
#device-wrapper .footer-legal-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#device-wrapper .footer-separator {
    color: #ccc;
    font-size: 13px;
}

/* Responsive footer contact */
@media (max-width: 768px) {
    #device-wrapper .footer-partners-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #device-wrapper .footer-partner {
        align-items: center;
    }

    #device-wrapper .footer-bottom-row {
        flex-direction: column;
        text-align: center;
    }

    #device-wrapper .footer-contact-info,
    #device-wrapper .footer-legal-links {
        justify-content: center;
    }
}

/* Form styles */
form input[type="text"],
form input[type="email"],
form input { 
    padding:5px;
} 

form input[type="submit"],
form input[type="submit"]:hover { 
    border:none; 
}

form input[type="submit"]:hover,
input[type="button"]:hover {   
    transition: 0.3s;
}


input[type="button"], 
input[type="submit"] { 
    cursor:pointer; 
}

input[type="checkbox"] { 
    margin-bottom:20px;
}

select,
#login input[type="text"], 
#afiliat input[type="text"] { 
    width:calc(100% - 16px);
    margin-bottom:20px;
}

#login input[type="submit"], 
#afiliat input[type="submit"] {  
    width:100%; 
}

input#newsletter { 
    max-width: calc(100% - 55px); 
}

input.del { 

    
    
}

/* Form compra */
#form_compra table { 
    margin:60px auto 30px;
}

/* Contact form */
.bt-contact-form-lmw { 
    padding:40px 0 0 50px; 
}

.bt-contact-form-lmw form.wpcf7-form > .item-form.bt-submit input[type="submit"] {
    height: 58px;
    width: 225px;
    border-radius: 0;
    
    line-height: 22px;
    
    background-
}

.bt-contact-form-lmw form > .item-form.bt-submit {
    margin-top: 30px;
    position: relative;
}

.bt-contact-form-lmw form > .item-form textarea, 
.bt-contact-form-lmw form > .item-form input {
    background-
    padding:10px !important;
}

/* Form structure styles */
.form-section {
    margin-bottom: 30px;
}

.form-section h4 {
    
    

    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    
    background-
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-
    box-shadow: 0 0 0 3px rgba(22, 181, 182, 0.1);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
    
}

.form-help {
    display: block;
    margin-top: 5px;
    

}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.form-control {
    margin-bottom:10px;
}

.form div b { 
    padding-top:10px; 
}

.form-signin {
    max-width: 380px;
    padding: 15px 35px 45px;
    margin: 0 auto;
}

/* Newsletter */
a#ssbut { 
    border:1px solid #222;
    margin-left:5px;
    padding:3px 3px 2px;

}

a#ssbut:hover { 
    background-

}

/* Search form */
#searchbox {  
    display:none;
    float: right;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background:rgb(81 6 73 / 80%);
    z-index: 9999;
    text-align: center;
    padding-top: 20%;
}

#searchbox input { 
    
    width:33%;
    
    background:#fff; 
    padding:20px 55px 20px 20px !important; 

}

#exec_search { 

    margin-left:-50px;
    cursor:pointer; 
}

#close_searchbox { 
    -webkit-touch-callout: none;
    user-select: none;
    cursor:pointer; 
    text-decoration:none;
    
    top:5px;
    right:30px; 
    

    position:absolute;
}

#searchbox_mobile { 
    padding:15px 0 15px 33px;
}

#searchbox_mobile input { 
    width:178px !important;

    background:none; 
}

/* Pros and contras lists */
form#list_pros li,
form#list_contras li { 
    padding: 5px 0; 
}

/* Media queries for forms */
@media (max-width: 900px) {
    div.form input,
    div.form textarea { 
        width:100%;
    }
    
    #searchbox { 
        display:none !important; 
    }
    
    #searchbox input { 
        
        width:70%; 
    }
}

@media (max-width: 1300px) {
    #searchbox input { 
        
        width:70%; 
    }
}

@media screen and (max-width: 767px) {
    #search_button { 
        cursor:pointer;     
        top: 26px;   
        position: absolute;    
        left: 30px;
    }
}/**
 * Header positioning fix for device-wrapper
 * Ensures header adapts properly when inside device-wrapper
 */

/* Override header position when inside device-wrapper.
   Llegeix --header-position-wrapper (default sticky) perquè el checkbox
   "capçalera fixa" de l'editor pugui desactivar-ho amb 'static'. */
#device-wrapper header {
    position: var(--header-position-wrapper, sticky) !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--header-height, 80px);
    background-color: var(--header-bg-color);
    transition: background-color .5s, opacity .3s ease-in-out;
    z-index: 1000;
    padding: 0;
    margin-top: 0;
    border-bottom: 1px solid #eee;
}

#device-wrapper #page {
    background-color: var(--page-bg-color);
}

#device-wrapper footer {
    background-color: var(--page-bg-color);
}
/* LATAULA Home Page Styles */
#device-wrapper .lataula-home {
    
}

/* Header customization for LATAULA - minimalist design */
#device-wrapper .home header {
    background-
    border-bottom: 1px solid #eee;
    padding: 0 40px !important;
}

#device-wrapper .home header .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

#device-wrapper .home .logo {
    flex: 0 0 auto;
}

#device-wrapper .home .logo img {
    display: none;
}

#device-wrapper .home .logo a {
    text-decoration: none;
    display: block;
}

#device-wrapper .home .logo a::after {
    content: "LATAULA studio";
    
    

    line-height: 1.1;
}

#device-wrapper .home .logo a::before {
    content: "";
}

/* Hide unnecessary header elements */
#device-wrapper .home #menu_options {
    display: none !important;
}

/* Simplify menu layout */
#device-wrapper .home #menu_desktop {
    margin-left: auto;
    flex: 0 0 auto;
}

#device-wrapper .home ul.menu {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#device-wrapper .home ul.menu li {
    margin: 0;
}

#device-wrapper .home ul.menu a {
    text-decoration: none;

    
    
    transition: color 0.3s ease;
}

#device-wrapper .home ul.menu a:hover {

}

/* Footer customization for LATAULA */
#device-wrapper .home footer .logo {
    display: none;
}

#device-wrapper .home footer::before {
    content: "LATAULA estudio";
    display: block;
    
    

    text-align: center;
    margin-bottom: 20px;
}

#device-wrapper .home footer .tagline {
    display: none;
}

/* Menu customization for LATAULA */
/* CSS eliminat - ara s'utilitza el menú PHP dinàmic */

/* Hero Section */
#device-wrapper .hero-section {
    min-height: 40vh;
    display: flex;
    align-items: center;
    background-
    padding: 40px 20px;
}

#device-wrapper .hero-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    text-align: left;
}

#device-wrapper .hero-title {
    
    

    margin-bottom: 20px;
    line-height: 1.1;
}

#device-wrapper .hero-subtitle {
    

    margin-bottom: 0;
    line-height: 1.5;
    
    max-width: 600px;
}

#device-wrapper .hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#device-wrapper .btn {
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    
    
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 150px;
}

/* Navigation Buttons Section */
#device-wrapper .nav-buttons-section {
    padding: 30px 0;
    background-
    border-bottom: 1px solid #eee;
}

#device-wrapper .nav-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    #device-wrapper .nav-buttons {
        flex-wrap: wrap;
        gap: 6px;
        max-width: 400px;
    }

    #device-wrapper .nav-btn {
        min-width: 70px;
        padding: 8px 12px;
        
    }
}

@media (max-width: 480px) {
    #device-wrapper .nav-buttons {
        flex-direction: column;
        max-width: 200px;
        gap: 8px;
    }

    #device-wrapper .nav-btn {
        width: 100%;
        min-width: auto;
    }
}

/* 4 Punts Section */
#device-wrapper .punts-section {
    padding: 80px 0;
    background-
}

#device-wrapper .section-title {
    text-align: center;
    
    

    margin-bottom: 60px;
}

#device-wrapper .punts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

#device-wrapper .punt-item {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

#device-wrapper .punt-item:hover {
    /* No transform */
}

#device-wrapper .punt-icon {
    margin-bottom: 20px;
}

#device-wrapper .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    

}

#device-wrapper .icon-circle.yellow {
    background-
}

#device-wrapper .punt-item h3 {
    
    

    margin-bottom: 15px;
}

#device-wrapper .punt-item p {

    line-height: 1.6;
}

/* Mètode Section */
#device-wrapper .metode-section {
    padding: 80px 0;
    background-
}

#device-wrapper .metode-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#device-wrapper .metode-text p {
    

    line-height: 1.7;
    margin-bottom: 40px;
}

#device-wrapper .metode-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

#device-wrapper .step {
    display: flex;
    align-items: center;
    gap: 10px;
}

#device-wrapper .step-number {
    width: 30px;
    height: 30px;
    background-
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    

}

#device-wrapper .step-text {
    

}

/* Equip Section */
#device-wrapper .equip-section {
    padding: 80px 0;
    background-
}

#device-wrapper .equip-section .team-members {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 40px 0;
}

#device-wrapper .equip-section .team-member strong {
    
    

}

#device-wrapper .equip-section .team-description {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#device-wrapper .equip-section .team-description p {
    
    line-height: 1.6;
    margin-bottom: 20px;

}

/* Som Cooperativa Section */
#device-wrapper .cooperativa-section {
    padding: 80px 0;
    background-
}

#device-wrapper .cooperativa-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#device-wrapper .cooperativa-section h2 {
    
    

    margin-bottom: 40px;
}

#device-wrapper .cooperativa-section .cooperativa-logos {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
    flex-wrap: wrap;
}

#device-wrapper .cooperativa-section .cooperativa-logos img {
    height: 60px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.3s ease;
}

#device-wrapper .cooperativa-section .cooperativa-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

#device-wrapper .cooperativa-section .cooperativa-description {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

#device-wrapper .cooperativa-section .cooperativa-description p {
    
    line-height: 1.8;
    margin: 8px 0;

}

/* Testimonials Section */
#device-wrapper .testimonials-section {
    padding: 80px 0;
    background-
}

#device-wrapper .testimonials-section .section-title {
    text-align: center;
    margin-bottom: 60px;
    
    

}

#device-wrapper .testimonials-section .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

#device-wrapper .testimonials-section .testimonial {
    text-align: center;
    padding: 20px;
}

#device-wrapper .testimonials-section .testimonial-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden;
}

#device-wrapper .testimonials-section .testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#device-wrapper .testimonials-section .testimonial-content p {
    
    line-height: 1.6;

    margin-bottom: 20px;
    font-style: italic;
}

#device-wrapper .testimonials-section .testimonial-author strong {
    display: block;
    
    

    margin-bottom: 5px;
}

#device-wrapper .testimonials-section .testimonial-author span {
    

}

/* Clients Section */
#device-wrapper .clients-section {
    padding: 80px 0;
    background-
}

#device-wrapper .clients-section .section-title {
    text-align: center;
    margin-bottom: 60px;
    
    

}

#device-wrapper .clients-section .clients-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

#device-wrapper .clients-section .clients-logos img {
    height: 60px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s ease;
}

#device-wrapper .clients-section .clients-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Global: remove underline from all h2 */
#device-wrapper h2 {
    text-decoration: none;
}

/* Background utilities */
#device-wrapper .bg-white { background-}
#device-wrapper .bg-light { background-}
#device-wrapper .bg-gray { background-}
#device-wrapper .bg-yellow { background-}

/* Container utilities */
#device-wrapper .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px 20px 20px;
}

#device-wrapper section.barri-nav-section .container { padding:0px !important; }

#device-wrapper .maxwidth {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive Design - Container Queries */
@container device (max-width: 768px) {
    #device-wrapper .container {
        padding: 0 0 10px 0;
    }

    #device-wrapper .maxwidth {
        padding: 0;
    }

    #device-wrapper .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    #device-wrapper .punts-grid {
        grid-template-columns: 1fr;
    }

    #device-wrapper .equip-section .team-members {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    #device-wrapper .cooperativa-section .cooperativa-logos {
        gap: 20px;
    }

    #device-wrapper .cooperativa-section .cooperativa-logos img {
        height: 40px;
    }

    #device-wrapper .testimonials-section .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #device-wrapper .clients-section .clients-logos {
        gap: 20px;
    }

    #device-wrapper .clients-section .clients-logos img {
        height: 40px;
    }

    #device-wrapper .metode-steps {
        flex-direction: column;
        align-items: center;
    }
}

@container device (max-width: 480px) {
    #device-wrapper .container {
        padding: 0;
    }

    #device-wrapper .maxwidth {
        padding: 0;
    }
}
svg.angledown { width:10px;padding:15px 0px;margin-left:8px;fill:#aaa }

.icon-round {
      display: inline-block;
      font-size: 24px; /* Adjust icon size */
      width: 50px; /* Make it a square */
      height: 50px;
      line-height: 50px; /* Center the icon vertically */
      text-align: center; /* Center the icon horizontally */
      border: 1px solid #fff; /* Add the border with desired color */
      border-radius: 50%; /* Make it round */
      color: #fff; /* Icon color */
      transition: all 0.3s ease; /* Add a smooth hover effect */
      padding:12px 0px;
      margin:10px 2px;
}

/*
.iconcolor1 { filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(400%) hue-rotate(120deg) brightness(100%) contrast(90%); }
.iconcolor2 { filter: brightness(0) saturate(100%) invert(71%) sepia(43%) saturate(410%) hue-rotate(130deg) brightness(97%) contrast(91%); }
.iconcolor3 { filter: brightness(0) saturate(100%) invert(72%) sepia(36%) saturate(420%) hue-rotate(145deg) brightness(96%) contrast(91%); }
.iconcolor4 { filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(450%) hue-rotate(160deg) brightness(94%) contrast(91%); }
.iconcolor5 { filter: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(480%) hue-rotate(180deg) brightness(92%) contrast(91%); }
.iconcolor6 { filter: brightness(0) saturate(100%) invert(74%) sepia(19%) saturate(520%) hue-rotate(195deg) brightness(94%) contrast(93%); }
.iconcolor7 { filter: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(550%) hue-rotate(210deg) brightness(95%) contrast(94%); }
.iconcolor8 { filter: brightness(0) saturate(100%) invert(77%) sepia(13%) saturate(580%) hue-rotate(215deg) brightness(96%) contrast(94%); }
.iconcolor9 { filter: brightness(0) saturate(100%) invert(78%) sepia(13%) saturate(600%) hue-rotate(220deg) brightness(97%) contrast(95%); }
*/
.iconcolor1,.iconcolor2,.iconcolor3,.iconcolor4,.iconcolor5,.iconcolor6,.iconcolor7,.iconcolor8,.iconcolor9 { 
filter:brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Dark mode styles for Font Awesome icons */
.dark .fa,
.dark [class^="fa-"],
.dark [class*=" fa-"] {
    color: #c7c7c7 !important;
}

.dark .icon-round {
    color: #c7c7c7 !important;
    border-color: #c7c7c7 !important;
}

div#languageDropdownContainer_mobile button { padding-top:12px !important; }
div#languageDropdownContainer_mobile button, div#languageDropdownContainer button { vertical-align:top;padding-top:3px; }
div#languageDropdownContainer_mobile svg.angledown, div#languageDropdownContainer svg.angledown { padding:0px !important; }
.dark #languageDropdownContainer_mobile button, .dark #languageDropdownContainer button{color:#111}
.light #languageDropdownContainer_mobile button, .light #languageDropdownContainer button{color:#212529 !important}
#languageDropdown { right: -16px;  top:32px;}
#languageDropdownContainer_mobile, #languageDropdownContainer { float:right;padding-top:0px; }

.dropdown-content {
  display: none;
  position: absolute;
  background-
  min-width: 80px;
  z-index: 999999999;
}
.dropdown button { }



.dropdown-content { opacity:0.9; border-radius:20px; }
.dropdown-content a { background:none; }
.dropdown-content a,.dropdown-content a:hover { border-radius:0px !important; }
.dropdown-content a:hover:first-child {  border-radius:20px 20px 0px 0px !important; }
.dropdown-content a:hover:last-child {  border-radius:0px 0px 20px 20px !important; }

.dropdown.active .dropdown-content {
  display: block;
}
.dropdown-content a {
padding: 12px 16px;
text-align:left;
display:block;

}
.dropdown-content a:hover {
  background-
}

/* Hide language selector for all devices */
#languageDropdownContainer,
#languageDropdownContainer_mobile,
div#languageDropdownContainer,
div#languageDropdownContainer_mobile,
#menu_mobile #languageDropdownContainer_mobile,
#device-wrapper #languageDropdownContainer,
#device-wrapper #languageDropdownContainer_mobile,
#device-wrapper #menu_mobile #languageDropdownContainer_mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

body.clients #page { min-height:600px !important; }

 #clients {
      padding: 100px 0px;
	
      /*  height: 100vh; */
    }
    #clients .container {
      display: flex;
      height: 500px;
    }
    #clients .half {
      flex: 1;
      padding: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #clients .left {
      background: linear-gradient(135deg, #3ec5a3, #3ca9b0);
    }
    #clients .left h2, #clients .right h2 {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    #clients .left h2::before {
      margin-right: 10px;
    }
    #clients .right h2::before {
      margin-right: 10px;
    }
    #clients input[type="text"], #clients input[type="password"] {
      width: 100%;
      padding: 12px 25px;
      border-radius: 30px;
      border: none;
      margin: 10px 0;
    }

    #clients .button-primary {
      padding: 12px 24px;
      border-radius: 30px;
      background: #7ad9c5 !important;
      border: none;
      cursor: pointer;
      margin-top: 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
    }
    #clients .button-primary:hover {
	background: #347c7e !important;
  }
    #clients .left .button-primary {
      background-color: #47c1a0;
    }
    #clients a {
      text-decoration: underline;
    }
    #clients .right a {
    }
    #clients .right {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      margin-left: 20px;
}
    }

input::-webkit-input-placeholder {
}

input::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder {
}

input::placeholder {
}
.icon_login { width:70px; padding-right:10px; }

.language-selector {
  text-align: center;
  margin-bottom: 25px;
}

@media screen and (max-width: 768px) {
  #clients .container {
    flex-direction: column;
    height: auto;
  }

  #clients .half {
    padding: 30px 20px;
  }


  #clients .left, 
  #clients .right {
    margin: 10px 0;
  }

  #clients h2 {
  }

  #clients input {
  }

  #clients .button-primary {
    padding: 10px 20px;
  }
}
div#menu_mobile { top:0px; position: relative !important; display: none; }

/* Assegurar que menu_mobile mai es vegi en desktop */
@media (min-width: 901px) {
  #menu_mobile {
    display: none !important;
  }
}
#menu_desktop { position:relative; left:0; padding-top: 30px; display: block; }
div#menu_options  { display:block;float:right;text-align:right;padding-top: 35px;  }

/* Estils per defecte dels menús - gestionats per JavaScript */
#device-wrapper body.menu-mobile-active #menu_desktop { display: none !important; }
#device-wrapper body.menu-mobile-active #menu_mobile { display: block !important; }
#device-wrapper body.menu-desktop-active #menu_desktop { display: block !important; }
#device-wrapper body.menu-desktop-active #menu_mobile { display: none !important; }
#menu_desktop ul.menu { float:right; cursor:pointer; margin:0 11px 0 0; }
 #menu_desktop li.item a span { padding:8px 0; height:auto; letter-spacing:0px; }
#menu_desktop li.item.selected a span { font-weight:normal}
#menu_desktop li.item.level1 {
  margin: 0 20px;
}
#menu_desktop a.level1, #menu_desktop span.level1 {
  padding: 0;
}
#menu_desktop li.item {
  float: left;
  margin: 0;
  list-style: none;
  padding: 0;
}
#menu_desktop li {
  position: relative;
  z-index: 15;
  margin: 0;
  text-align: left;
}
#menu_desktop li.item a {
  text-decoration: none;
 cursor:pointer;
}
#menu_desktop a.level1 span.bg, #menu_desktop span.level1 span.bg {
  white-space: nowrap;
  overflow: visible;
  display: block;
}

#menu_desktop li.level1.item a span,#search_button i {}
#menu_desktop li.level2.item a span {}
#menu_desktop ul { padding:0; list-style:none; overflow:visible;}
#page { position:relative; min-height:1200px; /* margin-top:115px;*/ }


#device-wrapper ul.menu .submenu { position:fixed; width:100%; left:0px; top:79px; width:100%; max-width:100%; }

#device-wrapper .submenu h3, #device-wrapper .submenu h2, #device-wrapper .submenu p {text-align:left }

.submenu.container {
    display: flex;
    background: linear-gradient(225deg,#579CA6 0,#4CC1A7 100%);
    border-radius: 0px;
    padding: 30px;

    align-items: center;
}

/* Features Section */
.submenu .features {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 20px;
}

.submenu .feature {
    display: flex;
    align-items: center;
    width: 45%;
    gap: 15px;
}

.submenu .icon {
    width:30px;
    max-height:35px;
    position:relative;
    top:-13px;
}

#menu_desktop li.item.selected a span  { border-bottom: 4px solid var(--accent-color, #e63e53) }

/* Estils per al disseny estudi - menú simplificat */
.estudi-style #menu_desktop {
  padding-top: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.estudi-style #menu_desktop ul.menu {
  float: right;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.estudi-style #menu_desktop li.item.level1 {
  margin: 0 0 0 30px;
  display: inline-block;
}

.estudi-style #menu_desktop li.item.level1:last-child {
  margin-right: 20px;
}

.estudi-style #menu_desktop li.item a span {
  
  
  text-transform: none;
  letter-spacing: 0;

  padding: 10px 0;
}

.estudi-style #menu_desktop li.item.selected a span {
  border-bottom: none;
  
}

.estudi-style #menu_desktop li.item a:hover span {

}

/* Ajustar logo per a l'estil estudi (només quan no estem en mode d'edició) */
.estudi-style div[name="logo"] {
  padding-top: 15px;
}

.estudi-style .logo img {
  max-height: var(--logo-max-height, 50px);
  width: auto;
}

/* Ocultar elements del menú no necessaris en estil estudi */
.estudi-style #menu_options {
  display: none !important;
}

/* Responsivitat per a l'estil estudi */
@media (max-width: 1170px) {
  .estudi-style #menu_desktop {
    display: none !important;
  }

  .estudi-style #menu_mobile {
    display: block !important;
  }
}

/* Assegurar que el menú mòbil funcioni amb l'estil estudi */
.estudi-style #menu_mobile {
  background-
  padding: 0;
  margin: 0;
  margin-top: 15px !important;
}

/* En mòbil real (sense logo desktop) la icona hamburguesa queda massa
   avall per culpa del margin-top: 15px. La alineem amb el logo. */
@media (max-width: 680px) {
  .estudi-style #menu_mobile {
    margin-top: 0 !important;
  }
}
@container device (max-width: 680px) {
  #device-wrapper .estudi-style #menu_mobile {
    margin-top: 0 !important;
  }
}

.estudi-style #menu_mobile .navbar-toggler {
  border: none;
  padding: 4px 8px;

}

.estudi-style #menu_mobile .navbar-toggler:focus {
  box-shadow: none;
}

/* Ocultar selector d'idiomes en el menú mòbil per a l'estil estudi */
.estudi-style #menu_mobile .group_buttons > div:not(.menuicon) {
  display: none;
}

/* Restablir estils originals del menú quan estem en mode d'edició */








#shopping_cart {
  float: right !important;
  
  
  padding: 5px 0 0 15px;
}

#shopping_cart a {

}

.dropdown button {
  background: 0;
  border: 0;
  padding: 5px;
  
}


#mySidebar span {}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    /* Limitem transition a les propietats que realment canvien entre
       hamburguesa <-> X (transform, opacity, background). Abans era
       `transition: 0.4s` (= all 0.4s), que animava qualsevol re-layout
       al primer paint (canvis de margin per media/container queries,
       font swap, etc.) i causava un "moviment estrany" del botó. */
    transition: transform 0.4s, opacity 0.4s, background-color 0.4s;
}

.navbar-toggle.close #bar1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.navbar-toggle.close #bar2 {
    opacity: 0;
}

.navbar-toggle.close #bar3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

div#menu_mobile {
  display: none;
  position: relative;
  z-index: 99999;
  width: auto;
  right: 0;
}

div.group_buttons {
  position: relative;
  z-index: 999999;
  top: 0px;
  right: 10px;
  float: right;

  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row-reverse;
}

/* Aplicar margin-top específic a .menuicon */
.menuicon {
  margin-top: 15px !important;
  display: flex;
  align-items: center;
  position: relative;
}

div#menu_mobile .navbar-toggle.close .icon-bar
{
   background: transparent;
}
.navbar-toggle:focus {
    outline: none;
    background: transparent;
}

.navbar .navbar-toggle {
    top: 10px;
}


.navbar-toggle {
    cursor: pointer;
    position: relative;
    float: right;
    margin: 7px 10px 8px 0px;
    padding: 0px;
    background: transparent !important;
    background-image: none;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* Prevenir que el botó del menú mòbil apliqui els estils generals de button:hover */
.navbar-toggle:hover,
.navbar-toggle.openbn:hover,
button.navbar-toggle:hover,
.menuicon button.navbar-toggle:hover,
#menu_mobile button.navbar-toggle:hover,
#menu_mobile .navbar-toggle:hover {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* També prevenir canvis en active i focus */
.navbar-toggle:active,
.navbar-toggle:focus,
button.navbar-toggle:active,
button.navbar-toggle:focus {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


/* sidebar */

.sidebar {
  /* Position fixed (no absolute) perquè cobreixi tota la pantalla
     independentment del contenidor #menu_mobile (que és relative amb
     alçada petita). z-index molt alt perquè quedi per sobre del header
     (1000), slider, footer, etc. */
  height: calc(100vh - var(--header-height, 80px));
  opacity: 1;
  position: fixed;
  z-index: 9999;
  top: var(--header-height, 80px);
  left: 100%;
  width: 100%;
  background-
  overflow-x: hidden;
  overflow-y: auto;
  transition: left .2s ease-in-out;
  padding: 20px 0 0;
  margin: 0;
}
/* Assegurar que mySidebar està ocult per defecte */
#mySidebar {
    display: none !important;
}

#mySidebar.open {
    display: block !important;
    left: 0 !important;
}

#device-wrapper #mySidebar {
    display: none !important;
}

#device-wrapper #mySidebar.open {
    display: block !important;
    left: 0 !important;
}

.sidebar.open {
  left: 0;
}

/* Específic per dispositius simulats dins del device-wrapper.
   Mantenim absolute aquí perquè dins l'editor el sidebar ha de quedar
   dins del wrapper (no fixed al viewport real). */
#device-wrapper .sidebar {
  position: absolute;
  top: var(--header-height, 80px);
  left: 100%;
  width: 100%;
  height: calc(100% - var(--header-height, 80px));
  z-index: 9999;
  background-
}

#device-wrapper .sidebar.open {
  left: 0;
}

/* Sidebar quan està fora del menu_mobile (millor posicionament) */
#device-wrapper > .sidebar {
  position: absolute;
  top: var(--header-height) !important;
  left: 100%;
  width: 100%;
  height: calc(100% - 80px);
  z-index: 999;
  background:#fff;
  transition: top .2s ease-in-out;
  opacity: 1;
  padding: 20px 0 0;
  margin: 0;
  box-sizing: border-box;
}
button.close { opacity:1 !important }


#device-wrapper > .sidebar.open {
  left: 0;
}

/* Assegurar visibilitat quan està obert */
body.menu-mobile-active .sidebar.open,
body.mobile-menu-open .sidebar.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Específic per quan el menú mòbil està obert */
body.mobile-menu-open .sidebar {
  display: block;
}

/* Quan el sidebar és fill directe del body (fora de device-wrapper) */
body > .sidebar {
  position: fixed;
  top: 80px;
  left: 100%;
  width: 100%;
  height: calc(100vh - 80px);
  z-index: 999;
  background-
  transition: left .2s ease-in-out;
  opacity: 1;
  padding: 20px 0 0;
  margin: 0;
  box-sizing: border-box;
}

body > .sidebar.open {
  left: 0;
}

.sidebar a {
  text-align:left;
  padding: 0 30px;
  text-decoration: none;
  

  display: block;
  
  transition: 0.3s;
}
.sidebar a.level1 { padding-bottom:30px;}

.sidebar a:hover {

  background-
}

/* Assegurar color negre amb alta especificitat */
#mySidebar a,
#mySidebar a span,
#mySidebar a.level1,
#mySidebar a.level2,
.sidebar a span,
.sidebar a.level1 span,
.sidebar a.level2 span {

}

#mySidebar a:hover,
#mySidebar a:hover span,
.sidebar a:hover span {
    color: var(--accent-color) !important;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  
  margin-left: 50px;
}

@media (max-width: 900px) {

   .submenu .container {
        flex-direction: column;
        text-align: center;
    }

    .submenu .features {
        flex-direction: column;
    }

    .submenu .feature {
        width: 100%;
    }

}


/* Media query comentada - ara la visibilitat dels menús es gestiona amb JavaScript basat en l'amplada del device-wrapper
@media (max-width: 1170px) {
  div#menu_desktop, .desktop {
    display: none !important;
  }
  div#menu_mobile {
    display: block !important;
  }
}
*/

/* Additional menu styles from style2.css */

/* Navigation styles */
.nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-item {
    margin:0 10px;
}

.nav-link {

    text-decoration:none;
    padding:8px 12px;
    border-radius:4px;
    transition:all 0.3s ease;
}

.nav-link:hover {
    background:#f0f0f0;

}

/* Dropdown menus */
.dropdown {
    position:relative;
    display:inline-block;
}

.dropdown-content {
    display:none;
    position:absolute;
    background:#fff;
    min-width:160px;
    box-shadow:0 8px 16px rgba(0,0,0,0.2);
    z-index:1;
    border-radius:4px;
    overflow:hidden;
}

.dropdown:hover .dropdown-content {
    display:block;
}

.dropdown-content a {

    padding:12px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover {
    background:#f1f1f1;
}

/* Breadcrumb navigation */
.breadcrumb {
    display:flex;
    list-style:none;
    padding:0;
    margin:0;
    
}

.breadcrumb li {
    margin-right:8px;
}

.breadcrumb li:after {
    content:'/';
    margin-left:8px;

}

.breadcrumb li:last-child:after {
    content:'';
}

.breadcrumb a {

    text-decoration:none;
}

.breadcrumb a:hover {
    text-decoration:underline;
}
/* Modal and popup styles */

/* Modal base styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-
}

.modal-content {
    background-
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.modal-title {
    margin: 0;
    

}

.modal-close {

    float: right;
    
    
    cursor: pointer;
    border: none;
    background: none;
}

.modal-close:hover,
.modal-close:focus {

    text-decoration: none;
}

.modal-body {
    padding: 15px 0;
}

.modal-footer {
    padding-top: 15px;
    border-top: 1px solid #ddd;
    text-align: right;
}

/* Modal animations */
.modal.show {
    display: block;
    animation: fadeIn 0.3s;
}

.modal.hide {
    animation: fadeOut 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Popup styles */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1001;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

/* Tooltip styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-

    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Alert styles */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {

    background-
    border-
}

.alert-info {

    background-
    border-
}

.alert-warning {

    background-
    border-
}

.alert-danger {

    background-
    border-
}

.alert-dismissible {
    padding-right: 35px;
}

.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;

}

/* Notification styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    background: #333;

    border-radius: 4px;
    z-index: 1002;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.notification.success {
    background: #28a745;
}

.notification.error {
    background: #dc3545;
}

.notification.warning {
    background: #ffc107;

}

.notification.info {
    background: #17a2b8;
}

/* Responsive modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .popup {
        width: 95%;
        max-width: none;
    }
    
    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}/* Eliminar outline de tots els botons */
#device-wrapper button,
#device-wrapper button:focus,
#device-wrapper button:active,
#device-wrapper button:hover,
#device-wrapper .btn,
#device-wrapper .btn:focus,
#device-wrapper .btn:active,
#device-wrapper .btn:hover,
#device-wrapper input[type="button"],
#device-wrapper input[type="button"]:focus,
#device-wrapper input[type="button"]:active,
#device-wrapper input[type="button"]:hover,
#device-wrapper input[type="submit"],
#device-wrapper input[type="submit"]:focus,
#device-wrapper input[type="submit"]:active,
#device-wrapper input[type="submit"]:hover,
#device-wrapper input[type="reset"],
#device-wrapper input[type="reset"]:focus,
#device-wrapper input[type="reset"]:active,
#device-wrapper input[type="reset"]:hover,
#device-wrapper [role="button"],
#device-wrapper [role="button"]:focus,
#device-wrapper [role="button"]:active,
#device-wrapper [role="button"]:hover,
#device-wrapper .whitebut,
#device-wrapper .whitebut:focus,
#device-wrapper .whitebut:active,
#device-wrapper .whitebut:hover,
#device-wrapper .whitebut2,
#device-wrapper .whitebut2:focus,
#device-wrapper .whitebut2:active,
#device-wrapper .whitebut2:hover,
#device-wrapper .specialbut,
#device-wrapper .specialbut:focus,
#device-wrapper .specialbut:active,
#device-wrapper .specialbut:hover,
#device-wrapper .roundbut,
#device-wrapper .roundbut:focus,
#device-wrapper .roundbut:active,
#device-wrapper .roundbut:hover,
#device-wrapper .roundbut2,
#device-wrapper .roundbut2:focus,
#device-wrapper .roundbut2:active,
#device-wrapper .roundbut2:hover,
#device-wrapper .alt,
#device-wrapper .alt:focus,
#device-wrapper .alt:active,
#device-wrapper .alt:hover,
#device-wrapper .but,
#device-wrapper .but:focus,
#device-wrapper .but:active,
#device-wrapper .but:hover,
#device-wrapper .openbtn,
#device-wrapper .openbtn:focus,
#device-wrapper .openbtn:active,
#device-wrapper .openbtn:hover {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}

/* Eliminar outline específic de Bootstrap */
#device-wrapper .button-primary:focus,
#device-wrapper .button-secondary:focus,
#device-wrapper .btn-success:focus,
#device-wrapper .btn-danger:focus,
#device-wrapper .btn-warning:focus,
#device-wrapper .btn-info:focus,
#device-wrapper .btn-light:focus,
#device-wrapper .btn-dark:focus,
#device-wrapper .btn-outline-primary:focus,
#device-wrapper .btn-outline-secondary:focus,
#device-wrapper .btn-outline-success:focus,
#device-wrapper .btn-outline-danger:focus,
#device-wrapper .btn-outline-warning:focus,
#device-wrapper .btn-outline-info:focus,
#device-wrapper .btn-outline-light:focus,
#device-wrapper .btn-outline-dark:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Eliminar focus ring de webkit */
#device-wrapper button:focus:not(:focus-visible),
#device-wrapper .btn:focus:not(:focus-visible),
#device-wrapper input[type="button"]:focus:not(:focus-visible),
#device-wrapper input[type="submit"]:focus:not(:focus-visible),
#device-wrapper input[type="reset"]:focus:not(:focus-visible) {
    outline: 0 !important;
}

/* Eliminar inner focus de Firefox */
#device-wrapper button::-moz-focus-inner,
#device-wrapper .btn::-moz-focus-inner,
#device-wrapper input[type="button"]::-moz-focus-inner,
#device-wrapper input[type="submit"]::-moz-focus-inner,
#device-wrapper input[type="reset"]::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
    outline: none !important;
}/* Page-specific styles */

/* Home page styles */
body.home {
    background: #fff;
}

body.home .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

body.home .hero {
    text-align: center;
    padding: 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

}

body.home .hero h1 {
    
    margin-bottom: 20px;
    
}

body.home .hero p {
    
    margin-bottom: 30px;
    opacity: 0.9;
}

body.home .features {
    padding: 80px 0;
    background: #f8f9fa;
}

body.home .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

body.home .feature-card {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

body.home .feature-card:hover {
    /* No transform */
}

body.home .feature-icon {
    

    margin-bottom: 20px;
}

body.home .feature-title {
    
    margin-bottom: 15px;

}

body.home .feature-description {

    line-height: 1.6;
}

/* Presentation page styles */
body.presentacio {
    background: #f5f5f5;
}

body.presentacio .header {
    background: linear-gradient(45deg, #2c3e50, #3498db);

    padding: 60px 0;
    text-align: center;
}

body.presentacio .content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    border-radius: 8px;
    margin-top: -30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

body.presentacio .section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

body.presentacio .section:last-child {
    border-bottom: none;
}

body.presentacio .section-title {
    

    margin-bottom: 20px;
    position: relative;
}

body.presentacio .section-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    background: #3498db;
}

/* Contact page styles */
body.contact {
    background: #f8f9fa;
}

body.contact .contact-header {
    background: #343a40;

    padding: 60px 0;
    text-align: center;
}

body.contact .contact-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}

body.contact .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 40px;
}

body.contact .contact-info {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

body.contact .contact-form {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

body.contact .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

body.contact .info-icon {
    

    margin-right: 15px;
    width: 30px;
}

body.contact .info-text {

}

/* About page styles */
body.about {
    background: white;
}

body.about .about-hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/images/about-bg.jpg');
    background-size: cover;
    background-position: center;

    padding: 120px 0;
    text-align: center;
}

body.about .about-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 20px;
}

body.about .about-section {
    margin-bottom: 60px;
}

body.about .about-title {
    

    margin-bottom: 30px;
    text-align: center;
}

body.about .about-text {
    
    line-height: 1.8;

    margin-bottom: 20px;
}

body.about .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

body.about .team-member {
    text-align: center;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
}

body.about .member-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    background: #ddd;
    background-size: cover;
    background-position: center;
}

body.about .member-name {
    

    margin-bottom: 10px;
}

body.about .member-role {

    
    margin-bottom: 15px;
}

body.about .member-bio {

    
    line-height: 1.6;
}

/* Blog page styles */
body.blog {
    background: #f8f9fa;
}

body.blog .blog-header {
    background: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

body.blog .blog-title {
    text-align: center;
    

    margin-bottom: 10px;
}

body.blog .blog-subtitle {
    text-align: center;

    
}

body.blog .blog-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

body.blog .blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

body.blog .blog-posts {
    display: grid;
    gap: 40px;
}

body.blog .blog-post {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

body.blog .blog-post:hover {
    /* No transform */
}

body.blog .post-image {
    height: 200px;
    background: #ddd;
    background-size: cover;
    background-position: center;
}

body.blog .post-content {
    padding: 30px;
}

body.blog .post-title {
    

    margin-bottom: 15px;
}

body.blog .post-title a {

    text-decoration: none;
}

body.blog .post-title a:hover {

}

body.blog .post-meta {

    
    margin-bottom: 15px;
}

body.blog .post-excerpt {

    line-height: 1.6;
    margin-bottom: 20px;
}

body.blog .read-more {

    text-decoration: none;
    
}

body.blog .read-more:hover {
    text-decoration: underline;
}

/* Blog post categories */
body.blog .blog-post-categories {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.blog .category-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    
    

    text-decoration: none;
    transition: opacity 0.3s ease;
}

body.blog .category-tag:hover {
    opacity: 0.8;
}

body.blog .blog-sidebar {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: fit-content;
}

body.blog .sidebar-widget {
    margin-bottom: 40px;
}

body.blog .sidebar-widget:last-child {
    margin-bottom: 0;
}

body.blog .widget-title {
    

    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
}

body.blog .widget-content ul {
    list-style: none;
    padding: 0;
}

body.blog .widget-content li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

body.blog .widget-content li:last-child {
    border-bottom: none;
}

body.blog .widget-content a {

    text-decoration: none;
}

body.blog .widget-content a:hover {

}

/* Articles/blog - responsive mòbil */
@container device (max-width: 768px) {
    #device-wrapper #page .centered.maxwidth {
        padding: 0 8px !important;
        max-width: 100% !important;
    }

    #device-wrapper div#post {
        margin-top: 0 !important;
    }

    #device-wrapper #page .article {
        padding: 0;
    }

    #device-wrapper #page .article_header {
        padding: 0 5px;
    }

    #device-wrapper #page .article_header h1 {
        font-size: 1.6em;
        line-height: 1.3;
    }

    #device-wrapper #page .article_body {
        padding: 0 5px;
    }

    #device-wrapper #page .article_body img {
        max-width: 100% !important;
        height: auto !important;
    }

    #device-wrapper #page .imatgeportada {
        min-height: 200px;
    }

    #device-wrapper #page #content.container-fluid {
        padding: 0 !important;
    }
}

@container device (max-width: 480px) {
    #device-wrapper #page .centered.maxwidth {
        padding: 0 5px !important;
    }

    #device-wrapper #page .article_header h1 {
        font-size: 1.3em;
    }
}

/* Responsive design for pages */
@media (max-width: 768px) {
    body.home .hero h1 {
        
    }
    
    body.home .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    body.contact .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    body.about .team-grid {
        grid-template-columns: 1fr;
    }
    
    body.blog .blog-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    body.presentacio .content {
        margin-top: 0;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    body.home .hero {
        padding: 60px 0;
    }
    
    body.home .hero h1 {
        
    }
    
    body.home .feature-card {
        padding: 30px;
    }
    
    body.contact .contact-info,
    body.contact .contact-form {
        padding: 30px;
    }
    
    body.about .about-hero {
        padding: 80px 0;
    }
    
    body.blog .post-content {
        padding: 20px;
    }
    
    body.blog .blog-sidebar {
        padding: 30px;
    }
}/* Products Gallery Styles - Minimalist Design */

/* Contenidor principal de productes */
.products-container {
    max-width: var(--container-width-value);
    margin: 0px auto;
    padding: 40px 20px;
    text-align: center;
}

/* Ajustar padding responsive del contenidor principal */
@container device (max-width: 768px) {
    .products-container {
        padding: 0 !important;
        margin: 30px auto !important;
    }

    #page .block {
        padding: 0 !important;
    }
}

@container device (max-width: 480px) {
    .products-container {
        padding: 0 !important;
        margin: 20px auto !important;
    }

    #page .block {
        padding: 0 !important;
    }
}

/* Search Box */
.products-search-container {
    max-width: 600px;
    margin: 0 auto 60px auto;
    position: relative;
}

.products-search-input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    font-size: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: #fafafa;
}

.products-search-input:focus {
    outline: none;
    border-color: var(--text-color);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.products-search-input::placeholder {
    color: var(--text-color-secondary);
}

.products-search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
    pointer-events: none;
}

.products-search-clear {
    position: absolute;
    right: 45px;
    top: 25%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color-secondary);
    cursor: pointer;
    padding: 5px;
    display: none;
    transition: color 0.2s;
}

.products-search-clear:hover {
    color: var(--text-color);
}

.products-search-clear.visible {
    display: block;
}

.products-search-results {
    text-align: center;
    color: var(--text-color-secondary);
    margin-bottom: 20px;
    font-size: 14px;
}

/* Gallery Grid - 3 columns */
.product-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 0;
    max-width: var(--container-width-value);
    margin: 0 auto;
}

.product-item {
    position: relative;
}

.product-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-item .image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.product-item .image-wrapper.loaded {
    background: none;
    animation: none;
}

.product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.product-item img.loaded {
    opacity: 1;
}

.product-info {
    margin-top: 15px;
    text-align: left;
}

.product-name {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 5px;
}

.product-category {
    font-size: 13px;
    color: var(--text-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-ref {
    font-size: 12px;
    color: var(--text-color-secondary);
    margin-top: 3px;
}

/* Product Detail Page */
.product-detail-container {
    max-width: 1200px;
    margin: 0px auto;
    padding: 40px 0px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.product-gallery-container {
    position: sticky;
    top: 100px;
}

.product-main-image {
    width: 100%;
    height: 500px;
    background: #fafafa;
    overflow: hidden;
    margin-bottom: 20px;
    touch-action: manipulation;
}

.product-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
}

.product-slide {
    display: none;
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.product-slide.active {
    display: block;
}

.product-slider-dots {
    display: none;
}

.product-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.product-thumbnail {
    width: 100%;
    height: 80px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    overflow: hidden;
}

.product-thumbnail:hover,
.product-thumbnail.active {
    border-color: var(--text-color);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-details h1 {
    font-size: 32px;
    margin: 0 0 10px 0;
}

.product-details .product-ref {
    font-size: 16px;
    color: var(--text-color-secondary);
    margin-bottom: 30px;
}

.product-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 30px;
}

.product-meta {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

.product-meta-item {
    margin-bottom: 15px;
}

.product-meta-item strong {
    display: inline-block;
    width: 120px;
    color: var(--text-color);
}

/* Loading Indicator - Skeleton Style */
.loading-indicator {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 0;
    margin: 20px 0;
}

.loading-skeleton {
    width: 100%;
    animation: fadeIn 0.3s ease-in;
    position: relative;
}

.loading-skeleton-image {
    width: 100%;
    aspect-ratio: 4/5;
    background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

/* Efecte de pols animat al centre */
.loading-skeleton-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #b0b0b0;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-skeleton-info {
    margin-top: 15px;
}

.loading-skeleton-text {
    height: 15px;
    background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 3px;
    width: 85%;
    margin-bottom: 8px;
}

.loading-skeleton-text-small {
    height: 13px;
    background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 3px;
    width: 65%;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animació per als nous productes */
.product-item {
    animation: fadeIn 0.5s ease-out;
}

/* Responsive loading skeletons */
@media (max-width: 1024px) {
    .loading-indicator {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Ocultar alguns skeletons en tablet */
    .loading-skeleton:nth-child(n+5) {
        display: none;
    }
}

@media (max-width: 768px) {
    .loading-indicator {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    /* Mostrar menys skeletons en mòbil */
    .loading-skeleton:nth-child(n+4) {
        display: none;
    }
}

/* Responsive Design basat en l'ample del #device-wrapper */

/* Tablet - quan device-wrapper té entre 768px i 1024px */
@container device (max-width: 1024px) {
    .products-search-container {
        max-width: 90%;
        margin-bottom: 40px;
    }

    .product-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
        padding: 0 20px;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-gallery-container {
        position: static;
    }
}

/* Mobile - quan device-wrapper té menys de 768px */
@container device (max-width: 768px) {
    .product-detail-container {
        padding: 0 !important;
        margin: 30px auto !important;
    }

    /* Slider mòbil */
    .product-slider-track {
        transition: transform 0.35s ease;
        will-change: transform;
    }

    .product-slide {
        display: block;
        cursor: zoom-in;
    }

    .product-thumbnails {
        display: none;
    }

    .product-slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        padding: 4px 0;
    }

    .product-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ccc;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .product-dot.active {
        background: #333;
    }

    .products-search-container {
        max-width: 100%;
        margin: 0 0 30px 0;
        padding: 0;
    }

    .products-search-input {
        padding: 12px 45px 12px 15px;
        font-size: 15px;
    }

    .products-search-icon {
        font-size: 14px;
        right: 15px;
    }

    .products-search-clear {
        font-size: 14px;
        right: 40px;
        top: 22%;
    }

    .product-gallery {
        grid-template-columns: 1fr !important;
        gap: 25px;
        padding: 0;
        margin-top: 0;
    }

    .product-item {
        max-width: 100%;
    }

    .product-info {
        margin-top: 12px;
    }

    .product-name {
        font-size: 14px;
    }

    .product-category {
        font-size: 12px;
    }
}

/* Extra small - quan device-wrapper té menys de 480px */
@container device (max-width: 480px) {
    .product-gallery {
        gap: 20px;
        padding: 0;
    }

    .products-search-container {
        margin: 0;
        padding: 0 0 15px 0;
    }

    .products-search-input {
        font-size: 14px;
        padding: 10px 40px 10px 12px;
    }

    .products-search-icon {
        top: 50%;
        right: 12px;
    }

    .products-search-clear {
        right: 35px;
        top: 22%;
    }

    .product-name {
        font-size: 13px;
    }

    .product-category {
        font-size: 11px;
    }
}

/* Products page title */
.products-container h1 {
    text-align: center;
    margin-bottom: 70px !important;
}

/* Buy Now Button */
.product-buy-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e5e5e5;
}

.btn-buy-now {
    display: inline-block;
    background: #333;
    color: white !important;
    padding: 15px 40px;
    text-decoration: none !important;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.3s ease;
    border: none;
    cursor: pointer;
    font-weight: 400;
}

.btn-buy-now:hover {
    background: #000;
    color: white !important;
}

/* Sold Button */
.btn-sold {
    display: inline-block;
    background: #999;
    color: white !important;
    padding: 15px 40px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: not-allowed;
    opacity: 0.6;
    font-weight: 400;
}

/* Responsive Buy Button */
@container device (max-width: 768px) {
    .product-buy-section {
        text-align: center;
    }

    .btn-buy-now {
        display: block;
        width: 100%;
        padding: 18px 40px;
    }

    .btn-sold {
        display: block;
        width: 100%;
        padding: 18px 40px;
    }
}

/* Related Products Section */
.related-products-section {
    max-width: 1200px;
    margin: 80px auto 60px auto;
    padding: 60px 0 0 0;
    border-top: 1px solid #e5e5e5;
}

.related-products-title {
    text-align: center;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-color);
}

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.related-product-item {
    position: relative;
    transition: transform 0.3s ease;
}

.related-product-item:hover {
    transform: translateY(-5px);
}

.related-product-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.related-product-image {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #fafafa;
    margin-bottom: 15px;
}

.related-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-product-item:hover .related-product-image img {
    transform: scale(1.05);
}

.related-product-info {
    text-align: left;
}

.related-product-name {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    margin: 0 0 5px 0;
}

.related-product-category {
    font-size: 13px;
    color: var(--text-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Related Products Responsive */
@container device (max-width: 1024px) {
    .related-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .related-products-section {
        margin: 60px auto 40px auto;
        padding: 40px 20px 0 20px;
    }
}

@container device (max-width: 768px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .related-products-title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .related-products-section {
        margin: 40px auto 30px auto;
        padding: 30px 0 0 0;
    }
}

@container device (max-width: 480px) {
    .related-products-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .related-products-title {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .related-product-name {
        font-size: 14px;
    }

    .related-product-category {
        font-size: 12px;
    }
}
/* Estils per eliminar la doble fletxa dels selects */
select {
    /* Eliminem l'aparença per defecte */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Afegim una fletxa personalitzada */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7em top 50% !important;
    background-size: 1em auto !important;
    padding-right: 2.5em !important;
}

/* Regla més específica per selects dins de formularis */
.form-group select,
form select,
.edit-modal select,
.edit-sidebar select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7em top 50% !important;
    background-size: 1em auto !important;
    padding-right: 2.5em !important;
}

/* Per assegurar que es veu en dark mode */
.edit-dark-theme select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Eliminem la fletxa a Firefox */
select::-ms-expand {
    display: none;
}/* Typography using CSS variables */
a, p, li, span {
    font-family: var(--p-font-family);
}

html, body, .txt, .shortbody, .custom {
    font-family: var(--p-font-family), helvetica, sans-serif, 'Lucida Grande', Arial !important;
}

#device-wrapper body {
    font-family: var(--p-font-family) !important;
    font-size: var(--p-size) !important;
    line-height: var(--p-line-height) !important;
    font-weight: var(--p-font-weight) !important;
    font-style: var(--p-font-style) !important;
}

#device-wrapper p, #device-wrapper span {
    font-family: var(--p-font-family);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    font-weight: var(--p-font-weight);
    font-style: var(--p-font-style);
}

h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size-value);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    padding-top: 0;
    padding-bottom: 9px;
    /* Ratlleta accent sota la primera lletra de tot H1 del site.
       Fem servir background-image en lloc de ::after per no col·lidir amb
       el ::after de l'editor (que mostra la pinya data-key en mode edicio). */
    background-image: linear-gradient(to right, var(--accent-color, #e63e53), var(--accent-color, #e63e53));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 60px 5px;
}

h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-size) !important;
    line-height: var(--h2-line-height);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
}

h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
}

/* Link styles - Only for web content, not edit sidebar */
a:link, a:visited {
    text-decoration: none;
    transition: .3s;
}

a {
    outline: 0;
}

/* Content links styling - Excluding edit mode */
body:not(.edit-mode) .page a,
body:not(.edit-mode) .content a,
body:not(.edit-mode) p a {
    color: var(--text-color, #4B4F58);
}

body:not(.edit-mode) .page a:hover,
body:not(.edit-mode) .content a:hover,
body:not(.edit-mode) p a:hover {
    color: var(--accent-color, #e63e53);
    text-decoration: underline;
}

/* Menu colors - Excluding edit mode */
#device-wrapper a, #device-wrapper #menu_desktop a {
    color: var(--text-color, #4B4F58);
}

#device-wrapper #menu_desktop li.item.selected a {
    color: var(--accent-color, #e63e53);
}

#device-wrapper #menu_desktop li.item a:hover {
    color: var(--accent-color, #e63e53);
}

#device-wrapper #menu_mobile .icon-bar {
    background: var(--text-color, #4B4F58);
}

/* Ratlleta H1 reduida a mobil */
@container device (max-width: 480px) {
    #device-wrapper h1 {
        background-size: 50px 4px;
        padding-bottom: 7px;
    }
}

/* Heros de pagines de barri (publicacions, galeria, la-comunitat, el-barri):
   H1 alineat a l'esquerra amb container 1200px max + margin auto */
#device-wrapper .hero-section-barri {
    text-align: left !important;
}
#device-wrapper .hero-section-barri .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}
#device-wrapper .hero-section-barri h1 {
    text-align: left !important;
}

/* Nav de seccions barri (publicacions/galeria/la-comunitat/el-barri):
   ombra suau (l'alcada queda natural al contingut) */
#device-wrapper .barri-nav-section {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 1px 0px !important;
}