/* Base styles - Opengea - Anthropic-inspired */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --color-bg: #f0eee6;
    --color-text: #191919;
    --color-text-secondary: #5C5C5C;
    --color-text-muted: #8C8C8C;
    --color-border: #d9d7cf;
    --color-border-light: #e5e3db;
    --color-accent: #191919;
    --color-accent-hover: #404040;
    --color-surface: #e8e6de;
    --color-surface-alt: #e2e0d8;
    --color-card-bg: #e2ddd1;
    --color-disabled: #a09a8e;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 80px;
    --spacing-2xl: 120px;
    --spacing-3xl: 160px;
    --max-width: 1400px;
    --max-width-narrow: 800px;
    --max-width-wide: 1400px;
    --transition: 0.2s ease;
}

/* Body background */
body {
    background-color: var(--color-bg);
}

/* Reset & Base */
html, body {
    overflow-x: hidden;
}

#device-wrapper {
    font-family: var(--font-primary);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

#device-wrapper * {
    box-sizing: border-box;
}

#device-wrapper a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

#device-wrapper a:hover {
    color: var(--color-text-secondary);
}

#device-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Typography */
#device-wrapper h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--spacing-md) 0;
}

#device-wrapper h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-md) 0;
}

#device-wrapper h3 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 var(--spacing-sm) 0;
}

#device-wrapper h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 var(--spacing-sm) 0;
}

#device-wrapper p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

#device-wrapper p.large {
    font-size: 22px;
    line-height: 1.6;
}

#device-wrapper p.small {
    font-size: 14px;
    line-height: 1.6;
}

/* Layout */
#device-wrapper .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .container-narrow {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .container-wide {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Section spacing */
#device-wrapper .section {
    padding: var(--spacing-2xl) 0;
}

#device-wrapper .section-lg {
    padding: var(--spacing-3xl) 0;
}

#device-wrapper .section-sm {
    padding: var(--spacing-xl) 0;
}

/* Centered text */
#device-wrapper .text-center {
    text-align: center;
}

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

.centered { margin: auto; }

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

/* Page container */
#device-wrapper .page {
    min-height: 100vh;
}

/* Selection */
#device-wrapper ::selection {
    background: var(--color-accent);
    color: #f0eee6;
}

/* Responsive */
@media (max-width: 768px) {
    #device-wrapper h1 {
        font-size: 36px;
    }
    #device-wrapper h2 {
        font-size: 28px;
    }
    #device-wrapper h3 {
        font-size: 22px;
    }
    #device-wrapper p {
        font-size: 16px;
    }
    #device-wrapper p.large {
        font-size: 18px;
    }
    #device-wrapper .section {
        padding: var(--spacing-xl) 0;
    }
    #device-wrapper .section-lg {
        padding: var(--spacing-2xl) 0;
    }
}

/* Opengea override: seccions a alcada de contingut (auto), no pantalla completa.
   El global websfera-global.css posa `html.touch-device body section { min-height:100svh }`
   i carrega DESPRES d'aquest bundle; per guanyar la cascada afegim l'id #device-wrapper
   (especificitat 0,1,1,3 > global 0,0,1,3). Nomes afecta Opengea. El snap JS
   (websfera-scripts.php) segueix actiu pero queda inert en seccions curtes. */
html.touch-device #device-wrapper section {
    min-height: auto;
}
/* Buttons - Anthropic style */

#device-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    gap: 8px;
}

#device-wrapper .btn-primary {
    background: var(--color-accent);
    color: var(--color-bg);
    border: 1px solid var(--color-accent);
}

#device-wrapper .btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-bg);
}

#device-wrapper .btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

#device-wrapper .btn-secondary:hover {
    background: var(--color-surface);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

#device-wrapper .btn-ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 12px 16px;
}

#device-wrapper .btn-ghost:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

#device-wrapper .btn-lg {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 10px;
}

#device-wrapper .btn-sm {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 6px;
}

/* Arrow icon in buttons */
#device-wrapper .btn .arrow {
    display: inline-block;
    transition: transform var(--transition);
}

#device-wrapper .btn:hover .arrow {
    transform: translateX(3px);
}
/* Header & Navigation - Anthropic style */

#device-wrapper header.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--header-bg-color, rgba(240, 238, 230, 0.97));
    transition: all 0.3s ease;
    pointer-events: auto;
}

/* Override edit-mode link blocking for header navigation */
body.edit-sidebar-active #device-wrapper header.site-header a,
body.edit-mode-active #device-wrapper header.site-header a {
    pointer-events: auto !important;
}

#device-wrapper .header-inner {
    max-width: 1750px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

/* Logo */
#device-wrapper .header-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

#device-wrapper .header-logo .logo-img {
    height: var(--logo-max-height, 38px);
    width: auto;
    max-height: var(--logo-max-height, 38px);
}

/* Desktop Navigation */
#device-wrapper .header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

#device-wrapper .header-nav a {
    padding: var(--menu-padding-vertical, 8px) var(--menu-padding-horizontal, 16px);
    font-size: var(--menu-font-size, 15px);
    font-weight: var(--menu-font-weight, 450);
    color: var(--menu-text-color, var(--color-text-secondary));
    text-decoration: none;
    background-color: var(--menu-bg-color, transparent);
    border: var(--menu-border-width, 0) solid var(--menu-border-color, transparent);
    border-radius: var(--menu-border-radius, 6px);
    text-transform: var(--menu-text-transform, none);
    transition: all var(--transition);
}

#device-wrapper .header-nav a:hover {
    color: var(--menu-hover-text-color, var(--color-text));
    background-color: var(--menu-hover-bg-color, var(--color-surface));
    border-color: var(--menu-hover-border-color, transparent);
}

#device-wrapper .header-nav a.active {
    color: var(--menu-active-text-color, var(--color-text));
    background-color: var(--menu-active-bg-color, var(--color-surface));
    border-color: var(--menu-active-border-color, transparent);
}

/* Language dropdown in header */
#device-wrapper .header-lang-dropdown {
    position: relative;
    margin-left: var(--spacing-md);
}

#device-wrapper .header-lang-dropdown .lang-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    padding: var(--menu-padding-vertical, 8px) var(--menu-padding-horizontal, 16px);
    display: flex;
    align-items: center;
    gap: 3px;
}

#device-wrapper .header-lang-dropdown .lang-arrow {
    font-size: 14px;
    color: #000;
    transition: transform var(--transition);
}

#device-wrapper .header-lang-dropdown.open .lang-arrow {
    transform: rotate(180deg);
}

#device-wrapper .header-lang-dropdown .lang-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    margin-top: 4px;
    min-width: 48px;
    z-index: 100;
}

#device-wrapper .header-lang-dropdown.open .lang-options {
    display: block;
}

#device-wrapper .header-lang-dropdown .lang-options a {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

#device-wrapper .header-lang-dropdown .lang-options a:hover {
    background: #191919;
    color: #f0eee6;
}

/* Mobile hamburger */
#device-wrapper .header-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--color-text);
}

#device-wrapper .header-mobile-toggle svg {
    width: 24px;
    height: 24px;
}

/* Mobile menu */
#device-wrapper .mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 999;
    padding: var(--spacing-md);
    overflow-y: auto;
}

#device-wrapper .mobile-menu.active {
    display: block;
}

#device-wrapper .mobile-menu a {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
}

#device-wrapper .mobile-menu .mobile-lang {
    display: flex;
    gap: 16px;
    margin-top: var(--spacing-md);
}

#device-wrapper .mobile-menu .mobile-lang a {
    display: inline;
    font-size: 16px;
    border: none;
    padding: 8px 0;
}

/* Spacer for fixed header (not needed with sticky, kept for compatibility) */
#device-wrapper .header-spacer {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    #device-wrapper .header-inner {
        padding: 0 var(--spacing-xs);
    }
    #device-wrapper .header-nav {
        display: none;
    }
    #device-wrapper .header-lang-dropdown {
        display: none;
    }
    #device-wrapper .header-mobile-toggle {
        display: block;
    }
}
/* Footer - Anthropic style */

#device-wrapper footer.site-footer {
    background: var(--color-text);
    color: var(--color-bg);
    padding: var(--spacing-lg) 0 var(--spacing-lg) 0;
}

#device-wrapper .footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(240, 238, 230, 0.12);
}

#device-wrapper .footer-brand .footer-logo-img {
    height: 38px;
    width: auto;
    filter: invert(1);
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .footer-brand p {
    font-size: 15px;
    color: rgba(240, 238, 230, 0.6);
    line-height: 1.6;
    max-width: 360px;
}

#device-wrapper .footer-col h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    margin-bottom: var(--spacing-md);
}

#device-wrapper .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#device-wrapper .footer-col ul li {
    margin-bottom: 12px;
}

#device-wrapper footer.site-footer .footer-col ul li a {
    font-size: 15px;
    color: rgba(240, 238, 230, 0.6) !important;
    text-decoration: none !important;
    transition: color var(--transition);
}

#device-wrapper footer.site-footer .footer-col ul li a:hover {
    color: var(--color-bg) !important;
}

#device-wrapper .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-lg);
}

#device-wrapper .footer-bottom p {
    font-size: 13px;
    color: rgba(240, 238, 230, 0.4);
    margin: 0;
}

#device-wrapper footer.site-footer .footer-bottom a {
    color: rgba(240, 238, 230, 0.6) !important;
    text-decoration: none !important;
}

#device-wrapper footer.site-footer .footer-bottom a:hover {
    color: var(--color-bg) !important;
}

/* Responsive */
@media (max-width: 768px) {
    #device-wrapper .footer-top {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    #device-wrapper .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}
/* Home page styles - Anthropic inspired */

/* Hero section */
#device-wrapper .hero {
    position: relative;
    padding: 0;
    overflow: visible;
}

#device-wrapper .hero-grid {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    align-content: center;
    /* Fallback dins del rang real que fixa earth-globe-v3.js (640-800px) per
       evitar layout-shift entre el primer paint i quan Three.js fixa la
       variable. Si --hero-height ja està fixada, s'usa aquella. */
    min-height: var(--hero-height, clamp(640px, calc(100dvh - 72px), 800px));
    position: relative;
    z-index: 2;
    pointer-events: none;
}

#device-wrapper .hero-content {
    position: relative;
    z-index: 3;
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-3xl) var(--spacing-md);
    max-width: 560px;
    pointer-events: auto;
}

#device-wrapper .hero h1 {
    margin-bottom: var(--spacing-lg);
    color: rgb(47, 47, 47);
    text-align: left;
}

#device-wrapper .hero p {
    font-size: 23px;
    line-height: 164%;
    color: rgba(92, 92, 92, 0.7);
    margin: 0;
    text-align: left;
    font-weight: 400;
}

#device-wrapper .hero-earth {
    position: relative;
}

#device-wrapper .hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Pillars section */
#device-wrapper .pillars {
    padding: 0;
    /* background transparent */
}

#device-wrapper .pillars-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

#device-wrapper .pillar-card {
    padding: var(--spacing-md);
    background-color: var(--color-text);
    border-radius: 20px;
}

#device-wrapper .pillar-card .pillar-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--color-bg);
}

#device-wrapper .pillar-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-bg);
}

#device-wrapper .pillar-card p {
    font-size: 16px;
    color: rgba(240, 238, 230, 0.75);
    line-height: 1.7;
}

/* Statement / Earth illustration section */
#device-wrapper .statement {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

#device-wrapper .statement-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}


#device-wrapper .statement blockquote {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
    padding: 0;
    border: none;
    font-style: italic;
}

#device-wrapper .statement .attribution {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-muted);
    font-style: normal;
}

/* Vision section */
#device-wrapper .vision {
    padding: var(--spacing-2xl) 0;
    /* background transparent */
}

#device-wrapper .vision-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

#device-wrapper .vision-content h2 {
    margin-bottom: var(--spacing-md);
}

#device-wrapper .vision-content p {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .vision-highlight {
    /* background transparent */
    border-radius: 16px;
    padding: var(--spacing-lg);
}

#device-wrapper .vision-highlight p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Projects section */
#device-wrapper .projects-section {
    padding: var(--spacing-2xl) 0;
    /* background transparent */
}

#device-wrapper .projects-section .section-header {
    max-width: var(--max-width);
    margin: 0 auto var(--spacing-xl) auto;
    padding: 0 var(--spacing-md);
    text-align: center;
}

#device-wrapper .projects-section .section-header h2 {
    margin-bottom: 12px;
}

#device-wrapper .projects-section .section-header p {
    font-size: 18px;
    color: var(--color-text-secondary);
}

#device-wrapper .projects-section {
    overflow: hidden;
}

#device-wrapper .projects-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    overflow-x: auto;
    overflow-y: visible;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    padding: var(--spacing-sm) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#device-wrapper .projects-grid::-webkit-scrollbar {
    display: none;
}

#device-wrapper .projects-grid:active {
    cursor: grabbing;
}

#device-wrapper .project-card .project-btn {
    cursor: pointer;
    position: relative;
    z-index: 5;
}

#device-wrapper .project-card {
    min-width: 422px;
    width: 422px;
    flex-shrink: 0;
    background-color: var(--accent-color-secondary);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
    transition: all var(--transition);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

#device-wrapper .project-card:hover {
    border-color: var(--color-text);
}

#device-wrapper .project-card .project-btn {
    transition: all var(--transition);
}

#device-wrapper .project-card .project-btn:hover {
    background-color: var(--color-accent-hover);
}

#device-wrapper .project-card .project-logo-wrap {
    height: 60px;
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .project-card .project-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

#device-wrapper .project-card .project-logo.project-logo-lg {
    height: 36px;
}

#device-wrapper .project-card .project-logo.project-logo-sm {
    height: 22px;
}

#device-wrapper .project-card .project-logo.project-logo-pad {
    margin-left: 7px;
}

#device-wrapper .project-card .project-logo-text {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

#device-wrapper .project-card .project-btn-disabled {
    background-color: var(--color-disabled);
    cursor: default;
}

#device-wrapper .project-card .project-btn-disabled:hover {
    background-color: var(--color-disabled);
}

#device-wrapper .project-card .project-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

#device-wrapper .project-card .project-divider {
    border: none;
    border-top: 1px solid rgba(25, 25, 25, 0.15);
    margin: var(--spacing-sm) 0;
}

#device-wrapper .project-card .project-layer {
    font-size: 14px;
    font-family: monospace;
    color: var(--color-text);
    opacity: 0.5;
    margin: 0 0 4px 0;
    text-transform: lowercase;
}

#device-wrapper .project-card .project-url {
    font-size: 14px;
    font-family: monospace;
    color: var(--color-text);
    opacity: 0.5;
    margin: 0;
    text-transform: lowercase;
}

#device-wrapper .project-card .project-desc {
    font-size: 18px;
    font-family: var(--h1-font-family);
    color: var(--color-text);
    line-height: 1.5;
    flex: 1;
}

#device-wrapper .project-card .project-btn {
    display: inline-block;
    background-color: var(--color-text);
    color: var(--color-bg) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 6px;
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none !important;
    box-sizing: border-box;
    line-height: 1.5;
}

/* CTA section */
#device-wrapper .cta-section {
    padding: var(--spacing-2xl) 0;
    text-align: center;
}

#device-wrapper .cta-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .cta-section h2 {
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .cta-section p {
    margin-bottom: var(--spacing-lg);
}

/* Divider */
#device-wrapper .divider {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    border: none;
    border-top: 1px solid var(--color-border-light);
}

/* Claim section (closing manifesto with fullscreen video) */
#device-wrapper .claim {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    background: #000;
}

/* Simple variant for the home page (no video, just a centered headline). */
#device-wrapper .claim.claim-simple {
    height: auto;
    min-height: 60vh;
    align-items: center;
    background: transparent;
    text-align: center;
}
#device-wrapper .claim.claim-simple .claim-inner {
    padding: var(--spacing-2xl) var(--spacing-md);
    max-width: 900px;
}
#device-wrapper .claim-headline {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.25;
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0;
}
#device-wrapper .claim-attribution {
    margin: 1.4em 0 0;
    color: var(--color-text-secondary);
    font-size: clamp(15px, 1.4vw, 18px);
    font-style: normal;
    letter-spacing: 0.02em;
}

/* Laboratori claim variant — full page width, softer/smaller attribution */
#device-wrapper .claim.claim-lab .claim-inner {
    max-width: var(--max-width);
}
#device-wrapper .claim.claim-simple .claim-headline,
#device-wrapper .claim.claim-simple .claim-attribution {
    margin-left: auto;
    margin-right: auto;
}
#device-wrapper .claim.claim-lab .claim-attribution {
    margin-top: 2.6em;
    color: var(--color-text-muted);
    font-size: clamp(13px, 1.1vw, 15px);
}

#device-wrapper .claim-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

#device-wrapper .claim-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}

#device-wrapper .claim-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md) 0;
}

#device-wrapper .claim-quote {
    margin: 0 0 var(--spacing-lg) 0;
    padding: 0;
    border: none;
    quotes: none;
}

#device-wrapper .claim-text {
    font-size: 44px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 var(--spacing-sm) 0;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5);
}

#device-wrapper .claim-description {
    margin-top: var(--spacing-lg);
}

#device-wrapper .claim-description p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--spacing-sm) 0;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

#device-wrapper .claim-description p:last-child {
    margin-bottom: 0;
}

/* Tablet / small desktop range — fit hero between canvas and content */
@media (min-width: 769px) and (max-width: 1260px) {
    #device-wrapper .hero p {
        font-size: clamp(17px, 1.7vw, 20px);
    }
    #device-wrapper .hero-content {
        max-width: 460px;
        padding: var(--spacing-xl) var(--spacing-md);
    }
}

/* Hero responsive: activa "mode mobil" del hero a <1380px per evitar que
   la lluna del canvas Three.js es talli en pantalles intermèdies (laptops,
   iPad landscape, etc.) */
@media (max-width: 1280px) {
    #device-wrapper .hero-grid {
        grid-template-columns: 1fr;
        /* Sense floor de 640px: el hero ocupa exactament l'alçada del viewport
           menys el header, així h1+desc+canvas+link entren sense scroll en
           qualsevol mòbil. Es respecta --hero-height si la fixa el JS. */
        min-height: var(--hero-height, calc(100dvh - 72px));
    }
    /* Reordre mòbil: h1 → canvas → p (desc) → link. El wrapper hero-content
       es buida via display:contents per fer h1 i p items directes del grid
       i poder reordenar-los independentment. */
    #device-wrapper .hero-content {
        display: contents;
    }
    #device-wrapper .hero h1 {
        order: 1;
        padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
        text-align: center;
        margin-bottom: var(--spacing-md);
    }
    /* Scope: NOMÉS la desc del hero (dins hero-content). Si s'utilitza
       `.hero p` el selector matcheja també les pillar-card p i els hi
       aplica color fosc + padding, trencant l'estil. */
    #device-wrapper .hero-content p {
        order: 4;
        padding: 0 var(--spacing-md);
        margin: var(--spacing-xl) 0 var(--spacing-xl) 0;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.45;
        color: rgb(47, 47, 47);
        text-align: center;
    }
    #device-wrapper .hero-earth {
        display: none;
    }
}

/* Resta del responsive mobile (pillars, projects, claim...): a 768px */
@media (max-width: 768px) {
    #device-wrapper .hero h1 {
        font-size: clamp(28px, 7.2vw, 34px);
        line-height: 1.2;
    }
    #device-wrapper .pillars-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    #device-wrapper .pillar-card,
    #device-wrapper .pillar-card h3,
    #device-wrapper .pillar-card p {
        text-align: left;
    }
    #device-wrapper .pillar-card h3 {
        font-size: 20px;
    }
    #device-wrapper .pillar-card p {
        font-size: 13px;
        line-height: 1.55;
        margin: 0;
    }
    #device-wrapper .pillars-grid {
        padding: 0;
    }
    /* projects-section mòbil: més aire SOBRE el h2 "Iniciatives" per
       separar-lo de les pillars; mantenim baix el padding inferior i el
       margin sota la capçalera. */
    #device-wrapper .projects-section {
        padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    }
    #device-wrapper .projects-section .section-header {
        margin: 0 auto var(--spacing-sm) auto;
    }
    #device-wrapper .vision-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    #device-wrapper .projects-grid {
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: var(--spacing-sm) 24px;
        overflow-x: auto;
    }
    #device-wrapper .project-card {
        min-width: calc(100vw - 72px);
        width: calc(100vw - 72px);
        scroll-snap-align: center;
    }
    #device-wrapper .project-card .project-desc {
        font-size: 15px;
        line-height: 1.45;
    }
    #device-wrapper .project-card .project-layer,
    #device-wrapper .project-card .project-url {
        font-size: 12px;
    }
    #device-wrapper .project-card .project-btn {
        font-size: 13px;
        padding: 8px 18px;
    }
    #device-wrapper .statement blockquote {
        font-size: 22px;
    }
    #device-wrapper .claim-inner {
        max-width: 100%;
        padding: var(--spacing-lg) var(--spacing-md) 0 var(--spacing-md);
    }
    #device-wrapper .claim-text {
        font-size: 26px;
    }
    #device-wrapper .claim-description p {
        font-size: 12px;
    }
    /* Lab claim variant: en mòbil hereta min-height 60vh de .claim-simple,
       que deixa molt espai buit al voltant d'una cita curta. Ajustem a auto. */
    #device-wrapper .claim.claim-lab {
        min-height: auto;
    }
    #device-wrapper .claim.claim-lab .claim-inner {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

