/**
 * Estils per a la pàgina d'actualitat - Websfera.cloud
 * Disseny modern amb colors corporatius
 * Color d'accent: #c84053 (vermell/rosa corporatiu)
 * Data: 12/12/2025
 */

/* Colors corporatius websfera.cloud */
:root {
    --color-primary: #c84053;
    --color-primary-dark: #a83444;
    --color-primary-darker: #882835;
    --color-primary-light: #d65565;
    --color-secondary: #e05567;
    --color-accent: #c84053;
    --color-accent-light: #eb6a7a;
    --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 */
div#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: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Títol de la pàgina */
#device-wrapper #actualitat .page-title {
    font-size: 3.5em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 60px !important;
    padding-bottom: 25px;
    position: relative;
    letter-spacing: -0.02em;
}

#device-wrapper #actualitat .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-light));
    border-radius: 2px;
}

/* 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 */
#device-wrapper .actualitat-post-full {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0;
    margin: 40px auto;
    max-width: 1400px;
    width: calc(100% - 80px);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

#device-wrapper .actualitat-post-full .post-header {
    padding: 50px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    position: relative;
}

#device-wrapper .actualitat-post-full .post-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

#device-wrapper .actualitat-post-full .post-back {
    margin-bottom: 24px;
}

#device-wrapper .actualitat-post-full .post-back a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

#device-wrapper .actualitat-post-full .post-back a:hover {
    background: rgba(255, 255, 255, 0.25);
}

#device-wrapper .actualitat-post-full .post-date {
    font-size: 0.95em;
    opacity: 0.95;
    margin-bottom: 16px;
    font-weight: 500;
}

#device-wrapper .actualitat-post-full .post-title {
    font-size: 2.8em;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    color: white;
    letter-spacing: -0.02em;
}

#device-wrapper .actualitat-post-full .post-subtitle {
    font-size: 1.4em;
    font-weight: 400;
    opacity: 0.95;
    line-height: 1.5;
    color: white;
}

#device-wrapper .actualitat-post-full .post-body {
    padding: 50px;
}

#device-wrapper .actualitat-post-full .post-content-wrapper {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}

#device-wrapper .actualitat-post-full .post-content {
    flex: 1;
    font-size: 1.15em;
    line-height: 1.9;
    color: var(--color-text-dark);
    min-width: 0;
}

#device-wrapper .actualitat-post-full .post-featured-image {
    flex-shrink: 0;
    width: 500px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

#device-wrapper .actualitat-post-full .post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

#device-wrapper .actualitat-post-full .post-featured-image:hover img {
    /* No transform */
}

#device-wrapper .actualitat-post-full .post-content p {
    margin-bottom: 24px;
}

#device-wrapper .actualitat-post-full .post-meta {
    display: flex;
    gap: 32px;
    padding: 24px 0;
    margin-top: 40px;
    border-top: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-medium);
    font-size: 0.95em;
    font-weight: 600;
}

#device-wrapper .actualitat-post-full .post-tags {
    margin-top: 32px;
}

#device-wrapper .actualitat-post-full .post-tags .tag {
    display: inline-block;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(200, 64, 83, 0.1), rgba(235, 106, 122, 0.1));
    color: var(--color-primary-dark);
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    margin-right: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(200, 64, 83, 0.2);
    transition: all 0.3s ease;
}

#device-wrapper .actualitat-post-full .post-tags .tag:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
}

#device-wrapper .actualitat-post-full .post-actions {
    margin-top: 32px;
    display: flex;
    gap: 16px;
}

#device-wrapper .actualitat-post-full .btn-action {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1em;
    box-shadow: var(--shadow-sm);
}

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

/* Sidebar */
/* Notícies relacionades - Secció a sota del post */
#device-wrapper .actualitat-post-full .related-posts-section {
    padding: 50px;
    background: var(--footer-bg-color) !important;
    border-top: 3px solid var(--color-primary);
}