@media (max-width: 400px) {
    #device-wrapper .hero-content {
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
    }
}
/* Earth Globe - hero background */

#device-wrapper #earth-container {
    position: absolute;
    top: 0;
    /* Extensió simètrica al voltant del 75% del .hero-grid (centre del canvas):
       250px cap a fora del .hero-grid i 250px cap a dins (sobre el text).
       Així el centre del canvas (i la Terra) es manté al 75%, però la lluna
       té 250px extra a cada costat per orbitar sense quedar tallada.
       El canvas té z-index: 1 i el text (.hero-content) té z-index: 3,
       per tant el text es manté visible per damunt. */
    right: -250px;
    left: auto;
    width: calc(50% + 500px);
    max-width: none;
    height: 100%;
    cursor: default;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

#device-wrapper #earth-container canvas {
    display: block;
    pointer-events: auto;
    cursor: default;
}

#device-wrapper #earth-container canvas:active {
    cursor: grabbing;
}

/* Responsive */
/* Pantalles intermèdies: desplacem el canvas 60px cap a l'esquerra
   perquè quedi millor compensat amb el text del hero. */
@media (min-width: 1281px) and (max-width: 1500px) {
    #device-wrapper #earth-container {
        right: -190px;
    }
}

@media (max-width: 1280px) {
    #device-wrapper #earth-container {
        position: relative;
        right: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: clamp(280px, 48vh, 500px);
        order: 2;
        /* IMPORTANT: visible per permetre que el canvas escalat sobresurti
           pels costats. El body té overflow-x:hidden, no es genera scroll. */
        overflow: visible;
        /* Espai inferior per encabir la part del canvas escalat que es
           projecta per sota de l'alçada layout del container — si no, els
           elements següents (p desc, link, pillars) quedarien solapats. */
        margin-bottom: clamp(100px, 18vh, 180px);
    }
    /* Escalat 1.3× del canvas Three.js: amplia lleugerament l'animació
       (globus + lluna + òrbites). transform-origin: top center fa que
       creixi NOMÉS cap avall (no cap amunt sobre el text del hero).
       translateY afegeix un offset perquè quedi clar l'espai entre h1 i
       l'animació. Els pixels que sobresurten pels costats queden retallats
       pel body overflow-x:hidden. */
    #device-wrapper #earth-container canvas {
        transform: translateY(25px) scale(1.3);
        transform-origin: center top;
    }
}

#device-wrapper .globalium-link {
    /* Posicionat a tocar del globus, no a la cantonada del hero-grid sencer.
       16% des de baix queda just per sota del globus (centrat verticalment a
       50% i amb diàmetre visible ~60% de l'alçada del canvas). */
    position: absolute;
    bottom: 16%;
    right: 4%;
    color: rgba(160, 160, 160, 0.6);
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
    pointer-events: auto;
    z-index: 10;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}

#device-wrapper .globalium-link:hover {
    color: rgba(160, 160, 160, 0.6);
    text-decoration: underline;
}

@media (max-width: 1280px) {
    /* A mòbil treiem el position:absolute perquè el link entri al flux del
       grid com a fila pròpia, just després del canvas (order:3 = darrera de
       hero-content i earth-container). Així queda a tocar del gràfic en
       comptes de quedar surant a la part baixa del viewport. */
    #device-wrapper .globalium-link {
        position: static;
        order: 3;
        right: auto;
        bottom: auto;
        text-align: center;
        margin-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 480px) {
    #device-wrapper #earth-container {
        height: clamp(260px, 45vh, 440px);
    }
}
/* ============================================================
   Home2 — refactor avantguardista v3 (escopat a .page-home2)
   Línies rectes (sense border-radius), amplada ampla, bandes de
   fons alternes. Hero: 3 blocs amb contingut sempre visible i
   imatge de gran format que es revela en hover. Iniciatives:
   targetes de fons de color, sense línies separadores.
   Paleta terracota/ocre. Sistema càlid (crema + Georgia + Inter).
   ============================================================ */

#device-wrapper .page-home2 {
    --accent: #c75b39;        /* terracota — accent principal */
    --accent-deep: #b95536;   /* terracota profund */
    --accent-gold: #c98f29;   /* ocre daurat */
    --accent-earth: #3f5e51;  /* verd profund terrós (Visió sistèmica / Laboratori IA) */
    --ink: #191919;
    --paper: #f0eee6;
    --hairline: rgba(25, 25, 25, 0.16);
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --h2-max: min(95vw, 1800px);
    --h2-gutter: clamp(16px, 3.2vw, 56px);
    --h2-band: #e8e3d6;   /* sorra (iniciatives) */
}

/* Eyebrow / etiqueta tècnica */
#device-wrapper .page-home2 .h2-eyebrow {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0 0 var(--spacing-md) 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#device-wrapper .page-home2 .h2-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--accent);
}

/* ============================================================
   1. HERO — tres principis amb contingut sempre visible
   ============================================================ */
#device-wrapper .page-home2 .h2-hero {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    background: var(--paper);   /* hero en fons clar (com la home) */
}
#device-wrapper .page-home2 .h2-hero__intro {
    max-width: 100%;
    margin: 0 0 var(--spacing-xl);
    padding: 0 clamp(24px, 2vw, 40px);   /* alineat amb el contingut dels panells */
}
#device-wrapper .page-home2 .h2-hero h1 {
    font-size: clamp(38px, 5.6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 var(--spacing-md);
    color: var(--ink);
    max-width: 20ch;
}
#device-wrapper .page-home2 .h2-hero__lede {
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.55;
    color: rgba(25, 25, 25, 0.72);
    margin: 0;
    max-width: 60ch;
}

/* Header: logo i text foscos per defecte (com la home), però el FONS igualat
   al del hero (var(--paper) = #f0eee6). El header és germà de <main>, fora de
   .page-home2, per això s'usa el literal (la variable no hi arriba).
   !important + selector específic per guanyar la regla de custom.css. */
body.home2 #device-wrapper header.site-header {
    background-color: #f0eee6 !important;
    border-bottom: 0;
}

/* Panells: tres blocs iguals, quadrats, contigus amb costura fina */
#device-wrapper .page-home2 .h2-panels {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
}
#device-wrapper .page-home2 .h2-panel {
    --p: var(--accent);
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(460px, 66vh, 700px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #16140c;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
#device-wrapper .page-home2 .h2-panel:focus-visible {
    outline: 2px solid var(--p);
    outline-offset: -2px;
}

/* Capa 1: foto realista (visible per defecte) */
#device-wrapper .page-home2 .h2-panel__photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.7s ease;
}
#device-wrapper .page-home2 .h2-panel__photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 114%;   /* excés per garantir el farciment (quirk flex + % height) */
    object-fit: cover;
    display: block;
}
/* Capa 2: gràfic generatiu (es revela en hover, transformant la foto) */
#device-wrapper .page-home2 .h2-panel__media {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
#device-wrapper .page-home2 .h2-panel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* colors originals (foscos): es mostren en hover sobre el fons clar */
}
/* Wipe diagonal blanc: en hover, una franja blanca escombra el panell en
   diagonal (ràpid, clip-path) fins pintar-lo tot de blanc; l'animació apareix
   després, per sobre (z-index superior + retard). Capa entre el vídeo i el gràfic. */
#device-wrapper .page-home2 .h2-panel__wipe {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    pointer-events: none;
    clip-path: polygon(0 0, 0 0, 0 0);
    transition: clip-path 0.4s cubic-bezier(0.7, 0, 0.25, 1);
    will-change: clip-path;
}
/* GRÀFICS DE HOVER DESACTIVATS TEMPORALMENT al hero (home2).
   Es conserva tot el codi dels gràfics (autòmata + murmuració inline a home2.php,
   globus a earth-globe-v3.js) per reutilitzar-lo en altres pàgines. De moment, al
   passar per sobre es continua veient el VÍDEO: el wipe no s'expandeix, el vídeo es
   manté visible i el gràfic queda amagat. */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__wipe,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__wipe {
    clip-path: polygon(0 0, 0 0, 0 0);   /* wipe desactivat (no cobreix el vídeo) */
}
/* En hover el vídeo s'amaga perquè el fons paper ompli tot el panell */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__photo,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__photo { opacity: 0; }
/* El gràfic es manté amagat en hover (abans es revelava) */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__media,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__media {
    opacity: 0;
}
/* En passar per un panell, els altres continuen mostrant el seu vídeo */
#device-wrapper .page-home2 .h2-panels:hover .h2-panel:not(:hover) .h2-panel__photo {
    opacity: 1;
}
/* Vel blanc inferior: garanteix llegibilitat del text sobre foto i gràfic */
#device-wrapper .page-home2 .h2-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.45s ease;
    background: linear-gradient(180deg,
        rgba(22, 20, 12, 0) 62%,
        rgba(22, 20, 12, 0.42) 82%,
        rgba(22, 20, 12, 0.78) 100%);
}

/* ---- HOVER = tema clar invertit ----------------------------------------
   En passar per sobre: fons clar complet, el vel fosc desapareix, i icona +
   text + gràfics queden foscos (colors originals). El fons per defecte segueix
   sent fosc amb la foto. */
#device-wrapper .page-home2 .h2-panel__icon,
#device-wrapper .page-home2 .h2-panel__tag,
#device-wrapper .page-home2 .h2-panel__title,
#device-wrapper .page-home2 .h2-panel__desc { transition: color 0.4s ease, opacity 0.4s ease, max-height 0.55s ease, margin-top 0.4s ease; }

#device-wrapper .page-home2 .h2-panel:hover,
#device-wrapper .page-home2 .h2-panel:focus-within { background-color: var(--h2-band); }

#device-wrapper .page-home2 .h2-panel:hover::after,
#device-wrapper .page-home2 .h2-panel:focus-within::after { opacity: 0; }

/* Vel CLAR inferior en hover: neteja la zona del text perquè el gràfic no es
   vegi per sota del text que apareix (queda visible només a la part alta). */
#device-wrapper .page-home2 .h2-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: linear-gradient(180deg,
        rgba(240, 238, 230, 0) 26%,
        rgba(240, 238, 230, 0.85) 58%,
        rgba(240, 238, 230, 1) 100%);
}
#device-wrapper .page-home2 .h2-panel:hover::before,
#device-wrapper .page-home2 .h2-panel:focus-within::before { opacity: 1; }

#device-wrapper .page-home2 .h2-panel:hover .h2-panel__icon,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__icon { color: var(--ink); }
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__tag,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__tag { color: var(--ink); }
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__title,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__title { color: var(--ink); }
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__desc,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__desc { color: var(--ink); }


/* Modificador --globe (Visió sistèmica): DEFAULT = vídeo real fosc de la Terra
   sense vel fosc inferior. HOVER = flip a BLANC amb el globus 3D (negres negres
   sobre blanc). El text fosc, l'esvaïment del vídeo i l'aparició del globus els
   gestiona el flip a clar base. */
#device-wrapper .page-home2 .h2-panel--globe::after { opacity: 0; }
#device-wrapper .page-home2 .h2-panel--globe:hover,
#device-wrapper .page-home2 .h2-panel--globe:focus-within { background-color: var(--h2-band); }
#device-wrapper .page-home2 .h2-panel--globe:hover::before,
#device-wrapper .page-home2 .h2-panel--globe:focus-within::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.85) 58%, #ffffff 100%);
}

/* Contingut: icona + text units, sempre visible, ancorat a baix */
#device-wrapper .page-home2 .h2-panel__content {
    position: relative;
    z-index: 5;
    padding: clamp(24px, 2vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
#device-wrapper .page-home2 .h2-panel__icon {
    width: 48px;
    height: 48px;
    color: var(--paper);
    flex-shrink: 0;
}
#device-wrapper .page-home2 .h2-panel__icon svg { width: 100%; height: 100%; }
#device-wrapper .page-home2 .h2-panel__text {
    display: flex;
    flex-direction: column;
}
#device-wrapper .page-home2 .h2-panel__tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(240, 238, 230, 0.72);
    margin-bottom: 10px;
}
#device-wrapper .page-home2 .h2-panel__title {
    font-family: var(--h1-font-family);
    font-weight: 500;
    color: var(--paper);
    margin: 0 0 12px;
    font-size: clamp(26px, 2.3vw, 36px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}
#device-wrapper .page-home2 .h2-panel__desc {
    font-family: var(--mono);
    font-size: clamp(13.5px, 0.95vw, 15.5px);
    line-height: 1.6;
    color: rgba(240, 238, 230, 0.90);
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.55s ease, margin-top 0.4s ease;
}
/* L'explicació només apareix (i es mecanografia) en passar-hi per sobre */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__desc,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__desc {
    max-height: none;
    opacity: 1;
    margin-top: 0;
    /* text explicatiu (més gran) */
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.85;
    transition: opacity 0.3s ease;
}
/* Efecte "seleccionat": el text escrit apareix ressaltat amb fons fosc i lletra
   clara. box-decoration-break: clone → el ressaltat abraça cada línia (com una
   selecció). El caret en queda exclòs. El ressaltat creix a mesura que s'escriu
   (el text pendent .h2-rest és invisible i no pinta fons). */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__desc > span:not(.h2-caret),
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__desc > span:not(.h2-caret) {
    background: var(--ink);
    color: var(--paper);
    padding: 0.08em 0.3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* Bloc superior en hover: descripció + botó "Més informació", ancorat A DALT
   del panell. En repòs viu (col·lapsat) dins del contingut inferior. */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__lead,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__lead {
    position: absolute;
    top: clamp(24px, 2vw, 40px);
    left: clamp(24px, 2vw, 40px);
    right: clamp(24px, 2vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}
/* Botó "Més informació →": ocult en repòs, apareix en hover */
#device-wrapper .page-home2 .h2-panel__more {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--ink);
    padding: 11px 20px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
/* El botó només apareix quan l'escriptura ja s'ha completat (classe .is-typed) */
#device-wrapper .page-home2 .h2-panel.is-typed .h2-panel__more { display: inline-flex; }
#device-wrapper .page-home2 .h2-panel__more:hover {
    background-color: var(--ink);
    color: var(--h2-band);
}
/* Text sencer reservat però ocult: manté l'alçada final des del primer moment */
#device-wrapper .page-home2 .h2-panel__desc .h2-rest { visibility: hidden; }
/* Cursor de mecanografia (el text es reescriu en hover) */
#device-wrapper .page-home2 .h2-panel__desc .h2-caret {
    display: inline-block;
    width: 0.9ch;
    background: var(--ink);
    color: transparent;
    margin-left: 2px;
    animation: h2-blink 1s steps(1) infinite;
}
@keyframes h2-blink { 50% { opacity: 0; } }

/* En hover el contingut es converteix en una targeta que OMPLE TOT el panell,
   amb el color de fons del hero (var(--paper)) i el text ancorat A DALT de tot.
   L'estat per defecte es manté igual: text clar sobre el vídeo fosc (vel ::after). */
#device-wrapper .page-home2 .h2-panel::before { display: none; }
/* En hover el contingut (icona + etiqueta + títol) es manté ancorat A BAIX;
   passa a static perquè la descripció (absolute) es posicioni respecte al
   panell, no respecte al contingut. */
#device-wrapper .page-home2 .h2-panel:hover .h2-panel__content,
#device-wrapper .page-home2 .h2-panel:focus-within .h2-panel__content {
    position: static;
}

/* Targetó Cooperació: vídeo de murmuració + lectura numèrica en hover (sense persiana) */
#device-wrapper .page-home2 .h2-panel__photo video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 114%;   /* excés per garantir el farciment (quirk flex + % height) */
    object-fit: cover;
    display: block;
}
/* En hover el vídeo de Cooperació també s'amaga (fons paper ple) */
#device-wrapper .page-home2 .h2-panel--video:hover .h2-panel__photo,
#device-wrapper .page-home2 .h2-panel--video:focus-within .h2-panel__photo { opacity: 0; }
/* La capa de nodes no s'escala ni s'inverteix */
#device-wrapper .page-home2 .h2-panel--video .h2-panel__media,
#device-wrapper .page-home2 .h2-panel--video:hover .h2-panel__media { transform: none; }
/* Stage = quadrat centrat d'alçada 100%, igual que el quadrat visible del
   vídeo (square) amb object-fit:cover en un targetó vertical → els nodes
   queden alineats amb els ocells. */
#device-wrapper .page-home2 .h2-mn-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
}
#device-wrapper .page-home2 .h2-mn-node {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity 180ms ease, left 110ms linear, top 110ms linear;
}
#device-wrapper .page-home2 .h2-mn-node[data-bin="low"]  { color: color-mix(in srgb, var(--accent) 72%, transparent); font-size: 9px; font-weight: 500; }
#device-wrapper .page-home2 .h2-mn-node[data-bin="mid"]  { color: color-mix(in srgb, var(--accent) 92%, transparent); font-size: 10.5px; font-weight: 650; }
#device-wrapper .page-home2 .h2-mn-node[data-bin="high"] { color: var(--accent-deep); font-size: 12px; font-weight: 750; }

/* Targetó Visió sistèmica: globus 3D de la Terra en hover (NO interactiu) */
#device-wrapper .page-home2 .h2-earth {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* globus una mica més amunt dins el targetó */
    transform: translateY(-14%);
}
#device-wrapper .page-home2 .h2-earth canvas { pointer-events: none !important; }
#device-wrapper .page-home2 .h2-panel--earth .h2-panel__media,
#device-wrapper .page-home2 .h2-panel--earth:hover .h2-panel__media { transform: none; }

/* Targetó Regeneració: autòmata cel·lular (canvas de vida artificial) */
#device-wrapper .page-home2 .h2-ca {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
#device-wrapper .page-home2 .h2-panel--ca .h2-panel__media,
#device-wrapper .page-home2 .h2-panel--ca:hover .h2-panel__media { transform: none; }
/* Vídeo de bosc verd (natura): saturació alta per vitalitat, lleuger enfosquit
   per al hero fosc i llegibilitat del text */
#device-wrapper .page-home2 .h2-panel--ca .h2-panel__photo video {
    filter: saturate(1.4) contrast(1.05) brightness(0.9);
}

/* Crèdits d'imatge (discret) — ocults */
#device-wrapper .page-home2 .h2-credits {
    display: none;
    max-width: var(--h2-max);
    margin: 18px auto 0;
    padding: 0 var(--h2-gutter);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: right;
}
#device-wrapper .page-home2 .h2-credits a {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#device-wrapper .page-home2 .h2-credits a:hover { color: var(--accent-deep); }

/* ============================================================
   2. INICIATIVES — categories amb targetes de fons de color
   ============================================================ */
#device-wrapper .page-home2 .h2-init {
    padding: var(--spacing-2xl) 0;
    background: var(--h2-band);
}
#device-wrapper .page-home2 .h2-init__head {
    max-width: var(--h2-max);
    margin: 0 auto var(--spacing-xl);
    padding: 0 var(--h2-gutter);
}
#device-wrapper .page-home2 .h2-init__head h2 {
    font-size: clamp(32px, 4vw, 54px);
    letter-spacing: -0.025em;
    margin: 0 0 14px;
}
#device-wrapper .page-home2 .h2-init__head p {
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--color-text-secondary);
    max-width: 68ch;
    margin: 0;
}

#device-wrapper .page-home2 .h2-cats {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* Categoria: etiqueta (esquerra) + graella de targetes (dreta) */
#device-wrapper .page-home2 .h2-cat {
    --c: var(--accent);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}
#device-wrapper .page-home2 .h2-cat__label {
    position: sticky;
    top: 96px;
}
#device-wrapper .page-home2 .h2-cat__name {
    font-family: var(--h1-font-family);
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 34px);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 12px;
}
#device-wrapper .page-home2 .h2-cat__desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
    max-width: 34ch;
}
#device-wrapper .page-home2 .h2-cat__count {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
#device-wrapper .page-home2 .h2-cat__count::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--c);
}

/* Graella + targetes de fons de color (sense border-top, sense costures) */
#device-wrapper .page-home2 .h2-cat__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}
#device-wrapper .page-home2 .h2-card {
    /* --c s'hereta de la categoria (s'usa als accents: border hover, botó, capa) */
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 1px solid var(--ink);
    padding: clamp(28px, 2.4vw, 44px);
    transition: border-color 0.3s ease;
}
#device-wrapper .page-home2 .h2-card:hover {
    border-color: var(--c);
}
#device-wrapper .page-home2 .h2-card__logo {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    color: var(--ink);
}
#device-wrapper .page-home2 .h2-card__logo img { height: 30px; width: auto; object-fit: contain; }
#device-wrapper .page-home2 .h2-card__logo img.is-lg { height: 38px; }
#device-wrapper .page-home2 .h2-card__logo svg { height: 34px; width: auto; }
#device-wrapper .page-home2 .h2-card__name {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#device-wrapper .page-home2 .h2-card__desc {
    font-family: var(--h1-font-family);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 26px;
    flex: 1;
}
#device-wrapper .page-home2 .h2-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--mono);
    font-size: 13px;
    text-transform: lowercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    margin-bottom: 24px;
}
#device-wrapper .page-home2 .h2-card__layer { color: color-mix(in srgb, var(--ink) 88%, var(--c)); font-weight: 600; }
#device-wrapper .page-home2 .h2-card__btn {
    align-self: flex-start;
    display: inline-block;
    background: var(--ink);
    color: var(--paper) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 11px 22px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
}
#device-wrapper .page-home2 .h2-card__btn:hover { background: var(--c); }
#device-wrapper .page-home2 .h2-card__btn.is-disabled {
    background: transparent;
    color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   3. PROPÒSIT + SOBIRANIA TECNOLÒGICA (banda fosca)
   ============================================================ */
#device-wrapper .page-home2 .h2-purpose {
    padding: var(--spacing-2xl) 0;
    background: var(--ink);
}
#device-wrapper .page-home2 .h2-purpose__grid {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
}
#device-wrapper .page-home2 .h2-purpose .h2-eyebrow { color: var(--accent-gold); }
#device-wrapper .page-home2 .h2-purpose .h2-eyebrow::before { background: var(--accent-gold); }
#device-wrapper .page-home2 .h2-purpose__statement {
    font-family: var(--h1-font-family);
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.24;
    letter-spacing: -0.015em;
    color: var(--paper);
    margin: 0;
}
#device-wrapper .page-home2 .h2-sovereignty {
    position: relative;
    background: rgba(240, 238, 230, 0.04);
    color: var(--paper);
    padding: var(--spacing-lg);
    border: 1px solid rgba(240, 238, 230, 0.20);
    border-top: 5px solid var(--accent);
}
#device-wrapper .page-home2 .h2-sovereignty .h2-eyebrow {
    color: var(--accent-gold);
    margin-bottom: var(--spacing-sm);
}
#device-wrapper .page-home2 .h2-sovereignty .h2-eyebrow::before { background: var(--accent-gold); }
#device-wrapper .page-home2 .h2-sovereignty h3 {
    font-family: var(--h1-font-family);
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: -0.015em;
    color: var(--paper);
    margin: 0 0 var(--spacing-sm);
}
#device-wrapper .page-home2 .h2-sovereignty p {
    font-size: 16.5px;
    line-height: 1.62;
    color: rgba(240, 238, 230, 0.82);
    margin: 0 0 var(--spacing-sm);
}
#device-wrapper .page-home2 .h2-sovereignty p:last-child { margin-bottom: 0; }

/* ============================================================
   4. Tancament (cita) — banda terracota apagada
   ============================================================ */
#device-wrapper .page-home2 .claim.claim-simple {
    background: #9b5e4b;
}
#device-wrapper .page-home2 .claim.claim-simple .claim-headline { color: #fdfbf5; }
#device-wrapper .page-home2 .claim.claim-simple .claim-attribution { color: rgba(253, 251, 245, 0.80); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    #device-wrapper .page-home2 .h2-purpose__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    #device-wrapper .page-home2 .h2-cat {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    #device-wrapper .page-home2 .h2-cat__label { position: static; top: auto; }
    #device-wrapper .page-home2 .h2-cat__desc { max-width: none; }
    #device-wrapper .page-home2 .h2-cats { gap: var(--spacing-xl); }
}

@media (max-width: 768px) {
    #device-wrapper .page-home2 .h2-hero { padding: var(--spacing-lg) 0 var(--spacing-xl); }
    /* Hero: panells apilats; imatge tènue també visible */
    #device-wrapper .page-home2 .h2-panels {
        flex-direction: column;
        gap: 2px;
    }
    #device-wrapper .page-home2 .h2-panel { flex: none; min-height: 380px; }
    /* Sense hover a mòbil: mostrar la descripció sempre */
    #device-wrapper .page-home2 .h2-panel__desc { max-height: 12em; opacity: 1; margin-top: 4px; }

    #device-wrapper .page-home2 .h2-init { padding: var(--spacing-xl) 0; }
    #device-wrapper .page-home2 .h2-purpose { padding: var(--spacing-xl) 0; }
    #device-wrapper .page-home2 .h2-cat__grid { grid-template-columns: 1fr; }
    #device-wrapper .page-home2 .h2-sovereignty { padding: var(--spacing-md); }
}

/* ============================================================
   Modal d'iniciativa (screenshot + info ampliada, sense canvi de pàgina)
   ============================================================ */
#device-wrapper .page-home2 .h2-card { cursor: pointer; }

#device-wrapper .page-home2 .h2-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
}
#device-wrapper .page-home2 .h2-modal[hidden] { display: none; }
#device-wrapper .page-home2 .h2-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 20, 12, 0.62);
    opacity: 0;
    transition: opacity 0.25s ease;
}
#device-wrapper .page-home2 .h2-modal.is-open .h2-modal__backdrop { opacity: 1; }
#device-wrapper .page-home2 .h2-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    width: min(1040px, 100%);
    max-height: 88vh;
    overflow: hidden;
    background: #fff;
    border-top: 3px solid var(--c, var(--accent));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
#device-wrapper .page-home2 .h2-modal.is-open .h2-modal__dialog { transform: none; opacity: 1; }
#device-wrapper .page-home2 .h2-modal__info {
    padding: clamp(28px, 3vw, 46px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}
#device-wrapper .page-home2 .h2-modal__logo { height: 40px; display: flex; align-items: center; color: var(--ink); }
#device-wrapper .page-home2 .h2-modal__logo img { height: 32px; width: auto; object-fit: contain; }
#device-wrapper .page-home2 .h2-modal__logo svg { height: 30px; width: auto; }
#device-wrapper .page-home2 .h2-modal__logo .h2-card__name {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
}
#device-wrapper .page-home2 .h2-modal__text {
    font-family: var(--h1-font-family);
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.55;
    color: var(--ink);
}
#device-wrapper .page-home2 .h2-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
#device-wrapper .page-home2 .h2-modal__meta .h2-card__layer { color: color-mix(in srgb, var(--ink) 88%, var(--c)); font-weight: 600; }
#device-wrapper .page-home2 .h2-modal__actions .h2-card__btn {
    align-self: flex-start;
    display: inline-block;
    background: var(--ink);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 12px 24px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
}
#device-wrapper .page-home2 .h2-modal__actions .h2-card__btn:hover { background: var(--c); }
#device-wrapper .page-home2 .h2-modal__actions .h2-card__btn.is-disabled {
    background: transparent;
    color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    cursor: default;
}
#device-wrapper .page-home2 .h2-modal__shot {
    margin: 0;
    background: #f0eee6;
    overflow: hidden;
}
#device-wrapper .page-home2 .h2-modal__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    display: block;
}
#device-wrapper .page-home2 .h2-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}
#device-wrapper .page-home2 .h2-modal__close:hover { color: var(--c); }

@media (max-width: 768px) {
    #device-wrapper .page-home2 .h2-modal__dialog {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }
    #device-wrapper .page-home2 .h2-modal__shot { order: -1; max-height: 40vh; }
    #device-wrapper .page-home2 .h2-modal__shot img { object-fit: cover; }
}
/* ============================================================
   Home3 — còpia de home2 (escopat a .page-home3)
   Línies rectes (sense border-radius), amplada ampla, bandes de
   fons alternes. Hero: 3 blocs amb contingut sempre visible i
   imatge de gran format que es revela en hover. Iniciatives:
   targetes de fons de color, sense línies separadores.
   Paleta terracota/ocre. Sistema càlid (crema + Georgia + Inter).
   ============================================================ */

#device-wrapper .page-home3 {
    --accent: #c75b39;        /* terracota — accent principal */
    --accent-deep: #b95536;   /* terracota profund */
    --accent-gold: #c98f29;   /* ocre daurat */
    --accent-earth: #3f5e51;  /* verd profund terrós (Visió sistèmica / Laboratori IA) */
    --ink: #191919;
    --paper: #f0eee6;
    --hairline: rgba(25, 25, 25, 0.16);
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --h2-max: min(95vw, 1800px);
    --h2-gutter: clamp(16px, 1.2vw, 56px);
    --h2-band: #e8e3d6;   /* sorra (iniciatives) */
}

/* Eyebrow / etiqueta tècnica */
#device-wrapper .page-home3 .h2-eyebrow {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0 0 var(--spacing-md) 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#device-wrapper .page-home3 .h2-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--accent);
}

/* ============================================================
   1. HERO — tres principis amb contingut sempre visible
   ============================================================ */
#device-wrapper .page-home3 .h2-hero {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    background: var(--paper);   /* hero en fons clar (com la home) */
}
#device-wrapper .page-home3 .h2-hero__intro {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);   /* centrat i alineat amb la resta de seccions */
}
/* Reserva l'alcada de frase (4 linies) + boto en aquest embolcall, no al lede:
   aixi el lede te alcada natural i el boto apareix ENGANXAT al text que s'escriu
   (curt o llarg), mentre l'espai sobrant queda A SOTA del boto -> les targetes
   no es desplacen. La reserva usa la metrica del lede (font clamp x line-height
   x 4) + marge i alcada del boto, per escalar amb el responsive. */
#device-wrapper .page-home3 .h2-hero__body {
    min-height: calc(clamp(17px, 1.5vw, 22px) * 1.55 * 4 + 24px + 40px);
}
#device-wrapper .page-home3 .h2-hero h1 {
    font-size: clamp(29px, 5.6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0 0 var(--spacing-md);
    color: var(--ink);
    max-width: 46rem;   /* ample del titol del hero */
}
#device-wrapper .page-home3 .h2-hero__lede {
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.55;
    color: rgba(25, 25, 25, 0.72);
    margin: 0;
    max-width: 56ch;   /* mesura del lede */
}

/* Header: logo i text foscos per defecte (com la home), però el FONS igualat
   al del hero (var(--paper) = #f0eee6). El header és germà de <main>, fora de
   .page-home3, per això s'usa el literal (la variable no hi arriba).
   !important + selector específic per guanyar la regla de custom.css. */
body.home3 #device-wrapper header.site-header {
    background-color: #f0eee6 !important;
    border-bottom: 0;
}

/* Panells -> TARGETES: icona + etiqueta + titol dins una targeta clara.
   La descripcio s'escriu A SOTA de la targeta (en hover a escriptori, o en
   tocar-la a tactil). Sense video ni grafics de fons.
   Objectiu: hero + header visibles en un iPad vertical sense scroll -> les
   targetes es mantenen en FILA en tablet i son compactes. */
/* Estructura editorial monocroma: un filet fi separa la intro dels tres eixos,
   i filets verticals divideixen les columnes (aire de full d'especimens). */
#device-wrapper .page-home3 .h2-panels {
    max-width: var(--h2-max);
    margin: clamp(28px, 4vw, 64px) auto 0;
    padding: clamp(22px, 2.6vw, 44px) var(--h2-gutter) 0;
    display: flex;
    gap: 0;
    align-items: stretch;
    border-top: 1px solid var(--hairline);
}
#device-wrapper .page-home3 .h2-panel {
    --p: var(--accent);
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.4vw, 22px);
    padding-inline: clamp(16px, 2.4vw, 48px);
    cursor: pointer;   /* cursor maneta: la targeta es interactiva (hover/tap) */
}
#device-wrapper .page-home3 .h2-panel:first-child { padding-left: 0; }
#device-wrapper .page-home3 .h2-panel:last-child { padding-right: 0; }
#device-wrapper .page-home3 .h2-panel + .h2-panel { border-left: 1px solid var(--hairline); }
#device-wrapper .page-home3 .h2-panel:focus-visible { outline: none; }

/* La targeta: la separacio horitzontal ja la dona el .h2-panel (filets). */
#device-wrapper .page-home3 .h2-panel__card {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(10px, 1.4vw, 16px);
    min-height: 0;
}
/* Targeta transparent: sense fons ni border. */
#device-wrapper .page-home3 .h2-panel__icon {
    width: clamp(46px, 11vw, 100px);
    height: clamp(46px, 11vw, 100px);
    color: var(--ink);
    flex-shrink: 0;
}
#device-wrapper .page-home3 .h2-panel__icon svg { width: 100%; height: 100%; }
#device-wrapper .page-home3 .h2-panel__text { display: flex; flex-direction: column; }
#device-wrapper .page-home3 .h2-panel__tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 10px;
}
#device-wrapper .page-home3 .h2-panel__title {
    font-family: var(--h1-font-family);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    font-size: clamp(15px, 2.4vw, 33px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Afordanca monocroma: subratllat en tinta que llisca en hover/focus/tap */
    display: inline;
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 3px;
    transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Fletxa ">" que apareix lliscant: senyala que la targeta obre contingut */
/* La fletxa ja NO apareix nomes en hover: si nomes es veu quan hi passes per
   sobre, qui no hi passa no sap mai que hi ha res a sota. Sempre visible,
   discreta, i s'encen en hover/focus/tap. */
#device-wrapper .page-home3 .h2-panel__title::after {
    content: " \2192";
    white-space: nowrap;
    opacity: 0.28;
    transition: opacity 0.35s ease;
}
#device-wrapper .page-home3 .h2-panel:hover .h2-panel__title,
#device-wrapper .page-home3 .h2-panel:focus-within .h2-panel__title,
#device-wrapper .page-home3 .h2-panel.is-active .h2-panel__title {
    background-size: 100% 1px;
}
#device-wrapper .page-home3 .h2-panel:hover .h2-panel__title::after,
#device-wrapper .page-home3 .h2-panel:focus-within .h2-panel__title::after,
#device-wrapper .page-home3 .h2-panel.is-active .h2-panel__title::after {
    opacity: 0.55;
}

/* Font de dades per targeta (descripcio + boto): oculta. El JS la llegeix i la
   mecanografia dins el lede del hero (.h2-hero__lede). En edit-mode es mostra per editar-la. */
#device-wrapper .page-home3 .h2-panel__src { display: none; }
body.edit-mode-active #device-wrapper .page-home3 .h2-panel__src { display: block; margin-top: 12px; }
body.edit-mode-active #device-wrapper .page-home3 .h2-panel__src .h2-panel__desc { font-family: var(--mono); font-size: 14px; color: var(--ink); }

/* La descripcio de la targeta activa REEMPLACA el lede del hero: en hover/tap
   d'una targeta el text del lede se substitueix (mecanografiat) per la seva
   descripcio; en sortir, es restaura el lede per defecte. */
#device-wrapper .page-home3 .h2-hero__lede .h2-rest { visibility: hidden; }
#device-wrapper .page-home3 .h2-hero__lede .h2-caret {
    display: inline-block;
    width: 1ch;
    background: var(--ink);
    color: transparent;
    margin-left: 2px;
    animation: h2-blink 1s steps(1) infinite;
}
@keyframes h2-blink { 50% { opacity: 0; } }

/* Boto "Mes informacio ->" de la targeta activa, A SOTA del text (dins l'intro).
   Espai reservat amb visibility perque en aparèixer no desplaci les targetes. */
#device-wrapper .page-home3 .h2-hero__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(16px, 1.6vw, 24px);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--ink);
    padding: 10px 18px;
    box-sizing: border-box;
    min-height: 40px;   /* reserva l'alcada del boto ple: en omplir-se (hover) no desplaça les targetes */
    visibility: hidden;   /* reserva espai; visible quan hi ha una targeta activa */
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
#device-wrapper .page-home3 .h2-hero__more.is-shown { visibility: visible; }
#device-wrapper .page-home3 .h2-hero__more:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Credits d'imatge: ja no s'usen (sense videos) */
#device-wrapper .page-home3 .h2-credits { display: none; }

/* ============================================================
   2. INICIATIVES — categories amb targetes de fons de color
   ============================================================ */
#device-wrapper .page-home3 .h2-init {
    padding: var(--spacing-2xl) 0;
    background: var(--h2-band);
}
#device-wrapper .page-home3 .h2-init__head {
    max-width: var(--h2-max);
    margin: 0 auto var(--spacing-xl);
    padding: 0 var(--h2-gutter);
}
#device-wrapper .page-home3 .h2-init__head h2 {
    font-size: clamp(32px, 4vw, 54px);
    letter-spacing: -0.025em;
    margin: 0 0 14px;
}
#device-wrapper .page-home3 .h2-init__head p {
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--color-text-secondary);
    max-width: 68ch;
    margin: 0;
}

#device-wrapper .page-home3 .h2-cats {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* Categoria: etiqueta (esquerra) + graella de targetes (dreta) */
#device-wrapper .page-home3 .h2-cat {
    --c: var(--accent);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}
#device-wrapper .page-home3 .h2-cat__label {
    position: sticky;
    top: 96px;
}
#device-wrapper .page-home3 .h2-cat__name {
    font-family: var(--h1-font-family);
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 34px);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 12px;
}
#device-wrapper .page-home3 .h2-cat__desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
    max-width: 34ch;
}
#device-wrapper .page-home3 .h2-cat__count {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
#device-wrapper .page-home3 .h2-cat__count::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--c);
}

/* Graella + targetes de fons de color (sense border-top, sense costures) */
#device-wrapper .page-home3 .h2-cat__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
}
#device-wrapper .page-home3 .h2-card {
    /* --c s'hereta de la categoria (s'usa als accents: border hover, botó, capa) */
    position: relative;
    display: flex;
    flex-direction: column;
    /* Sense aspect-ratio 1/1: el quadrat deixava un forat vertical mort a cada
       targeta i feia que Iniciatives fos la seccio mes alta de la pagina.
       Ara mana el contingut i la fila iguala alcades per si sola (stretch). */
    background: transparent;
    border: 1px solid var(--ink);
    padding: clamp(28px, 2.4vw, 44px);
    transition: border-color 0.3s ease;
}
#device-wrapper .page-home3 .h2-card:hover {
    border-color: var(--c);
}
#device-wrapper .page-home3 .h2-card__logo {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    color: var(--ink);
}
#device-wrapper .page-home3 .h2-card__logo img { height: 30px; width: auto; object-fit: contain; }
#device-wrapper .page-home3 .h2-card__logo img.is-lg { height: 38px; }
#device-wrapper .page-home3 .h2-card__logo svg { height: 34px; width: auto; }
#device-wrapper .page-home3 .h2-card__name {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#device-wrapper .page-home3 .h2-card__desc {
    font-family: var(--h1-font-family);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink);
    /* flex:1 empenyia la meta i el boto al fons del quadrat. Ara nomes reserva
       l'espai que li cal i el marge inferior separa del bloc de dades. */
    margin: 0 0 auto;
    padding-bottom: 26px;
}
#device-wrapper .page-home3 .h2-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--mono);
    font-size: 13px;
    text-transform: lowercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    margin-bottom: 24px;
}
#device-wrapper .page-home3 .h2-card__layer { color: color-mix(in srgb, var(--ink) 88%, var(--c)); font-weight: 600; }
#device-wrapper .page-home3 .h2-card__btn {
    align-self: flex-start;
    display: inline-block;
    background: var(--ink);
    color: var(--paper) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 11px 22px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
}
#device-wrapper .page-home3 .h2-card__btn:hover { background: var(--c); }
#device-wrapper .page-home3 .h2-card__btn.is-disabled {
    background: transparent;
    color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   3. PROPÒSIT + SOBIRANIA TECNOLÒGICA (banda fosca)
   ============================================================ */
#device-wrapper .page-home3 .h2-purpose {
    padding: var(--spacing-2xl) 0;
    background: var(--ink);
}
#device-wrapper .page-home3 .h2-purpose__grid {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
}
#device-wrapper .page-home3 .h2-purpose .h2-eyebrow { color: var(--accent-gold); }
#device-wrapper .page-home3 .h2-purpose .h2-eyebrow::before { background: var(--accent-gold); }
#device-wrapper .page-home3 .h2-purpose__statement {
    font-family: var(--h1-font-family);
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.24;
    letter-spacing: -0.015em;
    color: var(--paper);
    margin: 0;
}
#device-wrapper .page-home3 .h2-sovereignty {
    position: relative;
    background: rgba(240, 238, 230, 0.04);
    color: var(--paper);
    padding: var(--spacing-lg);
    border: 1px solid rgba(240, 238, 230, 0.20);
    border-top: 5px solid var(--accent);
}
#device-wrapper .page-home3 .h2-sovereignty .h2-eyebrow {
    color: var(--accent-gold);
    margin-bottom: var(--spacing-sm);
}
#device-wrapper .page-home3 .h2-sovereignty .h2-eyebrow::before { background: var(--accent-gold); }
#device-wrapper .page-home3 .h2-sovereignty h3 {
    font-family: var(--h1-font-family);
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: -0.015em;
    color: var(--paper);
    margin: 0 0 var(--spacing-sm);
}
#device-wrapper .page-home3 .h2-sovereignty p {
    font-size: 16.5px;
    line-height: 1.62;
    color: rgba(240, 238, 230, 0.82);
    margin: 0 0 var(--spacing-sm);
}
#device-wrapper .page-home3 .h2-sovereignty p:last-child { margin-bottom: 0; }