#device-wrapper .actualitat-post-full .related-posts-section h3 {
    font-size: 2em;
    color: var(--color-text-dark);
    margin-bottom: 30px;
    font-weight: 700;
    text-align: center;
}

#device-wrapper .actualitat-post-full .related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

#device-wrapper .actualitat-post-full .related-post {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

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

#device-wrapper .actualitat-post-full .related-post a {
    display: block;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

#device-wrapper .actualitat-post-full .related-post img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

#device-wrapper .actualitat-post-full .related-title {
    display: block;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    font-size: 1.1em;
    line-height: 1.4;
    padding: 20px 20px 0 20px;
}

#device-wrapper .actualitat-post-full .related-date {
    display: block;
    font-size: 0.9em;
    color: var(--color-primary);
    font-weight: 600;
    padding: 0 20px 20px 20px;
}

/* 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 {
        padding: 40px 0;
    }

    #device-wrapper #actualitat .page-title {
        font-size: 2.5em;
        margin-bottom: 40px;
    }

    #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 .post-header {
        padding: 30px;
    }

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

    #device-wrapper .actualitat-post-full .post-subtitle {
        font-size: 1.15em;
    }

    #device-wrapper .actualitat-post-full .post-body,
    #device-wrapper .actualitat-post-full .related-posts-section {
        padding: 30px;
    }

    #device-wrapper .actualitat-post-full .post-content-wrapper {
        flex-direction: column;
    }

    #device-wrapper .actualitat-post-full .post-featured-image {
        width: 100%;
        order: -1;
    }

    #device-wrapper .actualitat-post-full .related-posts-grid {
        grid-template-columns: 1fr;
    }

    #device-wrapper .actualitat-post-full .post-actions {
        flex-direction: column;
    }

    #device-wrapper .actualitat-post-full .btn-action {
        width: 100%;
    }

    #device-wrapper .actualitat-post-full .post-meta {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    #device-wrapper #actualitat .page-title {
        font-size: 2em;
        margin-bottom: 30px;
    }

    #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 .post-header {
        padding: 20px;
    }

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

    #device-wrapper .actualitat-post-full .post-body,
    #device-wrapper .actualitat-post-full .related-posts-section {
        padding: 20px;
    }
}

/* 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 div#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%; }
div#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; }
.light .logo-light img { opacity:0.8 }
.dark .logo-light { display:none; }
.dark .logo-dark { display:block; opacity:0.8}

/* Header global styles */
header {
 position: fixed;
 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;
}

#device-wrapper header {
 position: fixed;
 width:100%;
 left:0;
 top:0;
 height:80px;
 z-index:1000;
 padding:0;
 margin-top:0px;
 border-bottom: 1px solid #eee;
}


.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; }
}

/* Responsive padding for blocks based on device-wrapper width */
@container device (max-width: 768px) {
  div#page .block {
    padding: 40px 15px !important;
  }
}

@container device (max-width: 480px) {
  div#page .block {
    padding: 30px 10px !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 {
    width: 100%;
}

button.button-secondary {
    width: 100%;
}

.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 {
    font-size: 2em;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 700;
}

#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: #cf6372;
    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: #cf6372;
    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: #cf6372;
    text-decoration: underline;
    font-weight: 600;
}

#device-wrapper #contact_form .checkbox-group a:hover {
    color: #a14d5a;
}

/* 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: #cf6372;
    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: #b8566a;
    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: #cf6372;
}

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

#device-wrapper .contact-info-item a:hover {
    color: #cf6372;
    text-decoration: underline;
}

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

    #device-wrapper #contact-container h1 {
        font-size: 1.8em;
    }

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

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

    #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 query for responsive design based on device-wrapper width */
    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;
}

/* Ensure smooth transitions */
#device-wrapper {
    transition: all 0.3s ease;
}

/* 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;
}

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

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

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

@container device (max-width: 480px) {
    .lataula-footer .footer-content {
        padding: 0 10px;
    }

    .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 */