/* ============================================================
   4. Tancament (cita) — banda terracota apagada
   ============================================================ */
#device-wrapper .page-home3 .claim.claim-simple {
    background: #9b5e4b;
}
#device-wrapper .page-home3 .claim.claim-simple .claim-headline { color: #fdfbf5; }
#device-wrapper .page-home3 .claim.claim-simple .claim-attribution { color: rgba(253, 251, 245, 0.80); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Fins a 1300px (tots els iPads menys el 12,9"): l'etiqueta de categoria passa
   a dalt i la graella va a 2 columnes. Amb el layout d'escriptori (etiqueta de
   300px + graella), entre ~1080 i ~1280px la graella quedava tan estreta que hi
   cabia UNA sola targeta gegant (~720px en un iPad d'11" apaïsat). */
@media (max-width: 1300px) {
    #device-wrapper .page-home3 .h2-purpose__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    #device-wrapper .page-home3 .h2-cat {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    #device-wrapper .page-home3 .h2-cat__label { position: static; top: auto; }
    #device-wrapper .page-home3 .h2-cat__desc { max-width: none; }
    #device-wrapper .page-home3 .h2-cats { gap: var(--spacing-xl); }
    /* En tablet, l'etiqueta passa a dalt i la graella ocupa tota l'amplada.
       Graella fluida: 3 columnes en tablet horitzontal (>=~1024px), 2 en
       vertical (~768px). minmax evita les targetes enormes. */
    #device-wrapper .page-home3 .h2-cat__grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

@media (max-width: 768px) {
    #device-wrapper .page-home3 .h2-hero { padding: var(--spacing-lg) 0 var(--spacing-xl); }
    /* Les targetes es mantenen en FILA (triptic) a totes les mides; escala
       de icona/titol/espaiats via els clamp de les regles base. */
    #device-wrapper .page-home3 .h2-init { padding: var(--spacing-xl) 0; }
    #device-wrapper .page-home3 .h2-purpose { padding: var(--spacing-xl) 0; }
    #device-wrapper .page-home3 .h2-sovereignty { padding: var(--spacing-md); }
}

@media (max-width: 560px) {
    /* Mobil: es mante el TRIPTIC (3 targetes en fila); nomes afinem espaiats */
    #device-wrapper .page-home3 .h2-hero { padding: var(--spacing-md) 0 var(--spacing-lg); }
    #device-wrapper .page-home3 .h2-panel__card { padding: 8px; padding-left: 0; }
    #device-wrapper .page-home3 .h2-panel__tag { font-size: 9.5px; letter-spacing: 0.12em; margin-bottom: 7px; }
    /* Mobil: les iniciatives passen a una sola columna (targetes no enormes) */
    #device-wrapper .page-home3 .h2-cat__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Modal d'iniciativa (screenshot + info ampliada, sense canvi de pàgina)
   ============================================================ */
#device-wrapper .page-home3 .h2-card { cursor: pointer; }

#device-wrapper .page-home3 .h2-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
}
#device-wrapper .page-home3 .h2-modal[hidden] { display: none; }
#device-wrapper .page-home3 .h2-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 20, 12, 0.62);
    opacity: 0;
    transition: opacity 0.25s ease;
}
#device-wrapper .page-home3 .h2-modal.is-open .h2-modal__backdrop { opacity: 1; }
#device-wrapper .page-home3 .h2-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    width: min(1040px, 100%);
    max-height: 88vh;
    overflow: hidden;
    background: #fff;
    border-top: 3px solid var(--c, var(--accent));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
#device-wrapper .page-home3 .h2-modal.is-open .h2-modal__dialog { transform: none; opacity: 1; }
#device-wrapper .page-home3 .h2-modal__info {
    padding: clamp(28px, 3vw, 46px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}
#device-wrapper .page-home3 .h2-modal__logo { height: 40px; display: flex; align-items: center; color: var(--ink); }
#device-wrapper .page-home3 .h2-modal__logo img { height: 32px; width: auto; object-fit: contain; }
#device-wrapper .page-home3 .h2-modal__logo svg { height: 30px; width: auto; }
#device-wrapper .page-home3 .h2-modal__logo .h2-card__name {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
}
#device-wrapper .page-home3 .h2-modal__text {
    font-family: var(--h1-font-family);
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.55;
    color: var(--ink);
}
#device-wrapper .page-home3 .h2-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
#device-wrapper .page-home3 .h2-modal__meta .h2-card__layer { color: color-mix(in srgb, var(--ink) 88%, var(--c)); font-weight: 600; }
#device-wrapper .page-home3 .h2-modal__actions .h2-card__btn {
    align-self: flex-start;
    display: inline-block;
    background: var(--ink);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 12px 24px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease;
}
#device-wrapper .page-home3 .h2-modal__actions .h2-card__btn:hover { background: var(--c); }
#device-wrapper .page-home3 .h2-modal__actions .h2-card__btn.is-disabled {
    background: transparent;
    color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    cursor: default;
}
#device-wrapper .page-home3 .h2-modal__shot {
    margin: 0;
    background: #f0eee6;
    overflow: hidden;
}
#device-wrapper .page-home3 .h2-modal__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    display: block;
}
#device-wrapper .page-home3 .h2-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}
#device-wrapper .page-home3 .h2-modal__close:hover { color: var(--c); }

@media (max-width: 768px) {
    #device-wrapper .page-home3 .h2-modal__dialog {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }
    #device-wrapper .page-home3 .h2-modal__shot { order: -1; max-height: 40vh; }
    #device-wrapper .page-home3 .h2-modal__shot img { object-fit: cover; }
}

/* ============================================================
   TABLET HORITZONTAL (iPad apaïsat) — header + hero SENCERS sense scroll
   ------------------------------------------------------------
   A l'iPad apaïsat (p.ex. 1024×768) l'amplada és gran però l'alçada curta:
   els clamp basats en `vw` creixien massa i el hero sobresortia per sota.
   Aquí el hero es fa COMPACTE i queda alineat a DALT (no s'estira ni es
   centra: així les targetes i els seus textos queden ben amunt i no els
   menja la barra d'eines del Safari de l'iPad). La tipografia i les icones
   escalen amb l'ALÇADA (`vh`) perquè tot hi càpiga equilibrat.
   Abast: tauletes en horitzontal (pointer coarse, ample >=768, alt 600–1040).
   ============================================================ */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 768px) and (min-height: 600px) and (max-height: 1040px) {
    #device-wrapper .page-home3 .h2-hero {
        padding-top: clamp(30px, 6.4vh, 68px);
        padding-bottom: clamp(24px, 4.4vh, 52px);
    }
    #device-wrapper .page-home3 .h2-eyebrow {
        margin-bottom: clamp(8px, 1.7vh, 18px);
    }
    #device-wrapper .page-home3 .h2-hero h1 {
        font-size: clamp(32px, 6vh, 56px);
        line-height: 1.06;
        margin-bottom: clamp(12px, 2.2vh, 24px);
    }
    #device-wrapper .page-home3 .h2-hero__lede {
        font-size: clamp(15px, 2.2vh, 20px);
        line-height: 1.5;
    }
    /* Reserva d'alçada del lede (3 línies) + botó, escalada amb l'alçada */
    #device-wrapper .page-home3 .h2-hero__body {
        min-height: calc(clamp(15px, 2.2vh, 20px) * 1.5 * 3 + clamp(12px, 1.8vh, 20px) + 40px);
    }
    #device-wrapper .page-home3 .h2-hero__more {
        margin-top: clamp(10px, 1.8vh, 20px);
    }
    /* Separació intro -> targetes (filet + espai compactes en apaïsat) */
    #device-wrapper .page-home3 .h2-panels {
        margin-top: clamp(22px, 4.6vh, 52px);
        padding-top: clamp(18px, 3.4vh, 40px);
    }
    #device-wrapper .page-home3 .h2-panel {
        gap: clamp(10px, 1.8vh, 20px);
    }
    #device-wrapper .page-home3 .h2-panel__card {
        padding-top: 0;
        padding-bottom: 0;
        gap: clamp(10px, 1.6vh, 18px);
    }
    #device-wrapper .page-home3 .h2-panel__icon {
        width: clamp(54px, 10.5vh, 96px);
        height: clamp(54px, 10.5vh, 96px);
    }
    #device-wrapper .page-home3 .h2-panel__tag {
        margin-bottom: clamp(6px, 1.4vh, 14px);
    }
    #device-wrapper .page-home3 .h2-panel__title {
        font-size: clamp(16px, 3.4vh, 32px);
    }
}

/* ============================================================
   LES QUATRE CAPES — estratigrafia (07/09/2026)
   De dalt a baix: del model teoric global fins al ferro que operem aqui.
   Tot monocrom (tinta + filets), sense colors d'accent.
   Dues coses diuen el missatge sense escriure'l:
     - l'eix de l'esquerra (teoric -> fisic),
     - el filet superior de cada fila, que s'engruixeix cap avall (1 -> 4px):
       com mes a baix, mes materia.
   ============================================================ */
#device-wrapper .page-home3 .h3-stack {
    padding: var(--spacing-2xl) 0;
    background: var(--paper);
}
#device-wrapper .page-home3 .h3-stack__head {
    max-width: var(--h2-max);
    margin: 0 auto var(--spacing-xl);
    padding: 0 var(--h2-gutter);
}
#device-wrapper .page-home3 .h3-stack__head h2 {
    font-family: var(--h1-font-family);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 54px);
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 14px;
}
#device-wrapper .page-home3 .h3-stack__head p {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 62ch;
    margin: 0;
}

#device-wrapper .page-home3 .h3-stack__grid {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
    display: grid;
    grid-template-columns: clamp(24px, 3vw, 56px) minmax(0, 1fr);
}

/* Eix vertical, sense etiquetes (07/09/2026): nomes el filet que recorre la
   pila de dalt a baix i troba el terra formant una L. Es el que es queda sencer
   quan les files s'atenuen en hover. */
#device-wrapper .page-home3 .h3-stack__axis {
    position: relative;
}
#device-wrapper .page-home3 .h3-axis-line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ink);
}

#device-wrapper .page-home3 .h3-stack__rows {
    display: flex;
    flex-direction: column;
}
/* El filet de tancament de la pila, el mes gruixut de tots: el terra. */
#device-wrapper .page-home3 .h3-stack__rows::after {
    content: "";
    display: block;
    border-top: 4px solid var(--ink);
}

/* La fila es un <a> cap al projecte (finestra nova): cal neutralitzar els
   estils globals d'enllac, que hi posarien color i subratllat. */
#device-wrapper .page-home3 .h3-layer {
    color: var(--ink);
    text-decoration: none !important;
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr) auto;
    gap: 0 clamp(16px, 1.8vw, 34px);
    align-items: baseline;
    padding: clamp(20px, 2.2vw, 34px) 0 clamp(20px, 2.2vw, 34px) clamp(16px, 2vw, 40px);
    border-top: 1px solid var(--hairline);
    cursor: pointer;
    transition: opacity 0.25s ease;
}
#device-wrapper .page-home3 .h3-layer:nth-child(2) { border-top-width: 1.5px; }
#device-wrapper .page-home3 .h3-layer:nth-child(3) { border-top-width: 2.5px; }
#device-wrapper .page-home3 .h3-layer:nth-child(4) { border-top-width: 3.5px; }
#device-wrapper .page-home3 .h3-layer:nth-child(n+2) { border-top-color: var(--ink); }

#device-wrapper .page-home3 .h3-layer__n,
#device-wrapper .page-home3 .h3-layer__url {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
#device-wrapper .page-home3 .h3-layer__scale {
    grid-column: 2;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    display: block;
    margin: 0 0 10px;
}
#device-wrapper .page-home3 .h3-layer__body { grid-column: 2; }
#device-wrapper .page-home3 .h3-layer__name {
    font-family: var(--h1-font-family);
    font-weight: 400;
    /* Mida triada perque la TINTA de la paraula (~24px a 1440) coincideixi amb
       la de KOSMOS i la d'intergrid. Vegeu la nota de sota. */
    font-size: clamp(20px, 2.4vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 8px;
}
#device-wrapper .page-home3 .h3-layer__desc {
    font-size: clamp(14.5px, 1.15vw, 17px);
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
    /* Les descripcions son de dues i tres frases: mesura mes ampla perque no
       facin cinc linies estretes. Que les files quedin de gruixos diferents no
       es un problema aqui: es una estratigrafia. */
    max-width: 58ch;
}
/* La fila obre el modal: subratllat en tinta que llisca sota el nom, com als
   titols dels tres principis del hero. */
#device-wrapper .page-home3 .h3-layer__name {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.4s ease;
    display: inline;
}
#device-wrapper .page-home3 .h3-layer:hover .h3-layer__name,
#device-wrapper .page-home3 .h3-layer:focus-visible .h3-layer__name {
    background-size: 100% 1px;
}
#device-wrapper .page-home3 .h3-layer:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 4px;
}
/* Fletxa d'enllac extern: la fila obre el projecte en una finestra nova i
   convé que es vegi abans de clicar. */
#device-wrapper .page-home3 .h3-layer__url::after {
    content: " \2197";
    margin-left: 4px;
}

/* "Cap no funciona sola": en mirar-ne una, les altres s'atenuen pero els filets
   i l'eix es queden sencers. */
@media (hover: hover) {
    #device-wrapper .page-home3 .h3-stack__rows:hover .h3-layer { opacity: 0.42; }
    #device-wrapper .page-home3 .h3-stack__rows:hover .h3-layer:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #device-wrapper .page-home3 .h3-layer,
    #device-wrapper .page-home3 .h3-layer__name { transition: none; }
}

/* Sota 720px l'eix desapareix i les files ocupen tota l'amplada. */
@media (max-width: 720px) {
    #device-wrapper .page-home3 .h3-stack__grid { grid-template-columns: 1fr; }
    #device-wrapper .page-home3 .h3-stack__axis { display: none; }
    #device-wrapper .page-home3 .h3-layer {
        grid-template-columns: 2.6em minmax(0, 1fr);
        padding-left: 0;
        gap: 0 14px;
    }
    #device-wrapper .page-home3 .h3-layer__url {
        grid-column: 2;
        margin-top: 12px;
    }
}

/* ============================================================
   INICIATIVES sense categories (07/09/2026)
   Els tres ambits i les sis etiquetes de capa s'han retirat: aqui hi ha
   nomes els projectes independents, en una graella plana. Les targetes
   segueixen usant --c per als accents, i a home3 --c es la tinta.
   ============================================================ */
#device-wrapper .page-home3 .h2-init__grid {
    --c: var(--ink);
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}
@media (max-width: 420px) {
    #device-wrapper .page-home3 .h2-init__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MILLORES D'US I COMUNICACIO (07/09/2026)
   ============================================================ */

/* --- Mobil: els tres principis deixen d'estar amagats darrere un gest ---
   Sota 600px les targetes s'apilen i la descripcio es mostra SEMPRE sota el
   titol. El JS del hero no s'activa aqui (surt d'hora), aixi que ningu escriu
   res al lede: es queda la frase per defecte. A tauleta NO es fa, perque el
   hero ha de cabre sencer en un iPad i tres descripcions no hi caben. */
@media (max-width: 600px) {
    /* El triptic NO s'apilava mai. Amb la descripcio visible, tres columnes de
       ~90px partien les paraules i era il.legible: al mobil s'apilen. La tauleta
       (>=601px) no es toca -> el hero segueix cabent sencer a l'iPad. */
    #device-wrapper .page-home3 .h2-panels {
        flex-direction: column;
        gap: 0;
    }
    #device-wrapper .page-home3 .h2-panel {
        padding-inline: 0;
        padding-block: 22px;
    }
    #device-wrapper .page-home3 .h2-panel + .h2-panel {
        border-left: 0;
        border-top: 1px solid var(--hairline);
    }
    #device-wrapper .page-home3 .h2-panel__card {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    #device-wrapper .page-home3 .h2-panel__icon {
        width: 44px;
        height: 44px;
    }
    #device-wrapper .page-home3 .h2-panel__title { font-size: 22px; }
    #device-wrapper .page-home3 .h2-panel__src {
        display: block;
        margin-top: 10px;
    }
    #device-wrapper .page-home3 .h2-panel__src .h2-panel__desc {
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--color-text-secondary);
        margin: 0 0 10px;
    }
    #device-wrapper .page-home3 .h2-panel__src .h2-panel__more {
        display: inline-flex;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink);
        text-decoration: none;
        border-bottom: 1px solid var(--ink);
        padding-bottom: 2px;
    }
    #device-wrapper .page-home3 .h2-panel { cursor: default; }
    /* La fletxa del titol ja no significa res aqui: el text ja es visible. */
    #device-wrapper .page-home3 .h2-panel__title::after { content: none; }
}

/* --- Invitacio a baixar al final del hero --- */
#device-wrapper .page-home3 .h2-scroll {
    max-width: var(--h2-max);
    margin: clamp(28px, 3.5vw, 56px) auto 0;
    padding: 0 var(--h2-gutter);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-decoration: none;
    width: fit-content;
}
#device-wrapper .page-home3 .h2-scroll:hover { color: var(--ink); }
#device-wrapper .page-home3 .h2-scroll__arrow {
    font-size: 14px;
    animation: h3-nudge 2.4s ease-in-out infinite;
}
@keyframes h3-nudge {
    0%, 70%, 100% { transform: translateY(0); }
    82% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
    #device-wrapper .page-home3 .h2-scroll__arrow { animation: none; }
}

/* --- Iniciatives en dos grups: les quatre capes i la resta --- */
#device-wrapper .page-home3 .h2-init__group + .h2-init__group {
    margin-top: var(--spacing-xl);
}
#device-wrapper .page-home3 .h2-init__label {
    max-width: var(--h2-max);
    margin: 0 auto var(--spacing-md);
    padding: 14px var(--h2-gutter) 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
/* El filet va DINS del padding del contenidor, no a tota l'amplada de la banda,
   per alinear-se amb la resta de columnes de la pagina. */
#device-wrapper .page-home3 .h2-init__group {
    position: relative;
}
#device-wrapper .page-home3 .h2-init__group::before {
    content: "";
    display: block;
    max-width: var(--h2-max);
    margin: 0 auto;
    border-top: 1px solid var(--hairline);
}

/* --- Afordanca permanent a la targeta: obre la fitxa ampliada --- */
#device-wrapper .page-home3 .h2-card__cue {
    position: absolute;
    top: clamp(16px, 1.4vw, 24px);
    right: clamp(16px, 1.4vw, 24px);
    font-family: var(--mono);
    font-size: 17px;
    line-height: 1;
    color: var(--ink);
    opacity: 0.3;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#device-wrapper .page-home3 .h2-card:hover .h2-card__cue,
#device-wrapper .page-home3 .h2-card:focus-visible .h2-card__cue {
    opacity: 1;
    transform: rotate(90deg);
}
#device-wrapper .page-home3 .h2-card:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 3px;
}

/* --- Propòsit: la columna esquerra deixava ~250px de negre buit a sota --- */
#device-wrapper .page-home3 .h2-purpose__grid { align-items: stretch; }
#device-wrapper .page-home3 .h2-purpose__lead {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* el manifest se centra amb la caixa del costat */
}

/* --- Modal: navegacio entre iniciatives (7 targetes + 4 capes) --- */
/* En flux, sota les accions: en absolut trepitjava el boto "Visita el web". */
#device-wrapper .page-home3 .h2-modal__nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(20px, 2vw, 30px);
    padding-top: clamp(14px, 1.4vw, 20px);
    border-top: 1px solid var(--hairline);
}
#device-wrapper .page-home3 .h2-modal__arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#device-wrapper .page-home3 .h2-modal__arrow:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
#device-wrapper .page-home3 .h2-modal__pos {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   TANCAMENT — la crida, l'ultima cosa abans del peu
   ============================================================ */
#device-wrapper .page-home3 .h3-cta {
    padding: var(--spacing-2xl) 0;
    background: var(--paper);
}
#device-wrapper .page-home3 .h3-cta__inner {
    max-width: var(--h2-max);
    margin: 0 auto;
    padding: 0 var(--h2-gutter);
}
#device-wrapper .page-home3 .h3-cta h2 {
    font-family: var(--h1-font-family);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 50px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 16px;
    max-width: 22ch;
}
#device-wrapper .page-home3 .h3-cta__text {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg);
    max-width: 54ch;
}
#device-wrapper .page-home3 .h3-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
#device-wrapper .page-home3 .h3-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--paper) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 14px 26px;
    text-decoration: none !important;
    border: 1px solid var(--ink);
    transition: background 0.2s ease, color 0.2s ease;
}
#device-wrapper .page-home3 .h3-cta__btn:hover {
    background: transparent;
    color: var(--ink) !important;
}
#device-wrapper .page-home3 .h3-cta__btn--ghost {
    background: transparent;
    color: var(--ink) !important;
}
#device-wrapper .page-home3 .h3-cta__btn--ghost:hover {
    background: var(--ink);
    color: var(--paper) !important;
}

/* --- Marca de cada capa (07/09/2026) ------------------------------------
   Kosmos i Intergrid tenen el nom DINS del logo: s'hi posa el lockup sencer i
   prou. Arkadium i Intrabase nomes tenen la marca: va acompanyada del nom en
   el mateix serif de la pila. Les dues variants son inline-flex perque el
   subratllat que llisca segueixi cenyint-se al contingut i no a tota la fila. */
#device-wrapper .page-home3 .h3-layer__name--mark,
#device-wrapper .page-home3 .h3-layer__name--logo {
    display: inline-flex;
    align-items: center;
}
#device-wrapper .page-home3 .h3-layer__name--mark { gap: 0.42em; }
/* Les quatre paraules han de VEURE'S igual de grans, i per aixo les caixes NO
   poden ser iguals: a l'SVG de Kosmos les lletres nomes ocupen ~47% de
   l'alcada del fitxer, i a intergrid ~89% (i a mes es tot en minuscula, o sigui
   que la tinta va d'ascendent a descendent). Mesurat en pixels a 1440 abans de
   tocar res: Arkadium 30,0 / KOSMOS 16,7 / Intrabase 29,7 / intergrid 30,3.
   Les mides d'aqui igualen totes quatre a ~24px d'alcada de caixa alta. */
#device-wrapper .page-home3 .h3-layer__mark {
    width: 0.8em;
    height: 0.8em;
    flex: none;
    display: inline-flex;
    color: var(--ink);
}
#device-wrapper .page-home3 .h3-layer__mark img,
#device-wrapper .page-home3 .h3-layer__mark svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Els lockups amb wordmark s'igualen per ALCADA DE TRAC, no per caixa: si
   s'escalessin a l'alcada del serif farien el doble d'ample que els altres. */
#device-wrapper .page-home3 .h3-layer__name--logo img {
    width: auto;
    display: block;
}
#device-wrapper .page-home3 .h3-layer__name--logo.is-kosmos img { height: clamp(29px, 3.5vw, 52px); }
#device-wrapper .page-home3 .h3-layer__name--logo.is-intergrid img { height: clamp(20px, 2.43vw, 36px); }
/* ============================================================
   Eixos — pàgines individuals dels 3 principis d'Opengea
   (Regeneració, Cooperació, Visió sistèmica). Escopat a .eix.
   Hero fosc a tota pantalla amb el gràfic de fons + títol;
   a sota, concepte (fons clar) i bloc d'aplicació amb projectes.
   ============================================================ */
#device-wrapper .eix {
    --accent: #c75b39;        /* terracota */
    --accent-deep: #b95536;
    --accent-gold: #c98f29;   /* ocre daurat — Regeneració */
    --accent-earth: #3f5e51;  /* verd profund — Visió sistèmica */
    --ink: #191919;
    --paper: #f0eee6;
    --band: #e8e3d6;
    --dark: #16140c;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --eix-max: min(92vw, 1200px);
    --eix-gutter: clamp(20px, 4vw, 64px);
    --p: var(--accent);       /* accent de l'eix (sobreescrit per modificador) */
}
#device-wrapper .eix--regen { --p: var(--accent-gold); }
#device-wrapper .eix--coop  { --p: var(--accent); }
#device-wrapper .eix--syst  { --p: var(--accent-earth); }

/* ---- HERO -------------------------------------------------- */
#device-wrapper .eix-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--dark);
    padding: 0;
}
/* Vídeo de fons */
#device-wrapper .eix-hero__vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.55;
}
/* Capa del gràfic (canvas CA / stage murmuració / globus) */
#device-wrapper .eix-hero__gfx {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
#device-wrapper .eix-hero__gfx canvas,
#device-wrapper .eix-hero__gfx .eix-earth {
    width: 100%;
    height: 100%;
    display: block;
}
/* Stage de la murmuració (nodes "+N" posicionats en %) */
/* Stage quadrat tan ample com el hero, centrat verticalment: coincideix amb el
   retall d'object-fit:cover del vídeo (apaïsat) perquè els nombres s'alineïn. */
#device-wrapper .eix-mn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}
#device-wrapper .eix-mn-node {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    color: var(--accent);
    white-space: nowrap;
    transition: opacity 0.4s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
#device-wrapper .eix-mn-node[data-bin="low"]  { color: color-mix(in srgb, var(--accent) 72%, #fff); font-size: 10px; font-weight: 500; }
#device-wrapper .eix-mn-node[data-bin="mid"]  { color: color-mix(in srgb, var(--accent) 92%, #fff); font-size: 12px; font-weight: 650; }
#device-wrapper .eix-mn-node[data-bin="high"] { color: #ffd9a0; font-size: 14px; font-weight: 750; }

/* Cooperació: el vídeo es veu MÉS (menys enfosquit). Les xifres SENSE ombra; la
   llegibilitat es garanteix amb un degradat vertical (transparent a dalt → fosc a
   baix) sobre tot el hero. */
#device-wrapper .eix--coop .eix-hero__vid { opacity: 1; }
#device-wrapper .eix--coop .eix-mn-node { text-shadow: none; }
/* Vídeo nítid a tot el hero; només s'enfosqueix la franja inferior on seu el
   títol/entradeta perquè es llegeixin. */
#device-wrapper .eix--coop .eix-hero::after {
    background: linear-gradient(180deg, rgba(22, 20, 12, 0) 0%, rgba(22, 20, 12, 0) 60%, rgba(22, 20, 12, 0.65) 75%, rgba(22, 20, 12, 0.90) 100%);
}

/* Vel fosc inferior per llegibilitat del títol */
#device-wrapper .eix-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(22,20,12,0.10) 30%, rgba(22,20,12,0.55) 72%, rgba(22,20,12,0.86) 100%);
}
#device-wrapper .eix-hero__intro {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: var(--eix-max);
    margin: 0 auto;
    padding: var(--eix-gutter);
    padding-bottom: clamp(40px, 6vh, 90px);
}
#device-wrapper .eix-eyebrow {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--p);
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#device-wrapper .eix-eyebrow::before {
    content: "";
    width: 34px; height: 1px;
    background: var(--p);
}
#device-wrapper .eix-hero__intro h1 {
    font-family: var(--h1-font-family, Georgia, serif);
    font-weight: 500;
    font-size: clamp(40px, 6.4vw, 88px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    color: var(--paper);
    max-width: 16ch;
}
#device-wrapper .eix-hero__lede {
    font-size: clamp(17px, 1.6vw, 23px);
    line-height: 1.55;
    color: rgba(240, 238, 230, 0.82);
    margin: 0;
    max-width: 56ch;
}

/* ---- CONCEPTE (fons clar) ---------------------------------- */
#device-wrapper .eix-concept {
    background: var(--paper);
    padding: clamp(56px, 9vh, 130px) 0;
}
#device-wrapper .eix-wrap {
    max-width: var(--eix-max);
    margin: 0 auto;
    padding: 0 var(--eix-gutter);
}
#device-wrapper .eix-concept__lead {
    font-family: var(--h1-font-family, Georgia, serif);
    font-weight: 500;
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.24;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 var(--eix-gutter);
    max-width: 26ch;
}
#device-wrapper .eix-prose {
    max-width: 66ch;
}
#device-wrapper .eix-prose p {
    font-size: clamp(16px, 1.15vw, 18.5px);
    line-height: 1.72;
    color: rgba(25, 25, 25, 0.86);
    margin: 0 0 1.4em;
}
#device-wrapper .eix-prose p:last-child { margin-bottom: 0; }
#device-wrapper .eix-prose strong { color: var(--ink); font-weight: 650; }

/* ---- APLICACIÓ (fons banda) -------------------------------- */
#device-wrapper .eix-apply {
    background: var(--band);
    padding: clamp(56px, 9vh, 130px) 0;
    border-top: 2px solid var(--p);
}
#device-wrapper .eix-apply__head {
    max-width: 60ch;
    margin: 0 0 clamp(36px, 5vh, 64px);
}
#device-wrapper .eix-apply__kicker {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--p);
    margin: 0 0 14px;
}
#device-wrapper .eix-apply h2 {
    font-family: var(--h1-font-family, Georgia, serif);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 18px;
}
#device-wrapper .eix-apply__intro {
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.6;
    color: rgba(25, 25, 25, 0.82);
    margin: 0;
}
#device-wrapper .eix-apply__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px;
    background: var(--hairline, rgba(25,25,25,0.14));
    border: 1px solid rgba(25,25,25,0.14);
}
#device-wrapper .eix-proj {
    background: var(--paper);
    padding: clamp(24px, 2.4vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#device-wrapper .eix-proj__name {
    font-family: var(--h1-font-family, Georgia, serif);
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}
#device-wrapper .eix-proj__desc {
    font-size: 15px;
    line-height: 1.62;
    color: rgba(25, 25, 25, 0.82);
    margin: 0;
    flex: 1;
}
#device-wrapper .eix-proj__link {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p);
    text-decoration: none;
    margin-top: 6px;
}
#device-wrapper .eix-proj__link:hover { text-decoration: underline; }

/* ---- Tornar ------------------------------------------------ */
#device-wrapper .eix-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(36px, 5vh, 60px);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--ink);
    padding: 12px 22px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
#device-wrapper .eix-back:hover { background: var(--ink); color: var(--band); }

/* ---- Responsive (container device, MAI @media) ------------- */
@container device (max-width: 760px) {
    #device-wrapper .eix-hero { min-height: 76vh; }
    #device-wrapper .eix-hero__intro h1 { max-width: 100%; }
    #device-wrapper .eix-apply__grid { grid-template-columns: 1fr; }
}
/* ============================================================
   Home4 — redisseny complet, 2a passada (07/09/2026). Escopat a .page-home4.

   MATEIXES tipografies i MATEIXA paleta que home3: Georgia al display
   (--h1-font-family), Inter al text (--font-primary), monoespaiada a les
   etiquetes; tinta #191919, paper #f0eee6, banda de sorra #e8e3d6 i terracota
   #c75b39 com a unic accent.

   Decisions d'aquesta passada:
   - FORA el rail lateral i el seu filet. Cada seccio s'obre amb una capcalera
     d'amplada sencera (filet + etiqueta + numero): mes forta i recupera 190px.
   - La pagina te MATERIAL GRAFIC PROPI. Les imatges es passen a monocrom amb
     `grayscale(1)` i `mix-blend-mode: multiply` sobre el paper, o sigui que
     entren a la paleta en comptes de trencar-la.
   - Mes contrast d'escala: display fins a 104px, etiquetes a 10-11px.
   - CAP text no s'esvaeix en hover. S'ha tret l'atenuacio de les files
     germanes i el subratllat APAREIX en hover (abans desapareixia).

   ⚠️ Dos paranys d'aquest client:
   1. El fons NO es pot posar a `main`: el `custom.css` es carrega DESPRES de
      style.min.css i hi te `#device-wrapper #page, #device-wrapper main {
      background-color: var(--page-bg-color) !important }` (es l'opcio "fons de
      pagina" de l'editor). Es pinta cada seccio.
   2. `05-pages.css` es concatena DESPRES dels moduls 04*: amb la mateixa
      especificitat guanya el 05.
   ============================================================ */

#device-wrapper .page-home4 {
    --ink: #191919;
    --paper: #f0eee6;
    --band: #e8e3d6;
    --accent: #c75b39;
    --hair: rgba(25, 25, 25, 0.18);
    --hair-soft: rgba(25, 25, 25, 0.10);
    --muted: rgba(25, 25, 25, 0.62);

    --serif: var(--h1-font-family);
    --sans: var(--font-primary);
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* MATEIXA CAIXA que el .header-inner, perque el text s'alinei exactament
       amb el logotip i el menu. El header es construeix en dos trams:
         <header>       padding-inline: var(--page-side-padding)   (20px, 10 en mobil)
         .header-inner  max-width: 1750px; padding-inline: --spacing-md (24px, 8 en mobil)
       Les seccions d'aquesta pagina NO reben el --page-side-padding, o sigui
       que el gut se'l ha de sumar ell. Es fa amb les mateixes variables i no
       amb numeros, perque si l'editor canvia el padding lateral ho segueixi. */
    /* 0: ara l'unic marge lateral es el marc de 50px del #device-wrapper, i
       capcalera i contingut hi queden tots dos alineats. */
    --gut: 0px;
    /* Sense cap: el .header-inner ara es max-width 100%, o sigui que la pagina
       tambe ha d'omplir. (Abans era 1702px = 1750 - 2 x 24.) */
    --max: 100%;

    --t-display: clamp(33px, 6.4vw, 74px);
    --t-h2: clamp(28px, 3.9vw, 60px);
    --t-h3: clamp(20px, 2vw, 30px);
    --t-lede: clamp(16.5px, 1.3vw, 21px);
    --t-body: clamp(15px, 1.02vw, 17px);
    --t-label: clamp(10px, 0.72vw, 11.5px);

    --sp: clamp(64px, 8vw, 148px);
    --panel-w: 830px;   /* amplada del panell del titular i de la caixa de sota */

    color: var(--ink);
    font-family: var(--sans);
}

/* Marc de 50px a tota la pagina. ⚠️ border-box obligatori: el #device-wrapper
   es content-box i, amb padding, sobresortiria de la finestra. El .header-inner
   perd el seu max-width de 1750px per acompanyar l'amplada sencera.
   Nomes a home4: aquests dos selectors son globals i mourien tot el web. */
body.home4 #device-wrapper {
    --frame: 50px;     /* marc lateral */
    --frame-y: 20px;   /* marc superior i inferior */
    --logo-max-height: 51px;
    width: 100%;
    box-sizing: border-box;
    padding: var(--frame-y) var(--frame);
}
body.home4 #device-wrapper .header-inner { max-width: 100%; }
/* Fora els encoixinats laterals de la capcalera: el marc de 50px del wrapper ja
   fa d'unic marge, i aixi el logotip i el menu queden a la mateixa linia que el
   contingut. Es NEUTRALITZEN aqui en comptes d'esborrar-los de 02-header.css i
   del custom.css: aquells dos son globals i deixarien la capcalera enganxada a
   la vora a la resta de pagines d'opengea, que no tenen aquest marc. */
body.home4 #device-wrapper header,
body.home4 #device-wrapper .header-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.home4 #device-wrapper header.site-header {
    background: none;
    border-bottom: 0;
    padding-top: 5px;
}

/* Fons per SECCIO (vegeu el parany 1 de dalt) */
#device-wrapper .page-home4 .h4-hero,
#device-wrapper .page-home4 .h4-principis,
#device-wrapper .page-home4 .h4-cta { background: var(--paper); }
#device-wrapper .page-home4 .h4-stack,
#device-wrapper .page-home4 .h4-quote { background: var(--band); }
#device-wrapper .page-home4 .h4-purpose { background: var(--ink); }

/* --- Amplada de treball ------------------------------------------------- */
#device-wrapper .page-home4 .h4-w {
    width: min(100% - 2 * var(--gut), var(--max));
    margin-inline: auto;
}
#device-wrapper .page-home4 .h4-sec { padding: var(--sp) 0; }
/* Aqui el .header-inner baixa a --spacing-xs i el --page-side-padding es
   parteix per la meitat; la pagina segueix les dues coses. */
@media (max-width: 768px) {
    #device-wrapper .page-home4 { --gut: 0px; }
}

/* --- Capcalera de seccio: filet + etiqueta + numero --------------------- */
#device-wrapper .page-home4 .h4-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    border-top: 1px solid var(--hair);
    padding-top: 12px;
    margin-bottom: clamp(30px, 4vw, 68px);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
#device-wrapper .page-home4 .h4-head__l { color: var(--muted); }
#device-wrapper .page-home4 .h4-head__n { color: var(--accent); }

/* --- Peces compartides -------------------------------------------------- */
#device-wrapper .page-home4 .h4-h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: inherit;
    margin: 0 0 clamp(16px, 1.6vw, 26px);
    max-width: 16ch;
    text-wrap: balance;
}
#device-wrapper .page-home4 .h4-lede {
    font-size: var(--t-lede);
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 52ch;
}
#device-wrapper .page-home4 .h4-kicker {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 clamp(18px, 2vw, 30px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
#device-wrapper .page-home4 .h4-kicker::before {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
}
/* El subratllat APAREIX en hover. A la passada anterior anava al reves i
   semblava que el text es desfes. */
#device-wrapper .page-home4 .h4-more {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink) !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 4px;
    transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#device-wrapper .page-home4 .h4-more:hover,
#device-wrapper .page-home4 .h4-more:focus-visible { background-size: 100% 1px; }

/* Totes les imatges entren a la paleta: monocromes i foses amb el paper. */
#device-wrapper .page-home4 .h4-plate img,
#device-wrapper .page-home4 .h4-pillar__fig img,
#device-wrapper .page-home4 .h4-layer__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.04);
    mix-blend-mode: multiply;
}

/* ============================================================
   CAPCAL
   ============================================================ */
/* El capcal es UNA PANTALLA: el model hi va al darrere, centrat, i el text
   a sobre (titular a dalt, frase i index a baix). Aixi el centre del model
   coincideix amb el centre de la pantalla. */
#device-wrapper .page-home4 .h4-hero {
    position: relative;
    /* ⚠️ clip, NO hidden. Amb `overflow: hidden` el capcal es un contenidor de
       scroll (te contingut que en surt) i es QUEDA la roda del ratoli: la
       pagina no baixava des d'enlloc del capcal, ni tan sols sobre el text.
       `overflow: clip` retalla igual pero no crea contenidor de scroll. */
    overflow: hidden;
    overflow: clip;
    /* Surt del marc: es l'excepcio dels 50px. I l'alcada els descompta, perque
       l'index segueixi tocant el final de l'espai visible. */
    /* El FONS surt del marc, pero el text no: el padding compensa el margin i
       aixi el titular i l'index segueixen alineats amb el logotip i amb la
       resta de seccions. El model, que es absolut sobre el hero, bleeda igual. */
    margin-inline: calc(var(--frame, 0px) * -1);
    min-height: calc(100vh - var(--header-height, 80px) - var(--frame-y, 0px));
    min-height: calc(100svh - var(--header-height, 80px) - var(--frame-y, 0px));
    /* Sense encoixinat a baix: l'index ha d'arribar fins al final de l'espai
       visible. L'aire ja el donen els 16px de cada enllac. */
    /* ⚠️ el shorthand ha de portar el marc lateral: si es deixa a 0, anul.la el
       padding-inline de mes amunt (va despres a la mateixa regla) i el text del
       hero es desalinea 50px de la resta de la pagina. */
    /* Sense encoixinat lateral: el capcal va de vora a vora. */
    padding: clamp(24px, 3.2vw, 56px) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(28px, 4vw, 64px);
}
#device-wrapper .page-home4 .h4-hero__foot { position: relative; z-index: 1; }

/* Panell del titular. box-sizing: border-box perque els 30px de padding quedin
   DINS dels 830x410 i no els facin creixer. */
#device-wrapper .page-home4 .h4-hero__top {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    background-color: #e36b47;
    height: 410px;
    max-width: var(--panel-w);
    padding: 30px;
    transition: height .32s ease, max-width .32s ease, padding .32s ease;
}
/* L'eyebrow es terracota i damunt del panell no es veuria: passa a clar. */
#device-wrapper .page-home4 .h4-hero__top .h4-kicker { color: var(--paper); }

/* --- Panell encongit -------------------------------------------------
   El titular no marxa: el bloc i la lletra es fan la meitat de grans i el
   model del fons queda gairebe tot a la vista. La mida nomes viu aqui; el
   JS es limita a posar i treure la classe. */
#device-wrapper .page-home4 .h4-hero__top.is-min {
    height: 223px;
    max-width: calc(var(--panel-w) / 2);
    padding: 15px;
}
#device-wrapper .page-home4 .h4-hero__top.is-min .h4-hero__title {
    font-size: calc(var(--t-display) / 2);
}
/* L'eyebrow ja es una lletra petita: partit per dos no es llegiria. Es
   redueix el que es pot i s'escurça el filet, que si que va a la meitat. */
#device-wrapper .page-home4 .h4-hero__top.is-min .h4-kicker {
    font-size: calc(var(--t-label) * 0.86);
    letter-spacing: 0.18em;
    gap: 6px;
    margin-bottom: clamp(9px, 1vw, 15px);
}
#device-wrapper .page-home4 .h4-hero__top.is-min .h4-kicker::before { width: 15px; }