@container device (max-width: 768px) {
    .social-buttons {
        flex-wrap: wrap;
        padding: 0 15px;
    }

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

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

    .footer-newsletter {
        padding: 20px 15px;
    }
}

@container device (max-width: 480px) {
    .footer-newsletter {
        padding: 15px 10px;
    }
}

/* 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-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

#device-wrapper .footer-logo-mini img.logo-mini {
    max-width: 80px;
    height: auto;
}

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

#device-wrapper .footer-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

#device-wrapper .footer-contact-info .contact-item i {
    font-size: 18px;
    color: #999 !important;
}

#device-wrapper .footer-contact-info .contact-item a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* Responsive footer contact */
@container device (max-width: 1024px) {
    #device-wrapper .footer-contact-grid {
        gap: 30px;
    }

    #device-wrapper .footer-contact-info {
        gap: 20px;
    }
}

@container device (max-width: 768px) {
    #device-wrapper .footer-contact-grid,
    .footer-contact-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        padding: 0 15px !important;
    }

    #device-wrapper .footer-contact-info {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    #device-wrapper .footer-contact-info .contact-item {
        justify-content: center;
        font-size: 15px;
    }

    #device-wrapper .footer-contact-info .contact-item i {
        font-size: 20px;
    }

    #device-wrapper .footer-logo-mini,
    #device-wrapper .footer-logo,
    .footer-logo {
        text-align: center !important;
    }

    .footer-logo img {
        margin: 0 auto !important;
        display: block !important;
    }
}

@container device (max-width: 480px) {
    #device-wrapper .footer-contact-grid,
    .footer-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }

    #device-wrapper .footer-contact-info {
        gap: 15px;
    }

    #device-wrapper .footer-contact-info .contact-item {
        font-size: 14px;
    }

    #device-wrapper .footer-contact-info .contact-item i {
        font-size: 18px;
    }

    .footer-logo {
        text-align: center !important;
    }

    .footer-logo img {
        margin: 0 auto !important;
    }
}

/* 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 */
#device-wrapper header {
    position: absolute !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: 3;
    padding: 0;
    margin-top: 0;
    border-bottom: 1px solid #eee;
}

#device-wrapper div#page {
    background-color: var(--page-bg-color);
    padding-top: var(--header-height, 80px);
}

#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;
}

/* 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 */
@media (max-width: 768px) {
    #device-wrapper .hero-title {
        
    }

    #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;
    }
}

@media (max-width: 480px) {
    #device-wrapper .hero-title {
        
    }

    #device-wrapper .section-title {
        
    }

    #device-wrapper .container,
    #device-wrapper .maxwidth {
        padding: 0 15px;
    }
}
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 div#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; }


@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;}
div#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, #c84053) }

/* 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;
}

.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;
    transition: 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-
}
.navbar-toggle:focus {
    outline: none;
    background-

}

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


.navbar-toggle {
        cursor:pointer;
    position: relative;
    float: right;
    margin:7px 10px 8px 0px;
    padding: 0px;
    background-
    background-image: none;
    border: 1px solid transparent !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;
    background-
    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;
    background-
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


/* sidebar */

.sidebar {
  height: calc(100% - 80px);
  opacity: 1;
  position: absolute;
  z-index: 999;
  top: 80px;
  left: 100%;
  width: 100%;
  background-
  overflow-x: hidden;
  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 */
#device-wrapper .sidebar {
  position: absolute;
  top: 80px;
  left: 100%;
  width: 100%;
  height: calc(100% - 80px);
  z-index: 999;
  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 {

}

/* 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;
    }
}/* 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: 0;
    margin-bottom: 10px !important;
}

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, #c84053);
    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, #c84053);
}

#device-wrapper #menu_desktop li.item a:hover {
    color: var(--accent-color, #c84053);
}

#device-wrapper #menu_mobile .icon-bar {
    background: var(--text-color, #4B4F58);
}