/* El boto: un menys que, en encongir, gira i es torna un mes. */
#device-wrapper .page-home4 .h4-hero__min {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    background: none;
    border: 1px solid rgba(240, 238, 230, 0.45);
    border-radius: 50%;
    color: var(--paper);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                top .32s ease, right .32s ease, width .32s ease, height .32s ease;
}
#device-wrapper .page-home4 .h4-hero__min:hover {
    background-color: rgba(240, 238, 230, 0.16);
    border-color: var(--paper);
}
#device-wrapper .page-home4 .h4-hero__min span {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
}
#device-wrapper .page-home4 .h4-hero__min span::before,
#device-wrapper .page-home4 .h4-hero__min span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1.5px;
    margin-top: -0.75px;
    background: currentColor;
    transition: transform .22s ease;
}
#device-wrapper .page-home4 .h4-hero__top.is-min .h4-hero__min { top: 8px; right: 8px; }
#device-wrapper .page-home4 .h4-hero__top.is-min .h4-hero__min span::after { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    #device-wrapper .page-home4 .h4-hero__top,
    #device-wrapper .page-home4 .h4-hero__min,
    #device-wrapper .page-home4 .h4-hero__min span::before,
    #device-wrapper .page-home4 .h4-hero__min span::after { transition: none; }
}

#device-wrapper .page-home4 .h4-hero__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-display);
    line-height: 1.22;
    letter-spacing: -0.035em;
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}
/* Sense banda de tinta: el titular va en clar damunt del panell taronja. */
#device-wrapper .page-home4 .h4-hero__title span {
    display: inline;
    background: none;
    color: var(--paper);
    padding: 0;
}
#device-wrapper .page-home4 .h4-hero__lede {
    font-size: var(--t-lede);
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 52ch;
}
/* El Meta-Globalium, en viu: l'embed del Metamodeler d'Arkadium.
   Es la peca amb mes forca de la pagina i per aixo va CENTRADA A LA PAGINA
   (fora de .h4-w) i gran, no arraconada en una columna.

   L'eina te el fons NEGRE: multiplicar-la directament donaria un rectangle
   negre, o sigui que primer es passa a gris i S'INVERTEIX (el negre es torna
   blanc i el traç, fosc) i despres es multiplica: el blanc desapareix contra
   el paper i nomes hi queda el dibuix, en tinta.

   ⚠️ El canvas de l'embed NO te en compte la densitat de pantalla: dibuixa
   tants pixels com CSS px te la caixa, o sigui que en una pantalla 2x tot
   s'estira al doble i el text surt borros. Es compensa dibuixant-lo al DOBLE
   i reduint-lo a la meitat amb scale(.5). Si es canvia aquest 0.5, cal
   recalcular --plate-w/--plate-h, que son la mida VISUAL. */
/* La plata surt del flux i cobreix el capcal sencer: el seu centre es, per
   tant, el centre de la seccio, que fa una pantalla. */
/* ⚠️ SENSE z-index. Un `z-index: 0` aqui crea un context d'apilament, que
   AILLA el grup de barreja: el `mix-blend-mode: multiply` de l'iframe deixava
   de veure el crema de la seccio i el fons invertit sortia BLANC. Amb
   z-index:auto la barreja arriba al fons del capcal i el blanc desapareix. */
#device-wrapper .page-home4 .h4-plate {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}
/* ⚠️ LA RODA DEL RATOLI NO ES POT ALLIBERAR DES D'AQUI. L'embed es d'un
   altre origen i es queda els esdeveniments de roda (fa preventDefault); Chrome
   els hi encamina pel compositor i s'ho salta tant el `pointer-events: none`
   de l'iframe com qualsevol capa que li posis al damunt — provat amb
   pseudoelement i amb element real, transparent i amb fons pintat: 0 de 6.
   L'unica solucio de debo es un parametre a l'embed d'Arkadium que no capturi
   la roda (`zoom=0` NO ho fa). Mentrestant, la pagina nomes baixa amb la roda
   fora del capcal, o amb teclat/barra de scroll. */

#device-wrapper .page-home4 .h4-plate__frame {
    position: absolute;
    inset: 0;
}
#device-wrapper .page-home4 .h4-plate__frame iframe {
    /* Mides VISUALS (el canvas es el doble; vegeu la nota de la densitat).
       ⚠️ L'embed ajusta el dibuix a la dimensio PETITA de la caixa: fer-la mes
       ampla nomes hi afegia marge buit. Per fer el model mes gran cal pujar
       l'ALCADA, i l'amplada nomes ha de donar per als rotols laterals (~1.35x,
       mesurat provant l'embed a 800x800, 1400x800, 800x1200 i 1200x1200). */
    /* Un 25% mes alt que el marc, perque el model surti per dalt i per baix i
       es retalli la corona de rotols mes dispersa: aixi omple la pantalla en
       comptes de quedar-hi centrat amb aire. */
    /* Ha de COBRIR el capcal sencer. Com que l'embed ajusta el dibuix a la
       dimensio PETITA de la caixa, per cobrir cal que aquesta dimensio petita
       ja sigui mes gran que el costat MAJOR del capcal: d'aqui la caixa
       quadrada de max(amplada, alcada) * 1.08. El tope de 2200px evita que a
       pantalles molt grans el canvas es dispari. */
    --plate-side: min(2200px, calc(max(100vw, max(380px, calc(100svh - var(--header-height, 80px)))) * 1.08));
    --plate-h: var(--plate-side);
    /* Tota l'amplada del capcal, pero amb topall: a partir de 2560px el model
       ja no creix mes i es queda centrat. Per sobre d'aquesta mida el dibuix
       nomes guanyava aire als costats i la composicio es desequilibrava. */
    --plate-w: min(100%, 2560px);
    position: absolute;
    top: 50%;
    left: 50%;
    /* Supermostreig: el canvas es dibuixa 1.6 vegades mes gran i es redueix
       amb el scale de sota. Els dos numeros van lligats (1.6 <-> 0.625): si
       en canvies un, canvia l'altre. Era 2x, pero amb el model cobrint la
       pantalla el canvas se n'anava a mes de 16 milions de pixels. */
    width: calc(var(--plate-w) * 1.6);
    height: calc(var(--plate-h) * 1.6);
    /* L'ordre importa: el translate va PRIMER (es el mes exterior) i per tant
       els seus percentatges no queden escalats pel scale que ve despres.
       Amb inset+margin:auto no centra: una caixa mes gran que el contenidor
       no reparteix marges negatius, s'ancora a l'esquerra. */
    transform: translate(-50%, -50%) scale(0.625);   /* = 1 / 1.6 */
    transform-origin: center;
    max-width: none;
    border: 0;
    display: block;
    opacity: 1;
    /* Sense filtre ni barreja: amb skin=opengea l'embed ja ve amb la paleta i
       el fons del web, o sigui que es pinta tal com ve.

       ⚠️ El retall de 18px a la dreta NO es decoratiu: l'embed te un panell de
       configuracio amagat fora de camp (ASIDE.settings-panel.is-embedded) amb
       `box-shadow: rgba(0,0,0,.5) -4px 0 20px`, i l'ombra entrava per la vora
       dreta. Mesurat: degradat de x-17 fins a la vora. Es d'un altre origen i
       no s'hi pot arribar amb CSS; l'arreglada de debo es treure aquella ombra
       a l'embed quan va incrustat. */
    /* ⚠️ El clip-path s'aplica en el sistema de coordenades PROPI de l'element,
       o sigui ABANS del scale(0.625): 40px aqui son 25px de veritat a la
       pantalla, prou per cobrir els ~17px d'ombra. Amb 18px nomes en tapava 11
       i l'ombra encara es veia, sobretot a pantalles amples, on la vora dreta
       de l'iframe cau DINS de la pagina i no a la vora de la finestra. */
    clip-path: inset(0 40px 0 0);

    /* Rotacio a demanda: per defecte l'iframe NO rep el punter, i aixi la roda
       del ratoli fa scroll de la pagina. En clicar-hi s'activa i es pot girar. */
    pointer-events: none;
}
#device-wrapper .page-home4 .h4-plate.is-live .h4-plate__frame iframe { pointer-events: auto; }
/* La porta: capa transparent que recull NOMES el clic (la roda ja no li arriba
   perque l'iframe la te desactivada). En clicar-hi cedeix el pas a l'iframe. */
#device-wrapper .page-home4 .h4-plate__gate {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    cursor: grab;
}
#device-wrapper .page-home4 .h4-plate.is-live .h4-plate__gate { pointer-events: none; }

/* Peu de la plata + frase, en una fila sota el model */
/* El peu va tot a l'ESQUERRA: a la dreta hi cau el rotol "ARKADIUM" que
   imprimeix el mateix embed i les dues coses se superposaven. */
#device-wrapper .page-home4 .h4-hero__foot {
    margin-top: clamp(22px, 2.6vw, 40px);
    max-width: 52ch;
}
#device-wrapper .page-home4 .h4-plate__cap {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 14px 0 0;
}

/* Index: acces directe a les seccions, no decoracio */
/* Fons de paper: l'index queda damunt del model i sense ell els enllacos es
   llegien sobre la zona densa del diagrama. */

/* ============================================================
   01 — PRINCIPIS
   ============================================================ */
/* Intro dels principis: el titol i, A SOTA, la frase que abans obria el capcal. */
#device-wrapper .page-home4 .h4-principis__intro .h4-lede {
    margin-top: clamp(14px, 1.6vw, 24px);
    max-width: 62ch;
}
#device-wrapper .page-home4 .h4-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.6vw, 52px);
    row-gap: clamp(44px, 5vw, 72px);
    margin-top: clamp(30px, 3.4vw, 56px);
}
#device-wrapper .page-home4 .h4-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
#device-wrapper .page-home4 .h4-pillar__fig {
    position: relative;
    margin: 0 0 6px;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--band);
}
/* La foto, banyada de taronja: una capa plena de #e36b47 en `multiply` damunt
   de la imatge, que ja arriba en gris. Multiplicar un color per un gris el
   deixa sempre dins d'aquell to, o sigui que la fotografia queda monocroma
   en el taronja de la casa i conserva tots els seus valors. */
#device-wrapper .page-home4 .h4-pillar__fig::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: #e36b47;
    mix-blend-mode: multiply;
}
/* I al damunt, la trama de punts: un sol `radial-gradient` repetit, un punt per
   cel·la, sense cap imatge ni cap node de mes. El segon radi (una mica mes gran
   que el primer) nomes serveix per suavitzar la vora del punt. Com que va per
   sobre del bany, els punts es veuen alla on la foto es mes fosca. */
#device-wrapper .page-home4 .h4-pillar__fig::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(#e36b47 0.5px, transparent 0.6px);
    background-size: 5px 5px;
    background-position: 0 0;
}
#device-wrapper .page-home4 .h4-pillar__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hair);
}
/* Icones ESTATIQUES a posta: cap animacio. */
#device-wrapper .page-home4 .h4-pillar__icon {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--ink);
}
#device-wrapper .page-home4 .h4-pillar__icon svg { width: 100%; height: 100%; }
#device-wrapper .page-home4 .h4-pillar__tag {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.45;
}
#device-wrapper .page-home4 .h4-pillar__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h3);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0;
}
#device-wrapper .page-home4 .h4-pillar__desc {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    max-width: 40ch;
}

/* ============================================================
   02 — LES QUATRE CAPES
   ============================================================ */
/* La seccio surt del marc de 50px del #device-wrapper i va de punta a punta:
   les tires de captura han de tocar les dues vores de la pantalla. El padding
   lateral torna nomes alla on hi ha TEXT (capcalera, entradeta i la fitxa de
   cada capa), perque segueixi a la mateixa linia que la resta de la pagina.
   Es fa amb el shorthand sencer perque la regla .h4-sec (mateixa
   especificitat) no l'anul.li. */
#device-wrapper .page-home4 .h4-stack {
    margin-inline: calc(var(--frame, 0px) * -1);
    padding: var(--sp) 0;
}
#device-wrapper .page-home4 .h4-stack__intro {
    padding-inline: var(--frame, 0px);
}
/* ⚠️ `.h4-head` es un <header>, i mes amunt hi ha
   `body.home4 #device-wrapper header { padding-left/right: 0 !important }` per
   treure el padding que custom.css posa a TOTS els <header>. Sense !important
   aqui, aquella regla guanya i l'etiqueta de la seccio queda enganxada a la
   vora. Amb quatre classes, aquest selector passa per davant. */
#device-wrapper .page-home4 .h4-stack .h4-head {
    padding-left: var(--frame, 0px) !important;
    padding-right: var(--frame, 0px) !important;
}
#device-wrapper .page-home4 .h4-stack__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 80px);
    row-gap: 18px;
    align-items: end;
    margin-bottom: clamp(36px, 4.5vw, 72px);
}
#device-wrapper .page-home4 .h4-stack__intro .h4-h2 { margin-bottom: 0; }
/* Cada capa es UNA PECA: la fitxa a dalt sobre paper i la tira de la captura
   a sota, enganxada. Com que la seccio va sobre la banda de sorra, el canvi
   de to es el que les lliga: imatge i text comparteixen la mateixa superficie
   i es llegeixen com un sol bloc, no com dues coses separades. */
#device-wrapper .page-home4 .h4-layers {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 3vw, 52px);
    /* Les peces no toquen la vora: entren fins a la linia del marc, com el
       text de la seccio. La BANDA de sota si que segueix anant de punta a
       punta —el que va sense padding es la seccio, no les peces. */
    margin-inline: var(--frame, 0px);
}
#device-wrapper .page-home4 .h4-layer {
    display: block;
    /* La tira ja no toca la vora de baix: el mateix valor que te de marge
       lateral, perque la peca tanqui igual per tots tres costats. */
    padding-bottom: clamp(20px, 2.2vw, 34px);
    background: var(--paper);
    color: var(--ink) !important;
    text-decoration: none !important;
}

#device-wrapper .page-home4 .h4-layer__shot {
    /* Lateral: el mateix que el padding de .h4-layer__body, perque la tira
       quedi alineada amb el text que te a sobre. ⚠️ width: auto, no 100%:
       amb el 100% els marges se sumarien a l'amplada i la tira sortiria de
       la peca. */
    margin: 0 clamp(20px, 2.2vw, 34px);
    width: auto;
    aspect-ratio: 1600 / 340;
    overflow: hidden;
    background: var(--paper);
}
#device-wrapper .page-home4 .h4-layer__shot img {
    object-position: 50% 40%;
    transition: filter 0.3s ease;
}
/* Sense zoom en hover: la imatge no es mou, nomes puja una mica el contrast. */
#device-wrapper .page-home4 .h4-layer:hover .h4-layer__shot img {
    filter: grayscale(1) contrast(1.16);
}

/* Sota la tira, un registre alineat a l'esquerra (el text centrat no acabava
   de funcionar): fila de dades d'amplada sencera + marca i descripcio en dues
   columnes, com la resta de la pagina. */
#device-wrapper .page-home4 .h4-layer__body {
    /* Sense marge: la imatge arrenca a la vora mateixa de la fitxa. */
    margin-top: 0;
    /* Padding propi de la peca: ara que la peca ja entra pel marc, sumar-hi
       un altre cop --frame allunyaria el text massa de la seva vora. */
    padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 34px) clamp(24px, 2.6vw, 38px);
}
#device-wrapper .page-home4 .h4-layer__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding-bottom: clamp(12px, 1.2vw, 18px);
    border-bottom: 1px solid var(--hair);
}
#device-wrapper .page-home4 .h4-layer__cols {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(28px, 4vw, 80px);
    row-gap: 14px;
    align-items: start;
    margin-top: clamp(18px, 2vw, 30px);
}
@media (max-width: 900px) {
    #device-wrapper .page-home4 .h4-layer__cols { grid-template-columns: minmax(0, 1fr); }
}
#device-wrapper .page-home4 .h4-layer__scale,
#device-wrapper .page-home4 .h4-layer__url {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
#device-wrapper .page-home4 .h4-layer__url span { margin-left: 5px; }
#device-wrapper .page-home4 .h4-layer__desc {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    max-width: 56ch;
}
#device-wrapper .page-home4 .h4-layer:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

/* Les quatre PARAULES s'han de veure igual de grans, i per aixo les caixes NO
   son iguals: a l'SVG de Kosmos les lletres ocupen ~47% de l'alcada del fitxer
   i a intergrid ~89% (i a mes es tot minuscula). Mides mesurades en pixels. */
#device-wrapper .page-home4 .h4-layer__name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
}
#device-wrapper .page-home4 .h4-layer__name--mark,
#device-wrapper .page-home4 .h4-layer__name--logo { display: inline-flex; align-items: center; }
#device-wrapper .page-home4 .h4-layer__name--mark { gap: 0.4em; }
#device-wrapper .page-home4 .h4-layer__mark {
    width: 0.8em;
    height: 0.8em;
    flex: none;
    display: inline-flex;
    color: var(--ink);
}
#device-wrapper .page-home4 .h4-layer__mark img,
#device-wrapper .page-home4 .h4-layer__mark svg { width: 100%; height: 100%; object-fit: contain; }
#device-wrapper .page-home4 .h4-layer__name--logo img { width: auto; display: block; }
/* Les quatre marques, igual de grans. No es pot igualar l'alcada de la CAIXA:
   dos noms son text (Arkadium, Intrabase) i dos son logotips amb el nom a
   dins, i cada fitxer deixa una vora diferent al voltant de la paraula. El que
   s'iguala es l'alcada de la LLETRA, mesurada als fitxers:
     - KOSMOS va en versaletes: la seva alcada de majuscula es 0,4625 de
       l'alcada del logotip → per igualar la majuscula del text (0,732 del
       cos), l'imatge ha de fer 1,583 cossos.
     - intergrid va en minuscules: la x-height es 0,4425 de l'alcada → per
       igualar la x-height del text (0,532 del cos), 1,202 cossos.
   El cos de referencia es el de .h4-layer__name: clamp(20px, 2.2vw, 34px). */
#device-wrapper .page-home4 .h4-layer__name--logo.is-kosmos img { height: clamp(32px, 3.48vw, 54px); }
#device-wrapper .page-home4 .h4-layer__name--logo.is-intergrid img { height: clamp(24px, 2.64vw, 41px); }

/* ============================================================
   03 — PROPOSIT (plana invertida)
   ============================================================ */
/* Surt del marc de 50px perque la banda fosca faci el 100% de la pantalla.
   El padding torna a entrar el TEXT fins a la linia dels 50px, on hi ha el
   logotip i la resta de la pagina. Es fa amb el shorthand sencer perque la
   regla .h4-sec (mateixa especificitat) no l'anul.li. */
#device-wrapper .page-home4 .h4-purpose {
    margin-inline: calc(var(--frame, 0px) * -1);
    padding: var(--sp) var(--frame, 0px);
    color: var(--paper);
    --hair: rgba(240, 238, 230, 0.24);
    --muted: rgba(240, 238, 230, 0.72);
}
#device-wrapper .page-home4 .h4-purpose .h4-head__n { color: var(--paper); }
#device-wrapper .page-home4 .h4-statement {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 56px);
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--paper);
    margin: 0 0 clamp(44px, 5.5vw, 96px);
    max-width: 22ch;
    text-wrap: balance;
}
#device-wrapper .page-home4 .h4-sov {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    column-gap: clamp(28px, 4vw, 88px);
    row-gap: 22px;
    padding-top: clamp(26px, 3vw, 44px);
    border-top: 1px solid var(--hair);
}
#device-wrapper .page-home4 .h4-sov__t {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h3);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--paper);
}
#device-wrapper .page-home4 .h4-sov p {
    font-size: var(--t-body);
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 16px;
    max-width: 56ch;
}
#device-wrapper .page-home4 .h4-sov p:last-child { margin-bottom: 0; }

/* ============================================================
   COLOFO
   ============================================================ */
/* Com la seccio de capes: surt del marc de 50px i la banda —i el filet
   taronja— van de punta a punta. El padding torna nomes al text. */
#device-wrapper .page-home4 .h4-quote {
    margin-inline: calc(var(--frame, 0px) * -1);
    padding: clamp(56px, 7vw, 120px) 0;
}
#device-wrapper .page-home4 .h4-quote .h4-w {
    border-top: 2px solid var(--accent);
    padding: clamp(26px, 3vw, 46px) var(--frame, 0px) 0;
}
#device-wrapper .page-home4 .h4-quote__text {
    font-family: var(--serif);
    font-size: clamp(22px, 2.9vw, 46px);
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    max-width: 24ch;
    text-wrap: balance;
}
#device-wrapper .page-home4 .h4-quote__by {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

/* ============================================================
   04 — CONTACTE
   ============================================================ */
#device-wrapper .page-home4 .h4-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 80px);
    row-gap: 26px;
    align-items: start;
}
#device-wrapper .page-home4 .h4-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(26px, 3vw, 40px);
}
#device-wrapper .page-home4 .h4-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--paper) !important;
    border: 1px solid var(--ink);
    font-size: clamp(13px, 1vw, 14.5px);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 15px 28px;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}
#device-wrapper .page-home4 .h4-btn:hover { background: transparent; color: var(--ink) !important; }
#device-wrapper .page-home4 .h4-btn--ghost { background: transparent; color: var(--ink) !important; }
#device-wrapper .page-home4 .h4-btn--ghost:hover { background: var(--ink); color: var(--paper) !important; }

/* ============================================================
   RESPONSIVE — tot per @media: els @container device no s'activen al web
   public perque el sistema no defineix container-type enlloc.
   ============================================================ */

@media (max-width: 900px) {
    #device-wrapper .page-home4 .h4-h2 { max-width: 22ch; }
}

@media (max-width: 820px) {
    #device-wrapper .page-home4 .h4-pillars { grid-template-columns: minmax(0, 1fr); }
    #device-wrapper .page-home4 .h4-pillar { max-width: 60ch; }
    #device-wrapper .page-home4 .h4-pillar__fig { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
    #device-wrapper .page-home4 .h4-layer__shot { aspect-ratio: 16 / 6; }
    #device-wrapper .page-home4 .h4-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    #device-wrapper .page-home4 * { transition: none !important; animation: none !important; }
}

/* ============================================================
   MENU DEL WEB amb l'estil que tenia l'index del capcal: serif, filets entre
   items i entrada en hover. Nomes a home4 (.header-nav es global).
   No hi poso numeros: els de l'index deien l'ordre de les seccions i aqui els
   items no son cap seqüencia.
   ============================================================ */
body.home4 #device-wrapper .header-nav {
    gap: 0;
    /* center, no stretch: aixi la caixa de contingut de cada enllac acaba just
       sota el text i el subratllat li queda enganxat. */
    align-items: center;
}
body.home4 #device-wrapper .header-nav a {
    display: flex;
    align-items: center;
    font-family: var(--h1-font-family);
    font-size: clamp(15px, 1.15vw, 19px);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #191919 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* Els items baixen fins a la linia de base del logotip: tot el joc va a
       dalt i cap a baix, perque el subratllat (background-origin: content-box)
       segueixi enganxat al text. */
    padding: 21px 22px 0px 22px;
    /* Subratllat que apareix en hover. Va per background-image amb
       background-origin: content-box, perque nomes cobreixi el TEXT i no els
       22px de padding. Cal !important: la regla de sobre porta
       `background: transparent !important` i, si no, l'anul.laria. */
    background-image: linear-gradient(#e36b47, #e36b47) !important;
    background-repeat: no-repeat !important;
    background-origin: content-box !important;
    background-position: 0 100% !important;
    background-size: 0% 2px !important;
    transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
body.home4 #device-wrapper .header-nav a:hover,
body.home4 #device-wrapper .header-nav a:focus-visible {
    background-size: 100% 2px !important;
}
body.home4 #device-wrapper .header-nav a + a {
    border-left: 1px solid rgba(25, 25, 25, 0.18) !important;
}
body.home4 #device-wrapper .header-nav a:last-child { padding-right: 0; }
/* Sense el desplacament d'abans: amb el subratllat, moure el text alhora feia
   que la ratlla llisques amb ell i quedava brut. */

/* El selector d'idioma, a la mateixa linia que els items del menu. Escopat a
   home4: .lang-toggle es global i el porten totes les altres pagines. */
body.home4 #device-wrapper .header-lang-dropdown .lang-toggle {
    padding: 23px var(--menu-padding-horizontal, 16px) 0px var(--menu-padding-vertical, 8px);
}

/* El peu, a tota l'amplada: surt del marc de 50px i el .footer-inner torna a
   entrar el contingut fins a la mateixa linia que el logotip i la pagina
   (per aixo tambe se li treu el max-width i el seu padding propi). */
body.home4 #device-wrapper footer.site-footer {
    margin-inline: calc(var(--frame, 0px) * -1);
    /* !important perque el custom.css li imposa el --page-side-padding (20px)
       amb !important, igual que a la capcalera. */
    padding-left: var(--frame, 0px) !important;
    padding-right: var(--frame, 0px) !important;
    margin-bottom: calc(var(--frame-y, 0px) * -1);
}
body.home4 #device-wrapper footer.site-footer .footer-inner {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   FITXA DEL NODE — s'omple amb el postMessage de l'embed (&fitxa=post) quan
   es clica una categoria del model. Va per sobre del model i per sota de res
   mes; el text s'hi escriu lletra a lletra.
   ============================================================ */
#device-wrapper .page-home4 .h4-node {
    position: absolute;
    z-index: 3;
    right: var(--frame, 0px);
    bottom: clamp(80px, 12vh, 150px);
    width: min(420px, calc(100% - 2 * var(--frame, 0px)));
    box-sizing: border-box;
    background: #fff;
    border-top: 2px solid var(--ink);
    padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
    /* L'ombra va cap AMUNT: la fitxa surt de baix i aixi es despega del model
       pel costat per on entra, no pel de sota. */
    box-shadow: 0 -30px 40px rgba(25, 25, 25, 0.10);
}
#device-wrapper .page-home4 .h4-node[hidden] { display: none; }
#device-wrapper .page-home4 .h4-node__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
#device-wrapper .page-home4 .h4-node__close:hover { color: var(--ink); }
#device-wrapper .page-home4 .h4-node__meta {
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
}
#device-wrapper .page-home4 .h4-node__name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 12px;
}
#device-wrapper .page-home4 .h4-node__body {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    /* pre-line: l'essencia arriba amb salts de linia i vinyetes amb «-». */
    white-space: pre-line;
    max-height: 46vh;
    overflow-y: auto;
}
@media (max-width: 700px) {
    #device-wrapper .page-home4 .h4-node {
        left: var(--frame, 0px);
        right: var(--frame, 0px);
        width: auto;
        bottom: clamp(70px, 10vh, 110px);
    }
    #device-wrapper .page-home4 .h4-node__body { max-height: 34vh; }
}

/* Cursor quadrat: acompanya el text mentre s'escriu i desapareix quan acaba.
   Va per `currentColor`, o sigui que agafa el color del text de cada lloc
   (clar damunt del panell taronja, gris a la fitxa). */
#device-wrapper .page-home4 .h4-caret {
    display: inline-block;
    width: 0.46em;
    height: 0.95em;
    margin-left: 0.08em;
    vertical-align: -0.12em;
    background: currentColor;
    animation: h4-blink 1s steps(1, end) infinite;
}
/* Al titular la lletra es molt mes gran: el bloc, proporcionalment mes estret. */
#device-wrapper .page-home4 .h4-hero__title .h4-caret {
    width: 0.3em;
    height: 0.72em;
    vertical-align: -0.04em;
}
@keyframes h4-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #device-wrapper .page-home4 .h4-caret { animation: none; }
}

/* Trio i tipus de la categoria. No venen com a camps del missatge: es pesquen
   de la fitxa en brut, o sigui que poden faltar; per aixo el bloc va amagat
   fins que hi ha alguna cosa. */
#device-wrapper .page-home4 .h4-node__data {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.1em;
}
#device-wrapper .page-home4 .h4-node__data[hidden] { display: none; }
#device-wrapper .page-home4 .h4-node__data dt {
    text-transform: uppercase;
    color: var(--muted);
}
#device-wrapper .page-home4 .h4-node__data dd {
    margin: 0;
    color: var(--ink);
}

/* El cos de la fitxa conserva el format que ve del model. */
#device-wrapper .page-home4 .h4-node__body { white-space: normal; }
#device-wrapper .page-home4 .h4-node__body p { margin: 0 0 10px; }
#device-wrapper .page-home4 .h4-node__body p:last-child { margin-bottom: 0; }
#device-wrapper .page-home4 .h4-node__body strong { color: var(--ink); font-weight: 600; }
#device-wrapper .page-home4 .h4-node__body em { font-style: italic; }
#device-wrapper .page-home4 .h4-node__body ul {
    margin: 0 0 10px;
    padding-left: 1.1em;
    list-style: none;
}
#device-wrapper .page-home4 .h4-node__body ul:last-child { margin-bottom: 0; }
#device-wrapper .page-home4 .h4-node__body li {
    position: relative;
    margin: 0 0 6px;
}
#device-wrapper .page-home4 .h4-node__body li::before {
    content: "";
    position: absolute;
    left: -1.1em;
    top: 0.62em;
    width: 5px;
    height: 1px;
    background: var(--muted);
}

/* ============================================================
   «Què és aquest model?» — caixa blanca sota el panell del titular.
   És un <details> natiu: obre i tanca amb clic i amb teclat sense JS.
   ============================================================ */
#device-wrapper .page-home4 .h4-about {
    position: relative;
    z-index: 1;
    /* Tancada, nomes ocupa el que fa la pregunta; en obrir-se, s'eixampla
       fins a l'amplada del panell del titular. */
    width: fit-content;
    max-width: var(--panel-w);
    margin-top: clamp(14px, 1.6vw, 22px);
    background: #fff;
    border: 1px solid var(--hair-soft);
    box-shadow: 0 6px 26px rgba(25, 25, 25, 0.07);
}
#device-wrapper .page-home4 .h4-about > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    user-select: none;
}
#device-wrapper .page-home4 .h4-about > summary::-webkit-details-marker { display: none; }
/* El signe: + tancat, − obert. Es dibuixa amb dues barres per no dependre de
   cap glif tipografic. */
#device-wrapper .page-home4 .h4-about > summary::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: auto;
    flex: none;
    background:
        linear-gradient(var(--ink), var(--ink)) center/11px 1px no-repeat,
        linear-gradient(var(--ink), var(--ink)) center/1px 11px no-repeat;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#device-wrapper .page-home4 .h4-about[open] { width: 100%; }
#device-wrapper .page-home4 .h4-about[open] > summary::after {
    background: linear-gradient(var(--ink), var(--ink)) center/11px 1px no-repeat;
    transform: rotate(180deg);
}
#device-wrapper .page-home4 .h4-about > summary:hover { color: var(--accent); }
#device-wrapper .page-home4 .h4-about > summary:focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: -3px;
}
#device-wrapper .page-home4 .h4-about__body {
    padding: 0 18px 16px;
    width: 100%;
    box-sizing: border-box;
}
#device-wrapper .page-home4 .h4-about__body p {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 10px;
}
#device-wrapper .page-home4 .h4-about__body p:last-child { margin-bottom: 0; }
#device-wrapper .page-home4 .h4-about__body strong { color: var(--ink); font-weight: 600; }
/* Internal pages styles - Opengea */

/* ========================================
   SHARED PAGE HERO
   ======================================== */

#device-wrapper .page-hero {
    padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
    text-align: center;
}

#device-wrapper .page-hero h1 {
    max-width: 700px;
    margin: 0 auto var(--spacing-md) auto;
}

#device-wrapper .page-hero p.large {
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   QUI-SOM PAGE (Anthropic /company style)
   ======================================== */

/* All h2 in qui-som */
#device-wrapper .page-qui-som h2 {
    font-weight: 900;
}

/* Paragraphs in qui-som use h1 font family (except hero sub) */
#device-wrapper .page-qui-som p:not(.about-hero-sub) {
    font-family: var(--h1-font-family);
}

/* All text in qui-som uses --color-text */
#device-wrapper .page-qui-som h1,
#device-wrapper .page-qui-som h2,
#device-wrapper .page-qui-som h3,
#device-wrapper .page-qui-som p:not(.about-hero-sub) {
    color: var(--color-text);
}

/* Hero - large statement */
#device-wrapper .about-hero {
    padding: var(--spacing-3xl) 0 var(--spacing-2xl) 0;
}

#device-wrapper .about-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .about-hero h1 {
    margin-bottom: var(--spacing-lg);
}

#device-wrapper .about-hero-sub {
    font-size: 22px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 720px;
}

/* Purpose - Anthropic two-column layout (4col title + 8col content) */
#device-wrapper .about-purpose {
    padding: 0 0 var(--spacing-2xl) 0;
}

#device-wrapper .about-purpose-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .about-purpose-divider {
    width: 100%;
    height: 1px;
    background: var(--color-text);
    margin-bottom: var(--spacing-xl);
}

#device-wrapper .about-purpose-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-xl);
}

#device-wrapper .about-purpose-left h2 {
    font-size: 48px;
    max-width: 14ch;
}

#device-wrapper .about-purpose-intro {
    font-size: 28px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 36ch;
}

#device-wrapper .about-purpose-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl) var(--spacing-lg);
}

#device-wrapper .about-purpose-item h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
    max-width: 20ch;
}

#device-wrapper .about-purpose-item p {
    font-size: 20px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Divider */
#device-wrapper hr.about-divider {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
    border: none;
    border-top: 1px solid var(--color-text);
    margin-left: auto;
    margin-right: auto;
}

/* Initiatives / Team section */
#device-wrapper .about-team {
    padding: var(--spacing-2xl) 0;
}

#device-wrapper .about-team-inner {
    max-width: var(--max-width);
    margin: 0 auto var(--spacing-xl) auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .about-team-inner h2 {
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .about-team-sub {
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 600px;
}

#device-wrapper .about-team-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

#device-wrapper .about-team-card {
    background-color: var(--color-text);
    border-radius: 20px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
}

#device-wrapper .about-team-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(240, 238, 230, 0.4);
    margin-bottom: var(--spacing-md);
}

#device-wrapper .about-team-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-bg);
    margin-bottom: 12px;
}

#device-wrapper .about-team-card p {
    font-size: 15px;
    color: rgba(240, 238, 230, 0.7);
    line-height: 1.7;
}

/* Values section - Anthropic two-column layout with numbered grid */
#device-wrapper .about-values-section {
    padding: var(--spacing-2xl) 0;
}

#device-wrapper .about-values-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .about-values-divider {
    width: 100%;
    height: 1px;
    background: var(--color-text);
    margin-bottom: var(--spacing-xl);
}

#device-wrapper .about-values-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-xl);
}

#device-wrapper .about-values-left h2 {
    font-size: 48px;
    max-width: 14ch;
}

#device-wrapper .about-values-intro {
    font-size: 28px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 50ch;
}

/* ========================================
   VALUES SPEC SHEET — vanguardist grid + typewriter panel
   ======================================== */

#device-wrapper .values-spec {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--color-text);
}

#device-wrapper .values-spec__item {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg) 0;
    border-bottom: 1px solid rgba(25, 25, 25, 0.12);
    display: grid;
    grid-template-columns: 6ch 1fr;
    grid-template-rows: auto;
    column-gap: var(--spacing-sm);
    align-items: baseline;
    cursor: default;
    transition: opacity 220ms ease, transform 220ms ease;
}

/* Right-column items: small left padding to separate from the left column */
#device-wrapper .values-spec__item:nth-child(2n) {
    padding-left: var(--spacing-md);
    border-left: 1px solid rgba(25, 25, 25, 0.12);
}

/* When any item is active, fade the rest to draw focus */
#device-wrapper .values-spec[data-active] .values-spec__item:not([data-active]) {
    opacity: 0.35;
}

#device-wrapper .values-spec__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    line-height: 1;
    padding-top: 8px;
}

#device-wrapper .values-spec__num-sep {
    opacity: 0.5;
}

#device-wrapper .values-spec__title {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    color: var(--color-text);
    position: relative;
    display: inline-block;
}

#device-wrapper .values-spec__title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--color-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms cubic-bezier(0.65, 0, 0.25, 1);
}

#device-wrapper .values-spec__item[data-active] .values-spec__title::after {
    transform: scaleX(1);
}

#device-wrapper .values-spec__desc {
    display: none; /* read by JS for the typewriter; surfaced inline on mobile */
}

#device-wrapper .values-spec__panel {
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--color-text);
    padding: var(--spacing-md) 0 0 0;
    min-height: 200px;
}

#device-wrapper .values-spec__panel-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 14px;
    min-height: 1em;
}

#device-wrapper .values-spec__panel-text {
    font-family: var(--font-primary);
    font-size: 28px;
    line-height: 1.5;
    color: var(--color-text);
    min-height: 4.8em;
}

#device-wrapper .values-spec__cursor {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background: var(--color-text);
    vertical-align: -0.12em;
    margin-left: 2px;
    animation: valuesSpecCursorBlink 880ms steps(2, jump-none) infinite;
}

#device-wrapper .values-spec__cursor[hidden] {
    display: none;
}

@keyframes valuesSpecCursorBlink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Tablet: keep two columns but tighter */
@media (max-width: 1100px) {
    #device-wrapper .values-spec__title {
        font-size: 28px;
    }
}

/* Mobile: single column, show all descriptions inline, hide the typewriter panel */
@media (max-width: 768px) {
    #device-wrapper .values-spec {
        grid-template-columns: 1fr;
    }
    #device-wrapper .values-spec__item,
    #device-wrapper .values-spec__item:nth-child(2n) {
        padding: var(--spacing-md) 0;
        border-left: none;
    }
    #device-wrapper .values-spec__desc {
        display: block;
        grid-column: 2;
        font-family: var(--font-primary);
        font-size: 16px;
        line-height: 1.6;
        color: var(--color-text-secondary);
        margin-top: 10px;
    }
    #device-wrapper .values-spec__panel {
        display: none;
    }
}

/* Governance / About section - two-column text layout */
#device-wrapper .about-governance {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl) 0;
}

#device-wrapper .about-governance-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .about-governance-divider {
    width: 100%;
    height: 1px;
    background: var(--color-text);
    margin-bottom: var(--spacing-xl);
}

#device-wrapper .about-governance-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-xl);
}

#device-wrapper .about-governance-left h2 {
    font-size: 48px;
    max-width: 14ch;
}

#device-wrapper .about-governance-right p {
    font-size: 21px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 70ch;
    margin-bottom: var(--spacing-md);
}

#device-wrapper .about-governance-right p:last-child {
    margin-bottom: 0;
}

#device-wrapper .about-governance-right strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ========================================
   GOVERNANCE — institutional sheet (laboratori page)
   ======================================== */

#device-wrapper .gov-meta {
    margin: var(--spacing-md) 0 0 0;
    padding: var(--spacing-md) 0 0 0;
    border-top: 1px solid rgba(25, 25, 25, 0.22);
    display: grid;
    gap: 10px;
    max-width: 28em;
}

#device-wrapper .gov-meta__row {
    display: grid;
    grid-template-columns: 10em 1fr;
    column-gap: var(--spacing-sm);
    align-items: baseline;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

#device-wrapper .gov-meta__row dt {
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
    font-weight: 500;
}

#device-wrapper .gov-meta__row dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 500;
}

#device-wrapper .gov-intro {
    font-size: 21px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    max-width: 60ch;
}

#device-wrapper .gov-articles {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-text);
}

#device-wrapper .gov-articles__item {
    display: grid;
    grid-template-columns: 4.5em 1fr;
    column-gap: var(--spacing-md);
    align-items: baseline;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid rgba(25, 25, 25, 0.18);
}

#device-wrapper .gov-articles__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    padding-top: 8px;
}

#device-wrapper .gov-articles__item p {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    max-width: 60ch;
}

#device-wrapper .gov-articles__item p strong {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: var(--color-text);
}

/* Mobile: stack everything vertically */
@media (max-width: 768px) {
    #device-wrapper .gov-meta {
        max-width: none;
    }
    #device-wrapper .gov-articles__item {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    #device-wrapper .gov-articles__num {
        padding-top: 0;
    }
    #device-wrapper .gov-articles__item p strong {
        font-size: 20px;
    }
}

/* About CTA */
#device-wrapper .about-cta {
    padding: var(--spacing-2xl) 0;
    text-align: center;
}

#device-wrapper .about-cta-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .about-cta h2 {
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .about-cta p {
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   PROJECTES PAGE
   ======================================== */

/* Iniciatives grid - una columna; cada targeta divideix contingut (esq.) i screenshot (dreta) */
#device-wrapper .initiatives-page-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md) var(--spacing-xl) var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

#device-wrapper .initiatives-page-grid .project-card {
    min-width: auto;
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: start;
}

#device-wrapper .initiatives-page-grid .project-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Let description drive content height; without this, flex:1 (from home cards) squeezes long text */
#device-wrapper .initiatives-page-grid .project-card-content .project-desc {
    flex: 0 0 auto;
    margin-bottom: var(--spacing-sm);
}

/* Screenshot: aspect-ratio 4:3 fix; tots els screenshots iguals (no s'estiren amb el contingut) */
#device-wrapper .initiatives-page-grid .project-card-screenshot {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--color-bg-secondary, #f4f2eb);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
}

#device-wrapper .initiatives-page-grid .project-card-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}

#device-wrapper .initiatives-page-grid .project-card-screenshot:empty::before,
#device-wrapper .initiatives-page-grid .project-card-screenshot.is-empty::before {
    content: "Screenshot";
    color: var(--color-text-tertiary, #999);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Projects CTA */
#device-wrapper .projects-cta {
    padding: var(--spacing-xl) 0 var(--spacing-2xl) 0;
    text-align: center;
}

#device-wrapper .projects-cta-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .projects-cta h2 {
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .projects-cta p {
    margin-bottom: var(--spacing-lg);
}

/* ========================================
   CONTACTE PAGE
   ======================================== */

#device-wrapper .contact-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md) var(--spacing-2xl) var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

#device-wrapper .contact-text h2 {
    margin-bottom: var(--spacing-md);
}

#device-wrapper .contact-text p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

#device-wrapper .contact-card {
    background-color: var(--color-text);
    border-radius: 20px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

#device-wrapper .contact-card .contact-icon {
    width: 48px;
    height: 48px;
    color: var(--color-bg);
}

#device-wrapper .contact-card .contact-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(240, 238, 230, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

#device-wrapper .contact-card a.contact-email,
#device-wrapper .contact-card .contact-email,
#device-wrapper .contact-card .contact-email * {
    font-size: 28px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity var(--transition);
}

#device-wrapper .contact-card a.contact-email:hover,
#device-wrapper .contact-card a.contact-email:hover *,
#device-wrapper .contact-card .contact-email:hover,
#device-wrapper .contact-card .contact-email:hover * {
    opacity: 0.7;
    color: #fff !important;
}

#device-wrapper .contact-card .contact-info {
    font-size: 15px;
    color: rgba(240, 238, 230, 0.6);
    line-height: 1.6;
    margin: 0;
}

/* Contact links section */
#device-wrapper .contact-links {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md) var(--spacing-xl) var(--spacing-md);
}

#device-wrapper .contact-links h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

#device-wrapper .contact-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

#device-wrapper .contact-link-item {
    background: var(--color-surface);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: all var(--transition);
    border: 1px solid transparent;
}

#device-wrapper .contact-link-item:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

#device-wrapper .contact-link-item .link-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
}

#device-wrapper .contact-link-item .link-arrow {
    font-size: 16px;
    color: var(--color-text-muted);
    transition: transform var(--transition);
}

#device-wrapper .contact-link-item:hover .link-arrow {
    transform: translateX(3px);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    #device-wrapper .about-purpose-layout,
    #device-wrapper .about-values-layout,
    #device-wrapper .about-governance-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    #device-wrapper .about-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Qui-som */
    #device-wrapper .about-hero {
        padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
    }

    #device-wrapper .about-hero-sub {
        font-size: 18px;
    }

    #device-wrapper .about-purpose-items {
        grid-template-columns: 1fr;
    }

    #device-wrapper .about-purpose-intro {
        font-size: 18px;
    }

    #device-wrapper .about-values-items {
        grid-template-columns: 1fr;
    }

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

    #device-wrapper .about-values-item {
        grid-template-columns: 48px 1fr;
        gap: var(--spacing-sm);
    }

    #device-wrapper .about-values-num {
        font-size: 24px;
    }

    #device-wrapper .about-values-content h3 {
        font-size: 20px;
    }

    #device-wrapper .about-values-content p {
        font-size: 16px;
    }

    /* Iniciatives — mòbil: imatge a dalt full-bleed + tipografia compacta */
    #device-wrapper .initiatives-page-grid .project-card {
        grid-template-columns: 1fr;
        padding: 0;
        overflow: hidden;
        gap: 20px;
    }
    #device-wrapper .initiatives-page-grid .project-card-screenshot {
        order: -1;
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-radius: 0;
        margin: 0;
    }
    #device-wrapper .initiatives-page-grid .project-card-content {
        padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
    }
    #device-wrapper .initiatives-page-grid .project-card .project-desc {
        font-size: 15px;
        line-height: 1.5;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-logo-text {
        font-size: 18px;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-layer,
    #device-wrapper .initiatives-page-grid .project-card .project-url {
        font-size: 11px;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-btn {
        font-size: 13px;
        padding: 8px 18px;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-logo-wrap {
        height: 48px;
        margin-bottom: 20px;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-logo {
        height: 22px;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-logo.project-logo-lg {
        height: 28px;
    }
    #device-wrapper .initiatives-page-grid .project-card .project-divider {
        margin: 12px 0;
    }

    /* Contacte */
    #device-wrapper .contact-grid {
        grid-template-columns: 1fr;
    }

    #device-wrapper .contact-card .contact-email {
        font-size: 22px;
    }

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

@media (max-width: 480px) {
    #device-wrapper .contact-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   404 PAGE
   ======================================== */

#device-wrapper .page-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    text-align: center;
}

#device-wrapper .page-404-inner {
    max-width: 640px;
    margin: 0 auto;
}

#device-wrapper .page-404-code {
    font-family: var(--font-display, inherit);
    font-size: clamp(96px, 18vw, 220px);
    font-weight: 200;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--color-text-primary, currentColor);
    opacity: 0.16;
    margin-bottom: var(--spacing-md);
    user-select: none;
}

#device-wrapper .page-404-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 var(--spacing-md) 0;
    letter-spacing: -0.01em;
}

#device-wrapper .page-404-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
    margin: 0 0 var(--spacing-sm) 0;
}

#device-wrapper .page-404-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
    margin: 0 0 var(--spacing-lg) 0;
}

#device-wrapper .page-404-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

#device-wrapper .page-404-aside {
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-tertiary, #999);
    margin: 0;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    #device-wrapper .page-404-lede {
        font-size: 16px;
    }
    #device-wrapper .page-404-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========================================
   QUADERN (blog)
   ======================================== */

#device-wrapper .quadern-list {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--spacing-md) var(--spacing-2xl) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Peu del quadern: astrolabi + cloenda editorial sota la llista d'articles */
#device-wrapper .quadern-foot {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-md);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--color-text);
}
#device-wrapper .quadern-foot .astrolabe {
    width: 300px;
    max-width: 80vw;
    height: auto;
    display: block;
    opacity: 0.78;
}
#device-wrapper .quadern-foot .astrolabe__alidade {
    transform-origin: center;
    transform-box: fill-box;
    animation: astrolabeRotate 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    #device-wrapper .quadern-foot .astrolabe__alidade { animation: none; }
}
#device-wrapper .quadern-foot__meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--color-text-muted, #999);
    margin: 0;
    text-transform: lowercase;
}
#device-wrapper .quadern-foot__caption {
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-secondary, #555);
    font-style: italic;
    text-align: center;
    max-width: 480px;
    margin: var(--spacing-xs) 0 0;
}

/* Títol de les pàgines quadern i contacte (al .container-narrow dins de
   la section corresponent). La section no té max-width, així que el títol
   queda centrat sobre tot l'ample disponible. Mateixes mides que .page-hero h1. */
#device-wrapper .quadern-page > .container-narrow,
#device-wrapper .contact-page > .container-narrow {
    padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
    text-align: center;
}
#device-wrapper .quadern-page > .container-narrow h1,
#device-wrapper .contact-page > .container-narrow h1 {
    max-width: 700px;
    margin: 0 auto var(--spacing-md) auto;
}

/* ========================================
   PÀGINES LEGALS (política de galetes, privacitat, transparència)
   Estètica minimalista, només text en columna narrow.
   ======================================== */
#device-wrapper .legal-page {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl) 0;
}
#device-wrapper .legal-page .container-narrow {
    padding: 0 var(--spacing-md);
}
/* h1 i h2 hereten l'estil de la tipografia del client (definit a l'editor
   d'estil: h1 5rem, h2 3rem). Només ajustem margins per a la lectura. */
#device-wrapper .legal-page h1 {
    margin: 0 0 var(--spacing-sm) 0;
}
#device-wrapper .legal-page .legal-updated {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-2xl) 0;
    letter-spacing: 0.02em;
}
#device-wrapper .legal-page h2 {
    margin-top: var(--spacing-xl);
}
#device-wrapper .legal-page p {
    line-height: 1.7;
    margin: 0;
}

#device-wrapper .quadern-empty {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-2xl) var(--spacing-md);
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

#device-wrapper .quadern-empty .astrolabe {
    width: 300px;
    max-width: 80vw;
    height: auto;
    color: var(--color-text);
    opacity: 0.78;
    display: block;
}

#device-wrapper .quadern-empty .astrolabe__alidade {
    transform-origin: center;
    transform-box: fill-box;
    animation: astrolabeRotate 48s linear infinite;
}

@keyframes astrolabeRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #device-wrapper .quadern-empty .astrolabe__alidade {
        animation: none;
    }
}

#device-wrapper .quadern-empty__meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
}

#device-wrapper .quadern-empty p:not(.quadern-empty__meta) {
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 36ch;
    text-align: center;
}

#device-wrapper .quadern-card {
    background: var(--color-bg-secondary, #f4f2eb);
    border: 1px solid var(--color-border, #d9d7cf);
    border-radius: 12px;
    overflow: hidden;
}

#device-wrapper .quadern-card.is-draft {
    outline: 1px dashed var(--color-text-muted, #999);
    outline-offset: -1px;
    opacity: 0.92;
}

#device-wrapper .quadern-card-status {
    display: inline-block;
    margin-left: var(--spacing-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-text-muted, #999);
}

#device-wrapper .quadern-card-link {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    text-decoration: none;
    color: inherit;
}

#device-wrapper .quadern-card-image {
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    height: 100%;
    min-height: 200px;
}

#device-wrapper .quadern-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#device-wrapper .quadern-card-content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#device-wrapper .quadern-card-date {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-tertiary, #999);
    margin: 0 0 var(--spacing-xs) 0;
}

#device-wrapper .quadern-card-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 var(--spacing-xs) 0;
    letter-spacing: -0.01em;
}

#device-wrapper .quadern-card-subtitle {
    font-size: 15px;
    color: var(--color-text-secondary, #555);
    margin: 0 0 var(--spacing-sm) 0;
    font-style: italic;
}

#device-wrapper .quadern-card-summary {
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-secondary, #555);
    margin: 0 0 var(--spacing-sm) 0;
}

#device-wrapper .quadern-card-cta {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent, currentColor);
    display: inline-block;
    margin-top: auto;
}

/* Cards sense imatge: una sola columna */
#device-wrapper .quadern-card-link:not(:has(.quadern-card-image)) {
    grid-template-columns: 1fr;
}

/* DETALL D'ARTICLE */
#device-wrapper .quadern-article {
    padding: var(--spacing-xl) 0 var(--spacing-2xl) 0;
}

#device-wrapper .quadern-article .quadern-back {
    display: inline-block;
    font-size: 14px;
    color: var(--color-text-secondary, #555);
    text-decoration: none;
    margin-bottom: var(--spacing-lg);
    transition: opacity 0.2s ease;
}

#device-wrapper .quadern-article .quadern-back:hover { opacity: 0.7; }

#device-wrapper .quadern-article .quadern-article__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}
#device-wrapper .quadern-article .quadern-article__top .quadern-back {
    margin-bottom: 0;
}
#device-wrapper .quadern-article .quadern-article__top .quadern-draft-badge {
    margin: 0;
}

#device-wrapper .quadern-article .quadern-draft-badge {
    display: block;
    width: fit-content;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-text-muted, #999);
    background: rgba(0, 0, 0, 0.04);
    border: 1px dashed var(--color-text-muted, #999);
    padding: 6px 12px;
    border-radius: 4px;
    margin: 0 0 var(--spacing-md) auto;
}

#device-wrapper .quadern-article .quadern-date {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary, #999);
    margin: 0 0 var(--spacing-xs) 0;
}

#device-wrapper .quadern-article .quadern-title-single {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 var(--spacing-lg) 0;
}

#device-wrapper .quadern-article .quadern-subtitle {
    font-size: 20px;
    color: var(--color-text-secondary, #555);
    line-height: 1.5;
    margin: 0 0 var(--spacing-lg) 0;
    font-style: italic;
}

#device-wrapper .quadern-article .quadern-cover {
    margin: var(--spacing-lg) auto;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#device-wrapper .quadern-article .quadern-cover img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    mix-blend-mode: multiply;
}

#device-wrapper .quadern-article .quadern-cover-caption {
    display: block;
    margin: var(--spacing-sm) auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted, #8C8C8C);
    max-width: 480px;
    font-style: normal;
    letter-spacing: 0.01em;
}

#device-wrapper .quadern-article .quadern-body {
    color: var(--p3-color);
}

#device-wrapper .quadern-article .quadern-body p {
    font-family: var(--p3-font-family);
    font-size: var(--p3-size);
    line-height: var(--p3-line-height);
    font-weight: 350;
    font-style: var(--p3-font-style);
    text-transform: var(--p3-text-transform);
    letter-spacing: var(--p3-letter-spacing);
    color: var(--p3-color);
    margin: 0 0 var(--spacing-md) 0;
}

#device-wrapper .quadern-article .quadern-body h2 {
    font-family: var(--font-primary);
    font-weight: 790;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

#device-wrapper .quadern-article .quadern-body blockquote {
    margin: var(--spacing-lg) 0;
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--color-text-muted, #8C8C8C);
}

#device-wrapper .quadern-article .quadern-body blockquote p {
    font-style: italic;
    color: var(--color-text-secondary, #5C5C5C);
    margin: 0;
}

#device-wrapper .quadern-article .quadern-body a,
#device-wrapper .quadern-article .quadern-body a:visited {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    color: var(--accent-color);
}

#device-wrapper .quadern-article .quadern-body a:hover,
#device-wrapper .quadern-article .quadern-body a:focus,
#device-wrapper .quadern-article .quadern-body a:active {
    text-decoration: underline;
    color: var(--accent-color);
}

/* Icona d'enllaç extern inline (sense subratllat, color tènue) */
#device-wrapper .quadern-article .quadern-body a.quadern-extlink,
#device-wrapper .quadern-article .quadern-body a.quadern-extlink:visited,
#device-wrapper .quadern-article .quadern-body a.quadern-extlink:hover,
#device-wrapper .quadern-article .quadern-body a.quadern-extlink:focus,
#device-wrapper .quadern-article .quadern-body a.quadern-extlink:active {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--color-text-muted, #8C8C8C);
    text-decoration: none;
    vertical-align: baseline;
    position: relative;
    top: 1px;
}
#device-wrapper .quadern-article .quadern-body a.quadern-extlink svg {
    display: block;
}

#device-wrapper .quadern-article .quadern-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: var(--spacing-md) 0;
}

@media (max-width: 720px) {
    #device-wrapper .quadern-card-link {
        grid-template-columns: 1fr;
    }
    #device-wrapper .quadern-card-image {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }
    #device-wrapper .quadern-card-title {
        font-size: 20px;
    }
}

/* ========================================
   LABORATORI - Hero amb grid (propòsit + vídeo)
   ======================================== */

#device-wrapper .ws-grid.component-grid video {
    height: 460px;
    max-height: 460px;
}

#device-wrapper .lab-hero {
    padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
}

#device-wrapper .lab-hero-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

#device-wrapper .lab-hero .lab-hero-title {
    font-family: var(--font-primary);
    font-weight: 790;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    padding: 0 0px 20px 16px;
}

#device-wrapper .lab-hero .ws-grid-cell p {
    font-family: Georgia, serif;
    font-size: 40px;
    line-height: 1.3;
    font-weight: 400;
}

/* < 1300px: les dues cel·les del grid es posen en files (text a dalt, vídeo a baix)
   perquè el vídeo pugui ocupar l'ample complet del wrap. */
@media (max-width: 1299px) {
    #device-wrapper .lab-hero .ws-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #device-wrapper .lab-hero .ws-grid-cell p {
        font-size: 28px;
    }
    #device-wrapper .lab-hero-wrap {
        padding: 0;
    }
}

/* Lab-hero "propòsit" (primera secció): compactar perquè h2 + p + vídeo
   entrin sense scroll en mòbil. NO aplica al lab-hero--values (segon). */
@media (max-width: 768px) {
    #device-wrapper .lab-hero:not(.lab-hero--values) {
        padding: var(--spacing-md) 0;
    }
    #device-wrapper .lab-hero:not(.lab-hero--values) .lab-hero-title {
        font-size: 22px;
        padding: 0 0 10px 8px;
    }
    #device-wrapper .lab-hero:not(.lab-hero--values) .ws-grid {
        gap: 8px !important;
    }
    #device-wrapper .lab-hero:not(.lab-hero--values) .ws-grid-cell {
        padding: 4px !important;
    }
    #device-wrapper .lab-hero:not(.lab-hero--values) .ws-grid-cell p:not(.lab-video-caption) {
        font-size: 16px;
        line-height: 1.4;
    }
    #device-wrapper .lab-hero:not(.lab-hero--values) .ws-grid.component-grid video {
        height: clamp(200px, 36vh, 360px);
        max-height: clamp(200px, 36vh, 360px);
    }
    #device-wrapper .lab-hero:not(.lab-hero--values) .lab-video-caption {
        font-size: 11px;
        line-height: 1.35;
        margin-top: 6px;
    }
}

/* Values lab-hero: padding al bloc de text intro i al panell typewriter */
#device-wrapper .lab-hero--values .ws-grid-cell:first-child > p,
#device-wrapper .lab-hero--values .ws-grid-cell:first-child > .values-spec__panel {
    padding: 16px;
}

/* Values lab-hero: el typewriter ocupa el lloc del paràgraf eliminat
   ("A Opengea...") amb el mateix format Georgia 40px. */
#device-wrapper .lab-hero--values .values-spec__panel {
    margin-top: 0;
    border-top: none;
    padding: 0;
    min-height: 0;
}

#device-wrapper .lab-hero--values .values-spec__panel-text {
    font-family: Georgia, serif;
    font-size: 40px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--color-text);
    min-height: 3.9em;
}

#device-wrapper .lab-hero--values .values-spec__cursor {
    width: 0.45em;
    height: 0.85em;
    vertical-align: -0.08em;
}

@media (max-width: 768px) {
    #device-wrapper .lab-hero--values .values-spec__panel-text {
        font-size: 28px;
    }
}

/* Lab-hero--values mòbil: el panell typewriter ja és display:none al mòbil
   (vegeu .values-spec__panel { display: none } al bloc de 768px de dalt).
   Aquí compactem la secció perquè la cel·la buida resultant + gap de 80px
   no generin un forat enorme sota el títol "Els nostres valors". */
@media (max-width: 768px) {
    #device-wrapper .lab-hero--values {
        padding: var(--spacing-md) 0 var(--spacing-md) 0;
    }
    #device-wrapper .lab-hero--values .lab-hero-title {
        font-size: 22px;
        padding: 0 0 10px 8px;
    }
    /* Override del gap inline (var(--spacing-xl)=80px) */
    #device-wrapper .lab-hero--values .ws-grid {
        gap: 0 !important;
    }
    /* Amaga la cel·la buida (el panell typewriter ja està display:none) */
    #device-wrapper .lab-hero--values .ws-grid-cell:first-child {
        display: none;
    }
    /* Padding del :first-child del wrap (el panel padding 16) ja no aplica
       perquè la cel·la està amagada. Però la cel·la dreta encara té padding
       inline 16 — la reduïm per recuperar amplada al text. */
    #device-wrapper .lab-hero--values .ws-grid-cell:last-child {
        padding: 4px !important;
    }
}

/* ========================================
   MURMURATION REVEAL (hover el vídeo del lab-hero)
   ======================================== */

#device-wrapper .lab-video-reveal {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    cursor: crosshair;
}

#device-wrapper .lab-video-reveal video {
    display: block;
    width: 100%;
    height: auto;
}

#device-wrapper .lab-video-curtain {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0.9;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    clip-path: inset(0 0 0 100%);
    /* Per defecte sense transició: la cortina segueix 1:1 el cursor amb mousemove.
       Només transitiona quan es retrau (mouseleave) via la classe .retracting. */
    transition: none;
    pointer-events: none;
}

#device-wrapper .lab-video-curtain.retracting {
    transition: clip-path 350ms ease-out;
}

#device-wrapper .lab-hero .ws-grid-cell p.lab-video-caption,
#device-wrapper .lab-video-caption {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 12px 0 0 0;
    padding: 0;
    width: 100%;
    max-width: none;
}

#device-wrapper .lab-video-stage {
    position: absolute;
    inset: 0;
}

#device-wrapper .lab-mn-node {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    transition: opacity 180ms ease, left 110ms linear, top 110ms linear;
    /* Estat per defecte (visible): l'opacitat es controla per inline style */
    opacity: 1;
}

/* 3 nivells de densitat = 3 tons de gris + variació de mida i pes.
   Bin assignat per quantils de count cada frame: low/mid/high. */
#device-wrapper .lab-mn-node[data-bin="low"]  {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 400;
}
#device-wrapper .lab-mn-node[data-bin="mid"]  {
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 450;
}
#device-wrapper .lab-mn-node[data-bin="high"] {
    color: #0a0a0a;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 640px) {
    #device-wrapper .lab-mn-node[data-bin="low"]  { font-size: 8px; }
    #device-wrapper .lab-mn-node[data-bin="mid"]  { font-size: 9px; }
    #device-wrapper .lab-mn-node[data-bin="high"] { font-size: 10px; }
}

#device-wrapper .ws-541cr3tf {
    padding: 16px 10px;
}