/*
Theme Name: Eminox Tech Theme
Theme URI: https://eminoxtech.com
Author: Eminox Tech
Author URI: https://eminoxtech.com
Description: Tema WordPress personalitzat per Eminox Tech - Fabricació en acer inoxidable i processos de precisió per a la indústria alimentària.
Version: 1.30.1
Update URI: https://packages.testartstudio.com/wp-update/eminox/info.json
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eminox-theme
Tags: one-column, custom-menu, featured-images, full-width-template, custom-logo
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0

Aquest tema requereix ACF Pro per la gestió de continguts.
*/

/* ============================================
   EMINOX TECH V2 - Styles
   ============================================ */

/* CSS Variables */
:root {
    --color-black: #0b0b0b;
    --color-white: #ffffff;
    --color-gray-bg: #f5f5f5;
    --color-gray-border: #d9d9d9;
    --color-text-primary: #0b0b0b;
    --color-text-secondary: #4a4a4a;
    --color-text-light: rgba(255, 255, 255, 0.9);

    --font-family: 'Roboto', sans-serif;

    --max-width: 1232px;
    --max-width-narrow: 1152px;

    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 80px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Subtle rounding applied across components (cards, buttons, inputs, media) */
    --radius: 6px;
    --radius-sm: 4px;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    background-color: var(--color-white);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary {
    background-color: var(--color-black);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #333;
    opacity: 1;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

.btn-outline:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    opacity: 1;
}

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
}

/* ============================================
   HEADER - Figma node 27-995
   Height: 64px, Logo: 163x40px, Nav links: Roboto Medium 14px/20px
   Glassmorphism: blur 4px, border-bottom 1px #d9d9d9
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 64px;
    /* Figma: height 64 */
    transition: all var(--transition-normal);
}

.header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    /* Figma: paddingLeft/Right 24 */
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    /* Figma: height 64 */
}

.logo {
    display: flex;
    align-items: center;
}

.logo svg {
    width: 163px;
    /* Figma: width 163 */
    height: 40px;
    /* Figma: height 40 */
    transition: filter var(--transition-normal);
}

.logo .custom-logo {
    display: block;
    width: 163px;
    height: 40px;
    object-fit: contain;
    transition: filter var(--transition-normal);
}

/* When scrolled, invert logo colors (white to black) */
.header.scrolled .custom-logo,
.header.scrolled .logo svg {
    filter: invert(1);
}

.logo-img {
    width: 163px;
    /* Figma: width 163 */
    height: 40px;
    /* Figma: height 40 */
    transition: opacity var(--transition-normal);
    display: none;
    /* Hide img logos, using SVG instead */
}

/* Logo switching - white visible by default, dark hidden */
.logo-white {
    display: none;
}

.logo-dark {
    display: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    /* Figma: Medium */
    font-size: 14px;
    /* Figma: fontSize 14 */
    line-height: 20px;
    /* Figma: lineHeightPx 20 */
    color: #ffffff;
    /* Figma: color white */
    transition: color var(--transition-normal), opacity var(--transition-fast);
}

.nav-link:hover {
    opacity: 1;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    height: 2px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    opacity: 0.6;
    transform: scaleX(1);
}

.nav-link.current-menu-item,
.nav-link.current_page_item,
.nav-link[aria-current="page"] {
    opacity: 1;
    font-weight: 700;
}

.nav-link.current-menu-item::after,
.nav-link.current_page_item::after,
.nav-link[aria-current="page"]::after {
    left: 0;
    opacity: 1;
    transform: scaleX(1);
}

/* ============================================
   CARRUSEL DE TARGETES EN MÒBIL
   Graelles .block-card-grid amb el camp ACF `mobile_carousel` actiu. Fins que
   Swiper no s'inicialitza (només per sota de 768px) el marcatge es comporta com
   la graella de sempre; per això els estils pengen de .swiper-initialized.
   ============================================ */
.cards-swiper {
    overflow: hidden;
}

/* Mentre Swiper no s'ha inicialitzat (desktop i tauleta), el .swiper-wrapper
   que el bloc imprimeix al marcatge no ha de fer res: si el deixem amb el
   flex-nowrap del CSS de la llibreria, ocupa una sola columna de la graella i
   totes les targetes queden en una fila que desborda i es talla. Amb display:
   contents el wrapper desapareix de la caixa i les targetes tornen a ser
   filles directes de la graella. */
.cards-swiper:not(.swiper-initialized)>.swiper-wrapper {
    display: contents;
}

.cards-swiper:not(.swiper-initialized)>.swiper-wrapper>.swiper-slide {
    /* Igual que el wrapper: cada slide ha de deixar pas a la targeta perquè
       sigui la targeta la que ocupi la cel·la de la graella. */
    display: contents;
}

.cards-swiper:not(.swiper-initialized)>.cards-pagination {
    display: none;
}

.cards-swiper.swiper-initialized {
    display: block;
    /* Deixa respirar la paginació sota les targetes. */
    padding-bottom: 40px;
}

.cards-swiper.swiper-initialized .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* Les targetes han d'omplir la slide perquè totes quedin a la mateixa alçada. */
.cards-swiper.swiper-initialized .swiper-slide {
    display: flex;
    height: auto;
}

.cards-swiper.swiper-initialized .swiper-slide>.block-card {
    width: 100%;
    margin: 0;
}

.cards-swiper .cards-pagination {
    bottom: 0;
}

/* ============================================
   MEGAMENÚ SERVICIOS
   Panell desplegable sota l'entrada "Servicios": llista de serveis del CPT en
   dues columnes més una crida de contacte. S'obre amb hover i amb teclat
   (la classe .is-open la posa initServicesMegamenu a main.js).
   ============================================ */
.nav-item--mega {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link--mega {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-link-caret {
    display: inline-flex;
    transition: transform var(--transition-fast);
}

.nav-item--mega.is-open .nav-link-caret {
    transform: rotate(180deg);
}

.mega-panel {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    z-index: 1200;
    width: min(920px, calc(100vw - 48px));
    transform: translateX(-50%) translateY(-8px);
    padding: 28px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(11, 11, 11, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Pont invisible entre l'enllaç i el panell: evita que el menú es tanqui
   mentre el cursor travessa el buit dels 18px. */
.mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
}

.nav-item--mega.is-open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 268px;
    gap: 32px;
}

.mega-col {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px;
    border-left: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-black);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mega-item:hover,
.mega-item:focus-visible {
    background: var(--color-gray-bg);
    border-left-color: var(--color-black);
}

.mega-item-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-top: 2px;
    color: var(--color-black);
}

.mega-item-icon svg {
    width: 18px;
    height: 18px;
}

.mega-item-text strong {
    display: block;
    font-size: 14.5px;
    line-height: 20px;
    font-weight: 700;
}

.mega-item-text span {
    display: block;
    margin-top: 2px;
    color: var(--color-text-secondary);
    font-size: 12.5px;
    line-height: 17px;
}

.mega-promo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius-sm);
    background: var(--color-black);
    color: var(--color-white);
}

.mega-promo strong {
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
}

.mega-promo p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 19px;
}

.mega-promo a {
    align-self: flex-start;
    margin-top: 6px;
    padding: 10px 20px;
    border: 2px solid var(--color-white);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mega-promo a:hover,
.mega-promo a:focus-visible {
    background: var(--color-white);
    color: var(--color-black);
}

@media (prefers-reduced-motion: reduce) {

    .mega-panel,
    .nav-link-caret {
        transition: none;
    }
}

/* Header Scrolled - Glassmorphism Figma specs */
.header.scrolled {
    /*
     * El Figma demana 0.85 d'opacitat, pero amb només 4px de desenfocament el
     * text de sota es llegia a través de la barra (EMX-FE-03): amb la pàgina a
     * mitja alçada s'hi veien els títols de les seccions. Pugem l'opacitat a
     * 0.97 i el desenfocament a 12px; l'efecte de vidre es manté i el
     * contingut deixa de transparentar-se.
     */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #d9d9d9;
    /* Figma: stroke 0.85 rgba = #d9d9d9 */
}

/*
 * La capçalera és fixa i tapa 64px: sense això, un enllaç d'àncora deixa el
 * títol de la secció just a sota de la barra.
 */
:target,
h2[id],
h3[id],
section[id] {
    scroll-margin-top: 84px;
}

.header.scrolled .nav-link {
    color: #0b0b0b;
    /* Figma: color black */
}

/* Mobile Menu Button */
/* La icona segueix sent de 24x20, però el padding porta l'àrea tàctil a
   48x44 (mínim recomanat per a targets tàctils). El marge negatiu compensa
   el padding perquè el botó no desplaci la resta del header. */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: content-box;
    width: 24px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 12px;
    margin: -12px;
}

.mobile-menu-btn span {
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transition: all var(--transition-normal);
}

.header.scrolled .mobile-menu-btn span {
    background-color: var(--color-black);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   HERO SECTION
   Figma specs: 1440x700px, overlay 30%, centered content
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    /* Figma: opacity 0.3 */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 768px;
    /* Figma: maxWidth 768 */
    padding: 0 24px;
    /* Figma: paddingLeft/Right 24 */
    text-align: center;
}

.hero-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 36px;
    /* Figma: fontSize 36 */
    line-height: 40px;
    /* Figma: lineHeightPx 40 */
    color: #ffffff;
    /* Figma: color white */
    text-align: center;
    margin-bottom: 16px;
    /* Figma: itemSpacing 16 */
}

.hero-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /* Figma: Regular */
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 28px;
    /* Figma: lineHeightPx 28 */
    color: rgba(255, 255, 255, 0.9);
    /* Figma: opacity 0.9 */
    text-align: center;
    max-width: 672px;
    /* Figma: maxWidth 672 */
    margin-bottom: 16px;
    /* Figma: itemSpacing 16 */
}

.hero-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* Figma: itemSpacing 16 */
    padding-top: 16px;
    /* Figma: paddingTop 16 */
    flex-wrap: wrap;
}

/* Hero Buttons - exact Figma specs */
.hero .btn-primary {
    background-color: #0b0b0b;
    /* Figma: color 0.043 */
    color: #ffffff;
    padding: 12px 24px;
    /* Figma: padding 12/24 */
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    border: none;
}

.hero .btn-secondary {
    background-color: transparent;
    color: #ffffff;
    padding: 12px 24px;
    /* Figma: padding 12/24 */
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid #ffffff;
    /* Figma: stroke white */
}

/* ============================================
   SECTIONS - Base styles
   ============================================ */
.section {
    padding: 80px 0;
    /* Figma: paddingTop/Bottom 80 */
}

.section-white {
    background-color: #ffffff;
}

.section-gray {
    background-color: #f5f5f5;
    /* Figma: gray background */
}

.section-header {
    text-align: center;
    max-width: 768px;
    /* Figma: maxWidth 768 */
    margin: 0 auto 48px;
    /* Figma: itemSpacing 48 */
}

.section-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 36px;
    /* Figma: fontSize 36 */
    line-height: 40px;
    /* Figma: lineHeightPx 40 */
    color: #0b0b0b;
    /* Figma: color 0.043 */
    margin-bottom: 16px;
    /* Figma: itemSpacing 16 */
}

.section-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /* Figma: Regular */
    font-size: 16px;
    /* Figma: fontSize 16 */
    line-height: 24px;
    /* Figma: lineHeightPx 24 */
    color: #4a4a4a;
    /* Figma: color 0.29 */
}

/* ============================================
   SERVICES SECTION - Figma node 27-445
   Title: Servicios, 36px Bold
   Subtitle: 16px Regular, color #4a4a4a
   Cards with images, gradient overlay, icon + title
   ============================================ */
#servicios {
    padding-top: 80px;
}

#servicios .section-header {
    margin-bottom: 17px;
    /* Figma: specific spacing */
}

.services-grid {
    overflow: hidden;
}

/* Graella 3x2 amb separadors d'1px (Figma 103:16537): les cel·les no tenen
   gap ni radi; les línies es fan amb el border del contenidor + border-r/b de
   cada targeta, i el `gap: 1px` sobre fons #d9d9d9 evita dobles línies. */
.services-grid:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 400px;
    gap: 1px;
    background-color: #d9d9d9;
    border: 1px solid #d9d9d9;
}

.services-grid .swiper-slide {
    display: flex;
    height: auto;
}

.services-grid .swiper-slide .service-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.service-slide-cta {
    max-width: 100%;
    overflow: hidden;
}

/* .service-card.service-card--cta (dues classes) perquè guanyi a la regla
   base .service-card, que va més avall al fitxer. */
.service-card.service-card--cta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    overflow: hidden;
    padding: 32px;
    background-color: #0b0b0b;
    color: #ffffff;
    text-align: center;
}

.service-card--cta .service-cta-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
}

.service-card--cta .service-cta-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 320px;
    margin: 16px auto 0;
}

/* Botó outline (Figma 103:16610): vora blanca de 2px, sense subratllat. */
.service-card--cta .service-cta-link {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 34px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.service-card--cta .service-cta-link:hover,
.service-card--cta .service-cta-link:focus-visible {
    background-color: #ffffff;
    color: #0b0b0b;
}

.service-card--cta .service-cta-image {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
}

.service-card--cta .service-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card--cta .service-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Targeta de servei: tota ella és l'enllaç a la fitxa (element <a>), sense
   fons blanc ni cos de text: el contingut va sobreposat a la imatge. */
.service-card {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #0b0b0b;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.service-card-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-card-image img,
.service-card:focus-visible .service-card-image img,
.service-card.is-revealed .service-card-image img {
    transform: scale(1.04);
}

/* Figma 103:16540 "Overlay": negre al 20% sobre tota la imatge. */
.service-card-overlay-tint {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Figma 103:16541 "Gradient": de negre 90% a transparent, amb 20% al mig. */
.service-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Contingut ancorat a baix: icona, títol i descripció (Figma 103:16542). */
.service-card-header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 32px 16px;
    z-index: 3;
}

.service-icon {
    width: 48px;
    height: 48px;
    background-color: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.service-icon svg {
    width: 20px;
    height: 20px;
}

.service-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
}

/* La descripció està a opacity:0 al repòs (Figma) i es revela en hover/focus.
   Es col·lapsa amb grid-template-rows perquè el títol quedi a la mateixa
   posició que al disseny fins que la targeta s'activa. */
.service-card-header .service-text {
    display: grid;
    grid-template-rows: 0fr;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin: -16px 0 0;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-header .service-text>* {
    min-height: 0;
}

.service-card:hover .service-card-header .service-text,
.service-card:focus-visible .service-card-header .service-text,
.service-card.is-revealed .service-card-header .service-text {
    grid-template-rows: 1fr;
    margin-top: 0;
    opacity: 1;
}

.service-card:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: -2px;
}

/* Sense hover fiable (tàctil): la descripció es mostra sempre, perquè
   altrament només es veuria després del primer toc. */
@media (hover: none) {
    .service-card-header .service-text {
        grid-template-rows: 1fr;
        margin-top: 0;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .service-card-image img,
    .service-card-header .service-text {
        transition: none;
    }
}

/* ============================================
   INOXSIS SECTION - Figma node 27-519
   Layout: Split text left (592px), image right
   Title: 36px/40px Bold, Paragraphs: 18px/28px Regular
   Buttons: primary solid, secondary outline with icon
   ============================================ */
#inoxsis {
    padding: 80px 0;
    /* Figma: padding 80 */
}

.inoxsis-content {
    display: flex;
    gap: 48px;
    /* Figma: itemSpacing 48 */
    align-items: flex-start;
}

.inoxsis-text {
    flex: 0 0 592px;
    /* Figma: width 592 */
    max-width: 592px;
}

.inoxsis-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 36px;
    /* Figma: fontSize 36 */
    line-height: 40px;
    /* Figma: lineHeightPx 40 */
    color: #0b0b0b;
    /* Figma: color 0.043 */
    margin-bottom: 24px;
    /* Figma: itemSpacing 24 */
}

.inoxsis-paragraph {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /* Figma: Regular */
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 28px;
    /* Figma: lineHeightPx 28 */
    color: #4a4a4a;
    /* Figma: color 0.29 */
    margin-bottom: 24px;
    /* Figma: itemSpacing 24 */
}

.inoxsis-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Figma: itemSpacing 16 */
    margin-top: 32px;
    /* Figma: paddingTop 32 */
}

.inoxsis-buttons .btn-primary {
    background-color: #0b0b0b;
    color: #ffffff;
    padding: 12px 32px;
    /* Figma: padding 12/32 */
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.inoxsis-buttons .btn-outline {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Figma: itemSpacing 12 */
    background-color: transparent;
    color: #0b0b0b;
    padding: 11px 32px;
    /* Figma: padding accounting for border */
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border: 2px solid #0b0b0b;
    /* Figma: strokeWeight 2 */
}

.inoxsis-buttons .btn-outline svg {
    width: 16px;
    height: 16px;
}

.inoxsis-image {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.inoxsis-image img {
    width: 100%;
    height: 460px;
    /* Figma: height 460 */
    object-fit: cover;
}

/* INOXSIS Swiper - sempre actiu */
.inoxsis-swiper {
    width: 100%;
    height: 100%;
}

.inoxsis-swiper .swiper-slide img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

/* ============================================
   NUESTRO EQUIPO SECTION - Figma node 27-541
   Title: 36px/40px Bold centered
   Subtitle: 20px/32.5px Regular centered, max-width 768
   Cards: white bg, 1px border #d9d9d9
   Icon: 64x64 black bg
   ============================================ */
#equipo {
    padding: 80px 0;
}

#equipo .section-subtitle {
    font-size: 20px;
    /* Figma: fontSize 20 */
    line-height: 32.5px;
    /* Figma: lineHeightPx 32.5 */
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    /* Figma: itemSpacing 32 */
    margin-bottom: 64px;
    /* Figma: itemSpacing 64 */
}

.capability-card {
    padding: 33px;
    /* Figma: padding 33 */
    border: 1px solid #d9d9d9;
    /* Figma: stroke 0.85 */
    background-color: #ffffff;
    /* Figma: white bg */
    border-radius: 8px;
}

.capability-icon {
    width: 64px;
    /* Figma: width 64 */
    height: 64px;
    /* Figma: height 64 */
    background-color: #0b0b0b;
    /* Figma: color 0.043 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    /* Figma: itemSpacing 24 */
    color: #ffffff;
    border-radius: 8px;
}

.capability-icon svg {
    width: 27px;
    height: 24px;
}

.capability-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 24px;
    /* Figma: fontSize 24 */
    line-height: 32px;
    /* Figma: lineHeightPx 32 */
    color: #0b0b0b;
    margin-bottom: 16px;
    /* Figma: itemSpacing 16 */
}

.capability-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /* Figma: Regular */
    font-size: 16px;
    /* Figma: fontSize 16 */
    line-height: 26px;
    /* Figma: lineHeightPx 26 */
    color: #4a4a4a;
    /* Figma: color 0.29 */
}

/* Equipo Features - Figma node 27:616 */
.equipo-features-grid {
    display: flex;
    gap: 24px;
    margin-top: 64px;
}

.equipo-feature-item {
    flex: 1;
    border-left: 4px solid var(--color-black);
    padding-left: 28px;
}

.equipo-feature-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.equipo-feature-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
}

/* Experience Block - Figma exact specs */
.experience-block {
    display: flex;
    gap: 48px;
    /* Figma: itemSpacing 48 */
    padding: 48px;
    /* Figma: padding 48 */
    background-color: #f5f5f5;
    /* Figma: color 0.9607 */
    border: 1px solid #d9d9d9;
    /* Figma: stroke 0.85 */
    margin-bottom: 64px;
    /* Figma: itemSpacing 64 */
    align-items: center;
    border-radius: 8px;
}

.experience-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Figma: itemSpacing 24 */
}

.experience-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 30px;
    /* Figma: fontSize 30 */
    line-height: 36px;
    /* Figma: lineHeightPx 36 */
    color: #0b0b0b;
    margin: 0;
}

.experience-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 29.25px;
    /* Figma: lineHeightPx 29.25 */
    color: #4a4a4a;
    /* Figma: color 0.29 */
    margin: 0;
}

/* Stats Row - Horizontal with dividers */
.experience-stats-row {
    display: flex;
    align-items: center;
    padding-top: 16px;
    /* Figma: paddingTop 16 */
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 36px;
    /* Figma: fontSize 36 */
    line-height: 40px;
    /* Figma: lineHeightPx 40 */
    color: #0b0b0b;
}

.stat-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* Figma: fontSize 14 */
    line-height: 20px;
    /* Figma: lineHeightPx 20 */
    color: #4a4a4a;
    margin-top: 8px;
    /* Figma: itemSpacing 8 */
}

.stat-divider {
    width: 1px;
    height: 64px;
    background-color: #d9d9d9;
    /* Figma: color 0.85 */
    margin: 0 24px;
    /* Figma: paddingLeft 24 */
}

/* Experience Images Grid - 2x2 */
.experience-images {
    flex: 1;
    max-width: 503px;
    /* Figma: width 503 */
}

.experience-image-grid {
    overflow: hidden;
}

.experience-image-grid:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.experience-image-item {
    border: 1px solid #d9d9d9;
    background-color: #ffffff;
    overflow: hidden;
}

.experience-image-item img {
    width: 100%;
    height: 190px;
    /* Figma: height 190 */
    object-fit: cover;
}

/* Features Section */
#features {
    padding: 80px 0;
}

/* Reduir padding quan Features va després d'Equipo */
#equipo+#features,
#equipo+#experiencia,
#experiencia+#features {
    padding-top: 0;
}


/* Treure padding-bottom quan el següent bloc és Features */
#equipo:has(+ #experiencia),
#equipo:has(+ #features),
#experiencia:has(+ #features) {
    padding-bottom: 0;
}

/* Features Grid - 4 items in a row with left border only */
.features-grid {
    display: flex;
    gap: 24px;
    /* Figma: itemSpacing 24 */
}

.feature-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Figma: itemSpacing 8 */
    padding-left: 24px;
    /* Figma: paddingLeft 24 */
    border-left: 4px solid #0b0b0b;
    /* Figma: individualStrokeWeights left: 4.0 */
    background: transparent;
}

.feature-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 28px;
    /* Figma: lineHeightPx 28 */
    color: #0b0b0b;
}

.feature-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* Figma: fontSize 14 */
    line-height: 20px;
    /* Figma: lineHeightPx 20 */
    color: #4a4a4a;
}

/* ============================================
   TRABAJA CON NOSOTROS SECTION - Figma node 27-637
   Title: 36px/40px Bold centered
   Subtitle: 18px/28px Regular centered
   Job cards: icon 40x40, title 18px Bold, description 14px
   ============================================ */
#trabaja {
    padding: 80px 0;
    background-color: #f5f5f5;
}

#trabaja .section-subtitle {
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 28px;
    /* Figma: lineHeightPx 28 */
}

.jobs-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 24px;
    /* Figma: fontSize 24 */
    line-height: 32px;
    /* Figma: lineHeightPx 32 */
    color: #0b0b0b;
    text-align: center;
    margin-bottom: 32px;
    /* Figma: itemSpacing 32 */
}

.jobs-grid {
    overflow: hidden;
    margin-bottom: 64px;
    /* Figma: itemSpacing 64 */
}

.jobs-grid:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Figma: 3 columns */
    gap: 24px;
    /* Figma: itemSpacing 24 */
}

.job-card {
    padding: 25px;
    /* Figma: padding 25 */
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
}

.job-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Figma: marginRight 12 */
    margin-bottom: 16px;
    /* Figma: itemSpacing 16 */
}

.job-icon {
    width: 40px;
    /* Figma: width 40 */
    height: 40px;
    /* Figma: height 40 */
    background-color: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    border-radius: 8px;
}

.job-icon svg {
    width: 18px;
    height: 16px;
}

.job-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 28px;
    /* Figma: lineHeightPx 28 */
    color: #0b0b0b;
    margin: 0;
}

.job-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* Figma: fontSize 14 */
    line-height: 20px;
    /* Figma: lineHeightPx 20 */
    color: #4a4a4a;
    margin-bottom: 16px;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: #4a4a4a;
}

.job-location {
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-location svg {
    width: 16px;
    height: 16px;
}

.job-type {
    padding: 4px 12px;
    background-color: #f5f5f5;
    font-size: 14px;
    line-height: 20px;
}

/* Application Form - Centered with max-width 768px */
.application-form-container {
    max-width: 768px;
    /* Figma: width 768 */
    margin: 0 auto;
    /* Centered */
    padding: 48px;
    /* Figma: padding 48 */
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
}

.form-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #0b0b0b;
    margin-bottom: 32px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.form-group,
.form-field {
    margin-bottom: 24px;
}

.form-group label,
.form-field label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #0b0b0b;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    border: 1px solid #d9d9d9;
    background-color: #ffffff;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #0b0b0b;
}

.form-group textarea,
.form-field textarea {
    resize: vertical;
}

/* CF7 form styles within contact form.
   NOTA: el bloc ACF (template-parts/blocks/contact-panel.php) genera
   .block-contact-form; .contact-form-container només existeix a la plantilla
   antiga template-parts/contacto.php; i .servicio-contacto__form és el
   formulari de la fitxa de servei (template-parts/servicio/contacto.php).
   Els selectors cobreixen els tres casos perquè els camps quedin estilats
   a tot arreu: sense l'embolcall corresponent, CF7 cau als estils per
   defecte del navegador (inputs de 20px, sense padding ni vores pròpies). */
/* L'acceptació queda fora: el seu <label> embolcalla casella i text. */
.block-contact-form .wpcf7-form label:not(.wpcf7-acceptance label),
.contact-form-container .wpcf7-form label:not(.wpcf7-acceptance label),
.servicio-contacto__form .wpcf7-form label:not(.wpcf7-acceptance label) {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #0b0b0b;
    margin-bottom: 20px;
}

.block-contact-form .wpcf7-form p,
.contact-form-container .wpcf7-form p,
.servicio-contacto__form .wpcf7-form p {
    margin: 0;
}

.block-contact-form .wpcf7-form .wpcf7-form-control,
.contact-form-container .wpcf7-form .wpcf7-form-control,
.servicio-contacto__form .wpcf7-form .wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
}

/* Les caselles i els radios no han d'estirar-se al 100%: han de conservar la
   seva mida nativa i quedar en línia amb el text de l'etiqueta. */
.block-contact-form .wpcf7-form input[type="checkbox"],
.block-contact-form .wpcf7-form input[type="radio"],
.contact-form-container .wpcf7-form input[type="checkbox"],
.servicio-contacto__form .wpcf7-form input[type="checkbox"],
.contact-form-container .wpcf7-form input[type="radio"],
.servicio-contacto__form .wpcf7-form input[type="radio"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 10px 0 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: #0b0b0b;
}

/* Acceptació de privacitat: la casella i el text van a la mateixa línia.
   Va sense prefix de contenidor a propòsit: els formularis del lloc posen
   `label { flex-direction: column }` per apilar etiqueta i camp, i aquesta
   regla també atrapava l'acceptació, deixant la casella sobre el text. Abans
   només estava resolt a tres contenidors concrets i qualsevol formulari nou
   tornava a sortir trencat. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    display: block;
    margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
}

/* La casella no s'ha d'encongir quan el text ocupa dues línies. */
.wpcf7-form .wpcf7-acceptance label>input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
}

/* El text de l'acceptació és un <span> block per defecte, cosa que el
   baixava a la línia de sota de la casella. Amb flex:1 comparteix línia i
   embolcalla dins de l'espai que queda a la dreta. */
.wpcf7-form .wpcf7-acceptance label .wpcf7-list-item-label {
    display: inline;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 20px;
}

/* Camps de text i selects: mateixa caixa que el textarea. Sense aquestes
   regles els inputs cauen als estils per defecte del navegador (border inset,
   padding 0, font-size 13.33px) i queden a ~20px d'alçada. font-size 16px
   evita a més el zoom automàtic d'iOS en enfocar el camp. */
.block-contact-form .wpcf7-form input[type="text"],
.block-contact-form .wpcf7-form input[type="email"],
.block-contact-form .wpcf7-form input[type="tel"],
.block-contact-form .wpcf7-form input[type="url"],
.block-contact-form .wpcf7-form input[type="number"],
.block-contact-form .wpcf7-form input[type="date"],
.block-contact-form .wpcf7-form select,
.contact-form-container .wpcf7-form input[type="text"],
.servicio-contacto__form .wpcf7-form input[type="text"],
.contact-form-container .wpcf7-form input[type="email"],
.servicio-contacto__form .wpcf7-form input[type="email"],
.contact-form-container .wpcf7-form input[type="tel"],
.servicio-contacto__form .wpcf7-form input[type="tel"],
.contact-form-container .wpcf7-form input[type="url"],
.servicio-contacto__form .wpcf7-form input[type="url"],
.contact-form-container .wpcf7-form input[type="number"],
.servicio-contacto__form .wpcf7-form input[type="number"],
.contact-form-container .wpcf7-form input[type="date"],
.servicio-contacto__form .wpcf7-form input[type="date"],
.contact-form-container .wpcf7-form select,
.servicio-contacto__form .wpcf7-form select {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0b0b0b;
    border: 1px solid #d9d9d9;
    background-color: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.block-contact-form .wpcf7-form input[type="text"]:focus,
.block-contact-form .wpcf7-form input[type="email"]:focus,
.block-contact-form .wpcf7-form input[type="tel"]:focus,
.block-contact-form .wpcf7-form input[type="url"]:focus,
.block-contact-form .wpcf7-form input[type="number"]:focus,
.block-contact-form .wpcf7-form input[type="date"]:focus,
.block-contact-form .wpcf7-form select:focus,
.contact-form-container .wpcf7-form input[type="text"]:focus,
.servicio-contacto__form .wpcf7-form input[type="text"]:focus,
.contact-form-container .wpcf7-form input[type="email"]:focus,
.servicio-contacto__form .wpcf7-form input[type="email"]:focus,
.contact-form-container .wpcf7-form input[type="tel"]:focus,
.servicio-contacto__form .wpcf7-form input[type="tel"]:focus,
.contact-form-container .wpcf7-form input[type="url"]:focus,
.servicio-contacto__form .wpcf7-form input[type="url"]:focus,
.contact-form-container .wpcf7-form input[type="number"]:focus,
.servicio-contacto__form .wpcf7-form input[type="number"]:focus,
.contact-form-container .wpcf7-form input[type="date"]:focus,
.servicio-contacto__form .wpcf7-form input[type="date"]:focus,
.contact-form-container .wpcf7-form select:focus,
.servicio-contacto__form .wpcf7-form select:focus {
    outline: none;
    border-color: #0b0b0b;
}

.block-contact-form .wpcf7-form textarea.wpcf7-textarea,
.contact-form-container .wpcf7-form textarea.wpcf7-textarea,
.servicio-contacto__form .wpcf7-form textarea.wpcf7-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    border: 1px solid #d9d9d9;
    background-color: #ffffff;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.block-contact-form .wpcf7-form textarea.wpcf7-textarea:focus,
.contact-form-container .wpcf7-form textarea.wpcf7-textarea:focus,
.servicio-contacto__form .wpcf7-form textarea.wpcf7-textarea:focus {
    outline: none;
    border-color: #0b0b0b;
}

.block-contact-form .wpcf7-form .form-row,
.contact-form-container .wpcf7-form .form-row,
.servicio-contacto__form .wpcf7-form .form-row {
    margin-bottom: 24px;
}

.block-contact-form .wpcf7-form .form-field,
.contact-form-container .wpcf7-form .form-field,
.servicio-contacto__form .wpcf7-form .form-field {
    margin-bottom: 0;
}

.block-contact-form .wpcf7-form>p,
.contact-form-container .wpcf7-form>p,
.servicio-contacto__form .wpcf7-form>p {
    margin-bottom: 24px;
}

.block-contact-form .wpcf7-form input.wpcf7-submit,
.contact-form-container .wpcf7-form input.wpcf7-submit,
.servicio-contacto__form .wpcf7-form input.wpcf7-submit {
    width: 100%;
    padding: 16px 32px;
    background-color: #0b0b0b;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.block-contact-form .wpcf7-form input.wpcf7-submit:hover,
.contact-form-container .wpcf7-form input.wpcf7-submit:hover,
.servicio-contacto__form .wpcf7-form input.wpcf7-submit:hover {
    background-color: #333;
}

.block-contact-form .wpcf7-spinner,
.contact-form-container .wpcf7-spinner,
.servicio-contacto__form .wpcf7-spinner {
    display: none;
}

.block-contact-form .wpcf7-form .wpcf7-not-valid-tip,
.contact-form-container .wpcf7-form .wpcf7-not-valid-tip,
.servicio-contacto__form .wpcf7-form .wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 13px;
    margin-top: 4px;
}

.block-contact-form .wpcf7-response-output,
.contact-form-container .wpcf7-response-output,
.servicio-contacto__form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
}

.block-contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form-container .wpcf7-form.invalid .wpcf7-response-output,
.servicio-contacto__form .wpcf7-form.invalid .wpcf7-response-output {
    border-color: #dc3232;
    color: #dc3232;
}

.block-contact-form .wpcf7-form.sent .wpcf7-response-output,
.contact-form-container .wpcf7-form.sent .wpcf7-response-output,
.servicio-contacto__form .wpcf7-form.sent .wpcf7-response-output {
    border-color: #46b450;
    color: #46b450;
}

.btn-submit {
    width: 100%;
    padding: 16px 32px;
    background-color: #0b0b0b;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background-color: #333;
}

/* ============================================
   CONTACTO SECTION - Figma node 27-808
   Title: Contacto 36px/40px Bold centered
   Subtitle: 18px/28px Regular centered
   Info: icon 48x48, label 16px Bold, value 16px Regular
   Map: embedded right side
   ============================================ */
#contacto {
    padding: 80px 0;
    background-color: #ffffff;
}

#contacto .section-header {
    margin-bottom: 32px;
}

#contacto .section-subtitle {
    font-size: 18px;
    line-height: 28px;
}

.contact-content {
    display: grid;
    grid-template-columns: 560px 1fr;
    /* Figma: info width 560 */
    gap: 32px;
    /* Figma: itemSpacing 32 */
}

.contact-info {
    padding: 33px;
    /* Figma: padding 33 */
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
}

.contact-info-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #0b0b0b;
    margin-bottom: 32px;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Figma: itemSpacing 32 */
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Figma: paddingLeft 16 */
}

.contact-icon {
    width: 48px;
    /* Figma: width 48 */
    height: 48px;
    /* Figma: height 48 */
    background-color: #0b0b0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    border-radius: 8px;
}

.contact-icon svg {
    width: 16px;
    height: 16px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* Figma: Bold */
    font-size: 16px;
    line-height: 24px;
    color: #0b0b0b;
}

.contact-value {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4a4a4a;
}

.contact-link {
    color: #0b0b0b;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact-link:hover {
    opacity: 0.7;
}

.contact-map {
    border: 1px solid #d9d9d9;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

/* CF7 Form Overrides - Remove br between label and input */
.application-form-container .wpcf7 br,
.block-contact-form .wpcf7 br,
.contact-form-container .wpcf7 br,
.servicio-contacto__form .wpcf7 br {
    display: none;
}

.application-form-container .wpcf7-form-control-wrap,
.block-contact-form .wpcf7-form-control-wrap,
.contact-form-container .wpcf7-form-control-wrap,
.servicio-contacto__form .wpcf7-form-control-wrap {
    display: block;
}

/* Contact Form Container.
   width:100% + max-width perquè el formulari s'adapti quan viu dins d'una
   graella estreta (servicios, trabaja-con-nosotros) en comptes de quedar
   fixat a 768px i desbordar-la. min-width:0 evita que el grid intern
   imposi una amplada mínima més gran que la del contenidor. */
.block-contact-form,
.contact-form-container,
.servicio-contacto__form {
    width: 100%;
    max-width: 768px;
    min-width: 0;
    margin: 48px auto 0;
    padding: 48px;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Dins d'una graella de dues columnes el formulari ja té la caixa del pare
   (.block-contact-grid): treiem la vora i el fons duplicats, que és el que
   dibuixava les línies verticals sobreposades darrere els camps. */
.block-contact-grid .block-contact-form,
.block-contact-grid .contact-form-container {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* ============================================
   FOOTER - Figma node 27-912
   Background: #454545 (dark gray - 0.2705)
   Padding: 64px vertical, 144px horizontal
   4 columns: Brand | Navegación | Servicios | Productos Inoxsis
   ============================================ */
.footer {
    background-color: #454545;
    /* Figma: color 0.2705 */
    padding: 64px 144px;
    /* Figma: padding 64 vertical, 144 horizontal */
}

.footer-container {
    max-width: 1152px;
    /* Figma: maxWidth 1152 */
    margin: 0 auto;
}

.footer-main {
    display: flex;
    gap: 48px;
    /* Figma: itemSpacing 48 */
    margin-bottom: 48px;
    /* Figma: itemSpacing 48 before bottom bar */
}

.footer-column {
    flex: 1;
}

.footer-brand {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.footer-logo {
    width: 113px;
    /* Figma: width 113 */
    height: 66px;
    /* Figma: height 66 */
    object-fit: contain;
    margin-bottom: 16px;
}

.footer-company {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin-bottom: 16px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Figma: itemSpacing 4 */
}

.footer-address,
.footer-nif {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* Figma: fontSize 14 */
    line-height: 20px;
    /* Figma: lineHeightPx 20 */
    color: #ffffff;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Figma: itemSpacing 4 */
    margin-top: 8px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Figma: itemSpacing 8 */
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-link:hover {
    opacity: 0.7;
}

.footer-link svg {
    width: 20px;
    height: 20px;
}

/* Footer Navigation Columns */
.footer-nav-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 18px;
    /* Figma: fontSize 18 */
    line-height: 28px;
    /* Figma: lineHeightPx 28 */
    color: #ffffff;
    margin-bottom: 24px;
    /* Figma: itemSpacing 24 */
}

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Figma: itemSpacing 12 */
}

.footer-nav-list li {
    padding: 2px 0;
}

.footer-nav-list a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* Figma: fontSize 14 */
    line-height: 20px;
    /* Figma: lineHeightPx 20 */
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-nav-list a:hover {
    opacity: 0.7;
}

/* Footer Products Column */
.footer-product-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    margin-bottom: 24px;
}

.footer-product-btn {
    display: inline-block;
    background-color: #ffffff;
    color: #0b0b0b;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    padding: 12px 24px;
    /* Mateix radi que .btn i la resta de botons del lloc. */
    border-radius: var(--radius);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-product-btn:hover {
    opacity: 0.9;
}

/* Footer Bottom Bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    /* Figma: paddingTop 32 */
    border-top: 1px solid rgba(229, 231, 235, 1);
    /* Figma: stroke 0.898, 0.905, 0.921 */
}

.footer-copyright {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
}

.footer-legal-links {
    display: flex;
    gap: 24px;
    /* Figma: itemSpacing 24 */
}

.footer-legal-links a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-legal-links a:hover {
    opacity: 0.7;
}

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

/* Tablet */
@media (max-width: 1200px) {
    .services-grid:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid:not(.swiper-initialized) .swiper-wrapper,
    body:not(.home) .block-services .swiper-wrapper {
        grid-auto-rows: 360px;
    }

    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .capabilities-grid .capability-card:last-child {
        grid-column: span 2;
    }

    .equipo-features-grid {
        flex-wrap: wrap;
    }

    .equipo-feature-item {
        flex: 1 1 calc(50% - 12px);
        min-width: 200px;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .inoxsis-text {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .footer-container {
        padding: 0 40px;
    }
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 32px;
        line-height: 38px;
    }

    .inoxsis-content {
        flex-direction: column;
    }

    .inoxsis-image img,
    .inoxsis-swiper .swiper-slide img {
        height: 300px;
    }

    .experience-block {
        flex-direction: column;
    }

    .experience-images {
        max-width: 100%;
    }

    .experience-stats-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .stat-divider {
        display: none;
    }

    .jobs-grid:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        /* El .header porta backdrop-filter quan es fa scroll, i això el
           converteix en containing block dels fills fixed: aleshores `bottom`
           es resol contra el header (64px) i el calaix quedava tallat just
           sota el primer enllaç. L'alçada explícita no depèn del containing
           block i el manté sencer tant si s'ha fet scroll com si no.
           `dvh` s'ajusta a la barra del navegador mòbil; vh és el fallback. */
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
        background-color: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 16px 0 40px;
        gap: 0;
        box-shadow: none;
        border-top: 1px solid #ececec;
        overflow-y: auto;
        z-index: 999;
        display: none;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links .nav-link {
        display: block;
        width: 100%;
        padding: 18px 24px;
        color: #0b0b0b;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 600;
        text-align: left;
        border-bottom: 1px solid #f1f1f1;
    }

    /* underline marker used on desktop nav items shouldn't show in the drawer */
    .nav-links .nav-link::after {
        display: none;
    }

    /* Al calaix mòbil el megamenú va en flux: els serveis pengen de l'entrada
       "Servicios" com una subllista sempre visible, sense hover ni overlay. */
    .nav-item--mega {
        display: block;
    }

    .nav-link-caret {
        display: none;
    }

    .mega-panel {
        position: static;
        width: auto;
        transform: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: #fbfbfb;
        border-bottom: 1px solid #f1f1f1;
    }

    .mega-panel::before {
        display: none;
    }

    .mega-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mega-item {
        padding: 14px 24px 14px 32px;
        border-left: 0;
        border-radius: 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .mega-col:last-child .mega-item:last-child {
        border-bottom: 0;
    }

    .mega-promo {
        margin: 16px 24px 20px;
        border-radius: var(--radius-sm);
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero {
        height: 600px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 34px;
    }

    .hero-title br,
    .hero-subtitle br {
        display: none;
    }

    .hero-subtitle {
        font-size: 16px;
        line-height: 24px;
    }

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

    .section {
        padding: 48px 0;
    }

    .section-title {
        font-size: 28px;
        line-height: 34px;
    }

    .services-grid:not(.swiper-initialized) .swiper-wrapper,
    body:not(.home) .block-services .swiper-wrapper {
        grid-template-columns: 1fr;
        grid-auto-rows: 350px;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    .capabilities-grid .capability-card:last-child {
        grid-column: span 1;
    }

    .equipo-features-grid {
        flex-direction: column;
    }

    .equipo-feature-item {
        flex: 1 1 100%;
    }

    .experience-image-grid:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: 1fr;
    }

    .features-grid {
        flex-wrap: wrap;
    }

    .features-grid .feature-item {
        flex: 1 1 calc(50% - 12px);
        min-width: calc(50% - 12px);
    }

    .jobs-grid:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .inoxsis-buttons {
        flex-direction: column;
    }

    .inoxsis-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .contact-info {
        padding: 24px;
    }

    .footer-container {
        padding: 0 24px;
    }

    .footer {
        padding: 64px 24px;
    }

    .footer-main {
        flex-direction: column;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .application-form-container {
        padding: 24px;
    }

    .experience-block {
        padding: 24px;
        gap: 32px;
    }

    .block-contact-form,
    .contact-form-container,
    .servicio-contacto__form {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
        line-height: 30px;
    }

    .btn {
        width: 100%;
    }

    .service-title {
        font-size: 20px;
        line-height: 28px;
    }

    .service-card-header {
        left: 16px;
        bottom: 16px;
    }

    .features-grid .feature-item {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* ============================================
   FIGMA LANDING FIDELITY OVERRIDES
   Keeps the flexible ACF blocks aligned with node 27:429.
   ============================================ */
@media (min-width: 769px) {
    .header-container {
        border-bottom: 1px solid rgba(217, 217, 217, 0.75);
    }

    #equipo .container,
    #trabaja .container,
    #contacto .container {
        max-width: var(--max-width-narrow);
    }

    .capability-card,
    .capability-icon,
    .experience-block,
    .job-card,
    .job-icon,
    .application-form-container,
    .contact-info,
    .contact-icon,
    .contact-map,
    .block-contact-form,
    .contact-form-container,
    .servicio-contacto__form {
        border-radius: 0;
    }

    .application-form-container {
        max-width: 896px;
        padding: 48px 192px;
        background: #d9d9d9;
        border: 0;
    }

    .application-form-container .form-title {
        text-align: center;
    }
}

@media (max-width: 1232px) {

    .container,
    .header-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .service-card-header {
        padding: 24px 24px 16px;
    }
}

/* ============================================
   FLEXIBLE CONTENT BLOCKS
   Shared blocks for page-templates/contingut-flexible.php.
   ============================================ */
.container-narrow {
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
}

.page-flexible .section:first-child {
    margin-top: 64px;
}

.page-flexible .block-hero:first-child {
    margin-top: 0;
}

.block-hero {
    position: relative;
    display: flex;
    min-height: 600px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
    margin-top: 64px;
}

/* Variants del camp ACF "variant" (group_content_blocks.json).
   - image:   hero principal, alçada gran (valor per defecte, = regla base).
   - compact: hero de pàgina interior, més baix perquè el contingut pugi.
   Sense aquestes regles el selector de l'editor no tenia cap efecte. */
.block-hero--image {
    min-height: 600px;
}

.block-hero--compact {
    min-height: 380px;
}

.block-hero--compact .block-hero-title {
    font-size: 40px;
    line-height: 46px;
}

.block-hero--compact .block-hero-subtitle {
    font-size: 16px;
    line-height: 24px;
}

@media (max-width: 768px) {
    .block-hero--compact {
        min-height: 280px;
    }

    .block-hero--compact .block-hero-title {
        font-size: 28px;
        line-height: 34px;
    }
}

.block-hero-media,
.block-hero-overlay {
    position: absolute;
    inset: 0;
}

.block-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-hero-overlay {
    background: rgba(0, 0, 0, 0.58);
}

.block-hero-inner {
    position: relative;
    z-index: 1;
    padding-top: 96px;
    padding-bottom: 96px;
    text-align: center;
}

.block-hero-title {
    max-width: 824px;
    margin: 0 auto;
    color: var(--color-white);
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
}

.block-hero-subtitle {
    max-width: 768px;
    margin: 24px auto 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 28px;
    text-align: center;
}

.block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

/* Al hero el contingut va centrat (.block-hero-inner té text-align:center),
   però .block-actions és flex i els botons no hereten l'alineació del text. */
.block-hero-inner .block-actions {
    justify-content: center;
}

.block-text-media-grid,
.block-stats-panel,
.block-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* Amb contenidor d'1152px, dues columnes fluïdes amb gap de 64 donen les
   mateixes 544px per columna que el Figma, però sense píxels fixos: el mateix
   grid encaixa a qualsevol amplada intermèdia sense regles de rescat. */
.block-text-media-grid {
    gap: 64px;
}

.block-text-media--left .block-media {
    order: -1;
}

.block-copy {
    max-width: 560px;
}

.block-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.block-title {
    margin: 0 0 24px;
    color: var(--color-black);
    font-size: 36px;
    line-height: 40px;
    font-weight: 700;
}

.block-richtext {
    color: var(--color-text-secondary);
    font-size: 18px;
    line-height: 29.25px;
}

.block-richtext p+p,
.block-richtext ul+p,
.block-richtext p+ul {
    margin-top: 24px;
}

.block-richtext ul {
    padding-left: 20px;
}

.block-copy .btn {
    margin-top: 32px;
}

.block-copy .block-actions .btn {
    margin-top: 0;
}

.block-media,
.block-card,
.block-process-step,
.block-contact-item,
.block-contact-form,
.block-map,
.block-gallery-item {
    border-radius: 0;
}

.block-media {
    overflow: hidden;
    background: var(--color-gray-border);
}

/* --- Llista de punts del bloc text+imatge -------------------------------
   Figma 103:8340: quadre negre de 48px amb la icona, i al costat títol de
   18px amb la descripció a sota en 14px. */
.block-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.block-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.block-feature-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: var(--color-black);
    color: var(--color-white);
}

.block-feature-icon svg {
    width: 16px;
    height: 16px;
}

.block-feature-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.block-feature-title {
    color: var(--color-text-primary);
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
}

.block-feature-text {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 22.75px;
}

.block-media img {
    width: 100%;
    aspect-ratio: 1.18;
    object-fit: cover;
}

.block-card-grid,
.block-process-grid,
.block-gallery-grid {
    display: grid;
    gap: 24px;
}

.block-card-grid {
    gap: 32px;
}

.block-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.block-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Els passos van tots en una fila: el nombre el posa el template a --steps.
   repeat() no accepta var() (cal un enter en temps de parseig), així que fem
   servir auto-fit amb una amplada calculada: 100% menys els N-1 gaps, dividit
   entre N. El fallback de 3 cobreix el cas que la variable no hi sigui. */
.block-process-grid {
    --process-gap: 32px;
    /* --cols-wanted: el que demana el disseny (per defecte, tots en una fila).
       --cols: el que s'acaba pintant, que als breakpoints es limita. */
    --cols-wanted: var(--steps, 3);
    --cols: var(--cols-wanted);
    grid-template-columns: repeat(auto-fit,
            calc((100% - (var(--cols) - 1) * var(--process-gap)) / var(--cols)));
}

.block-card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.block-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    color: inherit;
}

.block-card-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 24px;
    color: var(--color-black);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.block-card-image {
    width: calc(100% + 64px);
    max-width: none;
    height: 224px;
    margin: -32px -32px 28px;
    object-fit: cover;
}

.block-cards--compact .block-card {
    padding: 24px;
}

/* --- Presentació en panell (camp `panel`) -------------------------------
   Figma 103:8387: capçalera i targetes dins d'una caixa grisa amb vora, i les
   targetes hi van sense caixa pròpia, centrades i amb la icona a dalt. */
.block-cards--panel .block-cards-panel {
    padding: 48px;
    background: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
}

.block-cards--panel .block-cards-panel > .section-header {
    margin-bottom: 40px;
}

/* open: targetes sense caixa propia i centrades (Figma 103:8387) */
.block-cards--panel-open .block-card {
    padding: 0;
    background: transparent;
    border: 0;
    text-align: center;
    align-items: center;
}

.block-cards--panel-open .block-card-icon {
    margin-bottom: 16px;
}

.block-cards--panel-open .block-card-title {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 26px;
}

.block-cards--panel-open .block-card-text,
.block-cards--panel-open .block-card-text p {
    font-size: 14px;
    line-height: 22px;
}

/* bordered: vora negra de 2px, contingut a l'esquerra i l'enllac com a boto
   (Figma 103:9558). La primera targeta el porta ple i la segona amb vora. */
.block-cards--panel-bordered .block-card {
    padding: 32px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    text-align: left;
}

.block-cards--panel-bordered .block-card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    border-radius: 0;
}

.block-cards--panel-bordered .block-card-title {
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 32px;
}

.block-cards--panel-bordered .block-card-text,
.block-cards--panel-bordered .block-card-text p {
    font-size: 16px;
    line-height: 26px;
}

.block-cards--panel-bordered .block-card-link {
    display: inline-flex;
    /* La targeta es flex en columna: sense aixo el boto s'estiraria a tota
       l'amplada, i al Figma nomes ocupa el seu text. */
    align-self: flex-start;
    align-items: center;
    margin-top: 24px;
    padding: 12px 24px;
    color: var(--color-white);
    background: var(--color-black);
    border: 2px solid var(--color-black);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* La segona targeta duu el boto secundari: transparent amb vora. */
.block-cards--panel-bordered .block-card:nth-child(2) .block-card-link {
    color: var(--color-black);
    background: transparent;
}

/* Feedback en passar-hi el cursor. Tota la targeta es l'enllac, aixi que
   respon tant si el cursor es sobre el boto com sobre qualsevol altre punt.
   El negre s'aclareix (com fa .btn-primary) i el de vora s'omple. */
.block-cards--panel-bordered .block-card-link {
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.block-cards--panel-bordered .block-card:hover .block-card-link,
.block-cards--panel-bordered .block-card:focus-visible .block-card-link {
    background: #333;
    border-color: #333;
    color: var(--color-white);
}

.block-cards--panel-bordered .block-card:nth-child(2):hover .block-card-link,
.block-cards--panel-bordered .block-card:nth-child(2):focus-visible .block-card-link {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .block-cards--panel .block-cards-panel {
        padding: 24px;
    }
}

.block-card-icon,
.block-process-icon,
.block-contact-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: var(--color-gray-bg);
    color: var(--color-black);
}

.block-card-icon svg,
.block-process-icon svg,
.block-contact-icon svg {
    width: 24px;
    height: 24px;
}

/* Home (landing) - Figma frame 103:15921
   Estils de la portada, sota la classe de body `.home` (Polylang també la
   posa a les portades traduïdes). Només classes de bloc: res de nth-of-type
   (es trencava en reordenar blocs) ni de `.front-page` (classe que el body
   no porta mai en aquest tema). */
.home .block-hero:first-child {
    margin-top: 0;
    align-items: center;
    justify-content: center;
}

.home .block-hero:first-child .block-hero-media img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home .block-hero:first-child .block-hero-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.home .block-hero:first-child .block-hero-inner {
    width: 896px;
    max-width: calc(100% - 48px);
    padding: 0 24px;
    text-align: center;
}

.home .block-hero:first-child .block-hero-title {
    max-width: 834px;
    margin: 0 auto;
    font-size: 48px;
    line-height: 48px;
    text-align: center;
    text-shadow: 0 4px 2px rgba(0, 0, 0, 0.1), 0 10px 4px rgba(0, 0, 0, 0.04);
}

.home .block-hero:first-child .block-hero-subtitle {
    max-width: 768px;
    margin: 24px auto 0;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    text-align: center;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.06), 0 4px 2px rgba(0, 0, 0, 0.07);
}

.home .block-hero:first-child .block-actions {
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.home .block-hero:first-child .btn {
    padding: 12px 32px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.home .block-hero:first-child .btn-primary {
    background: var(--color-white);
    color: var(--color-black);
}

.home .block-hero:first-child .btn-secondary {
    background: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white);
}

/* Home: bloc d'estadístiques ("Compromiso, precisión y exigencia").
   Sense min-height fixa: el padding i el contingut donen l'alçada. */
.home .block-stats-media.section-white {
    padding: 96px 0;
    border-bottom: 0;
}

.home .block-stats-media.section-white .block-stats-panel {
    display: grid;
    /* fr amb la proporció 476/692 del Figma: exacte a 1232px i fluid per sota */
    grid-template-columns: minmax(0, 476fr) minmax(0, 692fr);
    gap: 64px;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
}

.home .block-stats-media.section-white .block-copy {
    max-width: 476px;
}

.home .block-stats-media.section-white .block-title {
    max-width: 430px;
    margin-bottom: 32px;
    font-size: 36px;
    line-height: 40px;
}

/* La home separa les estadístiques amb un filet superior, no amb columnes */
.home .block-stats-media.section-white .block-stat {
    padding-right: 0;
    border-right: 0;
}

/* Les estadistiques van totes en una sola fila, com a eminoxtech.com: flex
   sense embolcallar, aixi el nombre de columnes no depen de quantes n'hi ha.
   Cada bloc s'encongeix si cal en comptes de saltar a una segona fila. */
.home .block-stats-media.section-white .block-stats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 48px;
    margin-top: 48px;
    padding-top: 33px;
    border-top: 1px solid #e5e7eb;
}

.home .block-stats-media.section-white .block-stat {
    flex: 0 1 auto;
    min-width: 0;
}

/* L'etiqueta va en text normal, com a eminoxtech.com: 14px en gris, sense
   majuscules ni espaiat de lletra. */
.home .block-stats-media.section-white .block-stat span {
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

.home .block-stats-media.section-white .block-image-grid {
    gap: 16px;
}

.home .block-stats-media.section-white .block-image-grid img {
    height: 292px;
    aspect-ratio: auto;
    border: 1px solid #f3f4f6;
}

/* Home: serveis i text-media usen el contenidor ample de la landing */
.home .block-services .container,
.home .block-text-media .container {
    max-width: var(--max-width);
}

/* Home: bloc text + imatge (INOXSIS) */
.home .block-text-media {
    padding: 96px 0;
    overflow: hidden;
}

.home .block-text-media .block-text-media-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
}

.home .block-text-media .block-copy {
    max-width: 576px;
}

.home .block-text-media .block-media {
    position: relative;
    display: block;
    /* Proporció 576x432 del Figma en lloc d'alçada fixa: escala amb la columna */
    aspect-ratio: 4 / 3;
    min-height: 0;
    border: 1px solid var(--color-gray-border);
    overflow: visible;
}

.home .block-text-media .block-media::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 120px;
    height: 120px;
    background: #f3f4f6;
    z-index: 1;
}

.home .block-text-media .block-media img {
    position: relative;
    z-index: 2;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.home .block-text-media .btn {
    padding: 16px 32px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

/* ============================================
   BLOCS FLEXIBLES — VARIANTS GENÈRIQUES
   Substitueix els antics overrides per .page-id-20x + nth-of-type: cada
   estil penja de QUÈ és el bloc (classes de variant emeses pel PHP a partir
   dels camps ACF), no d'ON és. Així s'apliquen igual a qualsevol pàgina i
   idioma, i sobreviuen a reordenacions de blocs.
   Criteri de mides: cap alçada fixa de secció/targeta/camp — el contingut
   mana; les imatges usen aspect-ratio o alçades de crop; els iframes de
   mapa (sense mida intrínseca) porten min-height.
   ============================================ */

/* Contenidor estàndard dels blocs interiors (1152px). La home amplia el seu. */
.block-text-media .container,
.block-cards .container,
.block-process .container,
.block-gallery .container,
.block-services .container,
.block-faq .container {
    max-width: var(--max-width-narrow);
}

/* --- Services: graella estàtica (pàgines interiors) --------------------
   A la home les targetes són interactives amb cos de text; a la resta de
   pàgines la graella és estàtica, en gris i sense cos (la darrera targeta
   ocupa tota la fila i sí que mostra el text, per la regla de fidelitat). */
body:not(.home) .block-services .section-header {
    margin-bottom: 16px;
}

body:not(.home) .block-services .services-grid {
    margin-top: 16px;
}

/* La graella guanya sempre al layout inline de Swiper (si s'inicialitza).
   Mateixa graella de 3 columnes amb separadors que a la home. */
body:not(.home) .block-services .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 400px;
    gap: 1px;
    background-color: #d9d9d9;
    border: 1px solid #d9d9d9;
    transform: none !important;
}

body:not(.home) .block-services .swiper-slide {
    width: auto !important;
    margin: 0 !important;
}

body:not(.home) .block-services .services-pagination {
    display: none;
}

/* Sense targeta CTA el nombre de serveis pot no omplir la fila (p. ex. 5 en
   una graella de 3): l'última s'eixampla perquè no quedi un forat gris. */
.services-grid:not(.swiper-initialized) .swiper-wrapper>.swiper-slide:last-child:nth-child(3n + 2) {
    grid-column: span 2;
}

/* --- Cards: variants pel camp ACF `variant` + nombre de columnes -------- */

/* El text de la targeta és un camp WYSIWYG: arriba amb <p>, llistes i marcatge
   en línia. L'últim fill no ha de deixar marge inferior dins la targeta. */
.block-card-text>*:first-child {
    margin-top: 0;
}

.block-card-text>*:last-child {
    margin-bottom: 0;
}

.block-card-text ul,
.block-card-text ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.block-card-text li+li {
    margin-top: 4px;
}

.block-card-text a {
    color: inherit;
    text-decoration: underline;
}

/* standard: alineació esquerra, icona negra 64px */
.block-cards--standard .block-card-icon {
    width: 64px;
    height: 64px;
    background: var(--color-black);
    color: var(--color-white);
}

/* standard centrat: franja de valors amb icona gran. A 4 columnes (franja de
   valors) i a 3 amb el modificador --centered, que es el que fa el bloc "Por
   que confiar en Eminox Tech" (Figma 103:7480). */
.block-cards--standard .block-card-grid--4 .block-card,
.block-cards--standard.block-cards--centered .block-card {
    padding: 33px;
    text-align: center;
}

.block-cards--standard .block-card-grid--4 .block-card-icon,
.block-cards--standard.block-cards--centered .block-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.block-cards--standard .block-card-grid--4 .block-card-icon svg,
.block-cards--standard.block-cards--centered .block-card-icon svg {
    width: 30px;
    height: 30px;
}

/* El titol i el text hi van centrats i una mica mes grans (Figma 103:7486). */
.block-cards--centered .block-card-title {
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 32px;
}

.block-cards--centered .block-card-text,
.block-cards--centered .block-card-text p {
    font-size: 16px;
    line-height: 26px;
}

/* compact: targetes centrades amb icona negra petita */
.block-cards--compact .block-card {
    padding: 24px;
    text-align: center;
}

.block-cards--compact .block-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: var(--color-black);
    color: var(--color-white);
}

.block-cards--compact .block-card-title {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 24px;
}

.block-cards--compact .block-card-text,
.block-cards--compact .block-card-text p {
    font-size: 13px;
    line-height: 18px;
}

/* compact a 4 columnes sobre blanc: targetes-cita amb filet esquerre */
.block-cards--compact.section-white .block-card-grid--4 {
    gap: 24px;
}

.block-cards--compact.section-white .block-card-grid--4 .block-card {
    padding: 0 0 0 28px;
    border: 0;
    border-left: 4px solid var(--color-black);
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.block-cards--compact.section-white .block-card-grid--4 .block-card-icon {
    display: none;
}

.block-cards--compact.section-white .block-card-grid--4 .block-card-title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 28px;
}

.block-cards--compact.section-white .block-card-grid--4 .block-card-text,
.block-cards--compact.section-white .block-card-grid--4 .block-card-text p {
    font-size: 14px;
    line-height: 20px;
}

/* image: imatge a sang a dalt */
.block-cards--image .block-card {
    padding: 28px;
}

.block-cards--image .block-card-image {
    width: calc(100% + 56px);
    height: 224px;
    margin: -28px -28px 28px;
}

.block-cards--image .block-card-title {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 32px;
}

.block-cards--image .block-card-text,
.block-cards--image .block-card-text p {
    font-size: 14px;
    line-height: 20px;
}

/* --- Text + media -------------------------------------------------------- */
.block-text-media .block-copy {
    align-self: center;
}

.block-text-media .block-media {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-border);
    /* Fons gris subtil: si el bloc no té imatge, la caixa no queda blanca */
    background: var(--color-gray-bg);
}

.block-text-media .block-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 544 / 500;
    object-fit: cover;
}

/* --- Stats media: variants derivades del contingut (vegeu stats-media.php) --
   --open:  sense estadístiques; dues columnes obertes sobre el fons de secció.
   --panel: amb estadístiques; caixa grisa amb vora i fila d'indicadors. */
.block-stats-media--open .block-stats-panel {
    padding: 0;
    border: 0;
    background: transparent;
    gap: 64px;
}

.block-stats-media--open .block-image-grid img {
    border: 1px solid var(--color-gray-border);
}

.block-stats-media--panel .block-stats-panel {
    padding: 48px;
    border: 1px solid var(--color-gray-border);
    background: var(--color-gray-bg);
}

.block-stats-media--panel .block-title {
    font-size: 30px;
    line-height: 36px;
}

/* En línia i sense embolcallar, com la fila de la home: amb grid de 3
   columnes la quarta estadística saltava a una segona fila. En flex cada
   bloc s'encongeix si cal, així el nombre de columnes no depèn de quantes
   n'hi hagi (ara en són 4; amb 5 seguiria funcionant). */
.block-stats-media--panel .block-stats-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    gap: 24px;
    margin-top: 32px;
}

.block-stats-media--panel .block-stat {
    flex: 0 1 auto;
    min-width: 0;
}

.block-stats-media--panel .block-stat {
    padding-right: 24px;
    border-right: 1px solid var(--color-gray-border);
}

.block-stats-media--panel .block-stat:last-child {
    padding-right: 0;
    border-right: 0;
}

.block-stats-media--panel .block-stat span {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 20px;
}

.block-stats-media--panel .block-image-grid img {
    border: 1px solid var(--color-gray-border);
}

/* --- Process: la graella deriva del nombre de passos ---------------------
   Cas general (qualsevol N): una fila de N columnes, passos centrats. Els
   modificadors --steps-N de sota són excepcions amb disseny propi. */
.block-process-grid {
    gap: var(--process-gap);
}

/* Amb 5 passos la fila la dona ja la regla genèrica; aquí només hi ha la
   variant visual: número gran, sense icona i tipografia més compacta. */
.block-process-grid--steps-5 .block-process-step {
    padding: 34px;
    text-align: center;
}

.block-process-grid--steps-5 .block-process-number {
    /* Aquesta variant du el número dins la targeta, no a la cantonada. */
    position: static;
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 24px;
    line-height: 1;
}

.block-process-grid--steps-5 .block-process-icon {
    display: none;
}

.block-process-grid--steps-5 .block-process-step h3 {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 28px;
}

.block-process-grid--steps-5 .block-process-step p {
    font-size: 14px;
    line-height: 20px;
}

/* Excepció de disseny: amb 6 passos volem 2 columnes amples a totes les
   amplades, no una fila de 6. */
.block-process-grid--steps-6 {
    --cols-wanted: 2;
}

.block-process-grid--steps-6 .block-process-step {
    padding: 40px;
}

/* Tauleta: limitem les columnes que demana el disseny, sense trepitjar les
   excepcions (que ja han ajustat --cols-wanted). */
@media (max-width: 1024px) {
    .block-process-grid {
        --cols: min(var(--cols-wanted), 3);
    }

    /* Amb 4 passos, 2x2 reparteix millor que no pas 3+1. */
    .block-process-grid--steps-4 {
        --cols: 2;
    }
}

/* --- Gallery: aparador (una sola peça destacada) -------------------------
   Disseny actual: només es mostra la primera imatge, a tota l'amplada.
   Pendent d'un camp ACF d'estil per reactivar la graella múltiple. */
.block-gallery .section-header {
    margin-bottom: 48px;
}

.block-gallery-grid {
    display: block;
}

.block-gallery-item {
    border: 1px solid var(--color-gray-border);
}

.block-gallery-item:not(:first-child) {
    display: none;
}

.block-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.block-gallery-item figcaption {
    padding: 32px;
    color: var(--color-black);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

@media (max-width: 768px) {

    /* El 3:1 d'escriptori queda massa esclafat en pantalles estretes */
    .block-gallery-item img {
        aspect-ratio: 4 / 3;
    }

    .block-gallery-item figcaption {
        padding: 20px;
        font-size: 18px;
        line-height: 26px;
    }
}

/* --- FAQ ----------------------------------------------------------------- */
.block-faq .faq-item {
    padding: 24px;
}

.block-faq .faq-question {
    font-size: 18px;
    line-height: 28px;
}

.block-faq .faq-answer {
    font-size: 14px;
    line-height: 22px;
}

/* --- Contact: variants derivades del contingut (vegeu contact-panel.php) --
   --split:    info + formulari en dues columnes, mapa a sota (base).
   --form:     només formulari, centrat en caixa.
   --info-map: caixa d'informació i mapa costat a costat. */

/* Formulari sol */
.block-contact--form .section-header {
    margin-bottom: 48px;
}

/* Dos formularis seguits: filet separador perquè no es llegeixin com un de sol */
.block-contact--form+.block-contact--form {
    border-top: 1px solid var(--color-gray-border);
}

.block-contact--form .block-contact-grid {
    display: block;
}

.block-contact--form .block-contact-info {
    display: none;
}

.block-contact--form .block-contact-form {
    max-width: 1068px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid var(--color-gray-border);
    background: var(--color-white);
}

.block-contact--form .wpcf7-form>p {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
    margin: 0;
}

.block-contact--form .wpcf7-form br {
    display: none;
}

/* L'acceptació queda fora: el seu <label> embolcalla la casella i el text i
   ha d'anar en una sola línia, no apilat com els altres camps. */
.block-contact--form .wpcf7-form label:not(.wpcf7-acceptance label) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-black);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

/* Camps grans i acceptació/enviament a tota l'amplada — derivat de
   l'estructura del camp (:has), no de la seva posició al formulari */
.block-contact--form .wpcf7-form label:has(textarea),
.block-contact--form .wpcf7-form label:has(input[type="file"]),
.block-contact--form .wpcf7-form .wpcf7-acceptance,
.block-contact--form .wpcf7-form .wpcf7-submit {
    grid-column: 1 / -1;
}

.block-contact--form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.block-contact--form .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.block-contact--form .wpcf7-form select,
.block-contact--form .wpcf7-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-border);
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 24px;
}

.block-contact--form .wpcf7-form input::placeholder,
.block-contact--form .wpcf7-form textarea::placeholder {
    color: #6b7280;
    font-size: 14px;
    opacity: 1;
}

.block-contact--form .wpcf7-form textarea {
    min-height: 150px;
    resize: vertical;
}

.block-contact--form .form-help {
    display: block;
    margin-top: 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

.block-contact--form .wpcf7-acceptance {
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}

/* L'alineació de la casella i el text la porta la regla compartida de
   .wpcf7-acceptance; aquí només hereten mides i color del contenidor. */
.block-contact--form .wpcf7-acceptance label .wpcf7-list-item-label {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* `input.wpcf7-submit` (regla genèrica del formulari en dues columnes) té més
   especificitat i hi posa width:100%; aquí cal igualar-la per centrar el botó. */
.block-contact--form .wpcf7-form input.wpcf7-submit {
    justify-self: center;
    width: auto;
    min-width: 240px;
    margin: 0;
    padding: 16px 48px;
    border: 0;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
}

/* Comportament heretat del disseny: el feedback global de CF7 queda ocult
   (els errors es mostren camp a camp) */
.block-contact--form .wpcf7-spinner,
.block-contact--form .wpcf7-response-output {
    display: none;
}

/* Info + mapa */
.block-contact--info-map .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
    align-items: stretch;
}

.block-contact--info-map .section-header {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.block-contact--info-map .block-contact-grid {
    display: block;
    padding: 32px;
    border: 1px solid var(--color-gray-border);
    background: var(--color-white);
}

.block-contact--info-map .block-contact-form {
    display: none;
}

.block-contact-info-title {
    margin: 0 0 24px;
    color: var(--color-black);
    font-size: 24px;
    line-height: 32px;
}

.block-contact--info-map .block-contact-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.block-contact--info-map .block-contact-item strong {
    font-size: 16px;
    line-height: 24px;
}

.block-contact--info-map .block-map {
    margin: 0;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid var(--color-gray-border);
    background: var(--color-gray-bg);
}

.block-contact--info-map .block-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
}

@media (max-width: 1024px) {
    .block-contact--info-map .container {
        display: block;
    }

    .block-contact--info-map .section-header {
        margin-bottom: 32px;
    }

    .block-contact--info-map .block-map {
        margin-top: 32px;
        min-height: 360px;
    }

    .block-contact--info-map .block-map iframe {
        min-height: 360px;
    }

    .block-contact--form .block-contact-form {
        padding: 32px 20px;
    }
}

@media (max-width: 768px) {
    .block-contact--form .wpcf7-form input.wpcf7-submit {
        width: 100%;
        min-width: 0;
    }
}

/* Blog listing - Figma frame 103:16636 */
.blog-listing .hero-page {
    height: 400px;
}

.blog-listing .blog-section {
    padding: 80px 0;
}

.blog-listing .blog-section .container {
    max-width: 1232px;
}

/* El Figma posa la cerca i les pastilles una al costat de l'altra sense cap
   separació (705.64 + 526.36 = 1232, l'amplada sencera), i quedaven
   enganxades. Aquí la cerca s'encongeix per deixar-hi 32px pel mig. */
.blog-listing .blog-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.blog-listing .blog-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 705.64px;
    margin-bottom: 0;
}

/* Les pastilles mantenen la mida i no s'encongeixen. */
.blog-listing .blog-categories {
    flex: 0 0 auto;
}

.blog-listing .blog-search-input-wrap {
    height: 52px;
}

.blog-listing .blog-search-input {
    height: 52px;
    border: 2px solid var(--color-gray-border);
}

.blog-listing .blog-search-btn {
    display: none;
}

.blog-listing .blog-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: flex-end;
}

.blog-listing .blog-category-pill[href*="sense-categoria"],
.blog-listing .blog-category-pill[href*="uncategorized"] {
    display: none;
}

/* Pastilles de categoria (Figma 103:16657): fons blanc i text negre; només
   l'activa va en negre ple. */
.blog-listing .blog-category-pill {
    height: 40px;
    padding: 10px 22px;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-border);
}

.blog-listing .blog-category-pill:hover {
    border-color: var(--color-black);
}

.blog-listing .blog-category-pill.active {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.blog-listing .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.blog-listing .blog-card {
    height: 454.25px;
    border: 2px solid var(--color-gray-border);
    overflow: hidden;
}

.blog-listing .blog-card-image {
    height: 208px;
}

.blog-listing .blog-card-content {
    height: 242.25px;
    padding: 24px;
}

.blog-listing .blog-card-title {
    font-size: 20px;
    line-height: 25px;
}

.blog-listing .blog-card-excerpt {
    font-size: 14px;
    line-height: 22.75px;
}

.blog-listing .blog-pagination {
    margin-top: 48px;
}

.blog-listing .blog-pagination .nav-links {
    align-items: center;
}

/* Botó "Carregar més articles" (Figma 103:16808), centrat sota la graella. */
.blog-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* Sense això, el display:flex de sobre guanya al [hidden]{display:none} del
   navegador i el botó es continuaria veient quan ja no queden articles. */
.blog-loadmore[hidden] {
    display: none;
}

/* El botó segueix el mateix criteri que les pastilles i que la resta de
   botons amb vora del lloc: 2px negres sobre blanc (Figma 103:16808). */
.blog-loadmore-btn {
    min-width: 233px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
}

.blog-loadmore-btn:hover {
    color: var(--color-white);
    background-color: var(--color-black);
}

.blog-loadmore-btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

/* Targetes fantasma mentre carrega. Comparteixen mides amb .blog-card perquè
   la graella no faci cap salt en substituir-les pel contingut real. */
/* Comparteix la vora de 2px de les targetes reals, així la graella no canvia
   de forma quan arriba el contingut. */
.blog-card--skeleton {
    pointer-events: none;
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-border);
}

.skeleton-box,
.skeleton-line {
    position: relative;
    overflow: hidden;
    background: var(--color-gray-bg);
}

.blog-card--skeleton .blog-card-image {
    display: block;
}

.skeleton-line {
    height: 12px;
    margin-bottom: 10px;
    border-radius: 2px;
}

.skeleton-line--meta {
    width: 60%;
    height: 10px;
    margin-bottom: 18px;
}

.skeleton-line--title {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-line--short {
    width: 65%;
}

/* El reflex que recorre les caselles. Amb "reduce motion" es queda quiet i
   només es veu el bloc gris. */
.skeleton-box::after,
.skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: eminox-skeleton 1.4s ease-in-out infinite;
}

@keyframes eminox-skeleton {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .skeleton-box::after,
    .skeleton-line::after {
        animation: none;
    }
}

/* Servicio singles - base structure from Figma service frames */
.single-servicio .servicio-hero {
    height: 600px;
}

.single-servicio .servicio-estadisticas {
    padding: 32px 0;
}

.single-servicio .servicio-estadisticas.section {
    padding: 24px 0;
}

.single-servicio .servicio-estadisticas__item {
    padding: 18px 24px;
}

.block-card-title,
.block-process-step h3 {
    margin: 0 0 12px;
    color: var(--color-black);
    font-size: 22px;
    line-height: 28px;
}

.block-card-text,
.block-card-text p,
.block-process-step p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 26px;
}

/* Entre paràgrafs del WYSIWYG sí que hi ha d'haver separació. */
.block-card-text p+p {
    margin-top: 1em;
}

.block-services .service-card-placeholder {
    background: var(--color-gray-border);
}

/* Figma 103:8285: targeta amb vora negra fina, contingut alineat a l'esquerra
   amb 34px d'encoixinat, i el número dins d'un quadre negre de 40px que va a
   cavall de la cantonada superior esquerra (y=-20, és a dir, mig a fora). */
.block-process-step {
    position: relative;
    padding: 34px;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    text-align: left;
}

.block-process-number {
    position: absolute;
    top: -20px;
    left: 32px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--color-white);
    background: var(--color-black);
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
}

.block-stats-panel {
    padding: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
}

/* Sobre secció blanca, la caixa d'estadístiques es distingeix amb un fons
   gris. La variant --open, però, va sense caixa (dues columnes obertes sobre
   el fons de secció), així que se n'exclou: si no, aquesta regla guanyava per
   ordre al `background: transparent` de --open i hi tornava a posar el gris. */
.section-white .block-stats-media:not(.block-stats-media--open) .block-stats-panel {
    background: var(--color-gray-bg);
    border: 0;
}

.block-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.block-stat strong {
    display: block;
    color: var(--color-black);
    font-size: 36px;
    line-height: 40px;
}

.block-stat span {
    display: block;
    margin-top: 8px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 20px;
}

/* La graella d'imatges de stats-media porta marcatge Swiper: a escriptori
   el carrusel no s'inicialitza i és el .swiper-wrapper qui fa de graella;
   a <=768px initSwipers() pren el control i passa a carrusel. La regla de
   sota es manté per si algun marcatge antic encara posa les <img> com a
   filles directes. */
.block-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.block-image-grid.swiper {
    display: block;
    overflow: hidden;
    /* Guard: dins d'una graella, un swiper inicialitzat no pot forçar
       l'amplada del track (min-width:auto) ni créixer sense límit. */
    min-width: 0;
    max-width: 100%;
}

.block-image-grid .swiper-slide {
    max-width: 100%;
}

.block-image-grid.swiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.block-image-grid img,
.block-image-grid .swiper-slide img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* Figma 103:8422: el negre va a la secció sencera, a tota amplada, i el
   contingut es queda centrat a 896px (container-narrow). El panell, per tant,
   ja no és una caixa: només centra el text. */
.block-cta {
    padding: 80px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.block-cta-panel {
    padding: 0;
    background: transparent;
    color: var(--color-white);
    text-align: center;
}

.block-cta-panel h2 {
    margin: 0;
    color: var(--color-white);
    font-size: 36px;
    line-height: 44px;
}

.block-cta-panel p {
    max-width: 640px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 26px;
}

.block-cta-panel .block-actions {
    justify-content: center;
}

/* Sobre el fons negre, .btn-primary quedava invisible (negre sobre negre) i
   .btn-outline hi portava la vora negra. Figma 103:8429/8431: el primer és
   blanc ple amb text negre i el segon transparent amb vora blanca de 2px. */
.block-cta-panel .btn-primary {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 2px solid var(--color-white);
}

.block-cta-panel .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--color-black);
    opacity: 1;
}

.block-cta-panel .btn-outline {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.block-cta-panel .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    opacity: 1;
}

.block-contact .container {
    max-width: var(--max-width-narrow);
}

.block-contact-grid {
    align-items: stretch;
}

.block-contact-info,
.block-contact-form {
    min-width: 0;
}

.block-contact-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-gray-border);
}

.block-contact-item:first-child {
    padding-top: 0;
}

.block-contact-item strong {
    display: block;
    color: var(--color-black);
    font-size: 18px;
    line-height: 24px;
}

/* El valor és un camp WYSIWYG: la separació respecte del títol la posa
   l'embolcall, i els fills en van sense marge per no acumular-hi espai. */
.block-contact-value {
    margin-top: 6px;
}

.block-contact-item p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 26px;
}

.block-contact-value>*:first-child {
    margin-top: 0;
}

.block-contact-value>*:last-child {
    margin-bottom: 0;
}

.block-contact-value p+p {
    margin-top: 1em;
}

.block-contact-value ul,
.block-contact-value ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.block-contact-value a {
    color: inherit;
}

.block-contact-form {
    padding: 32px;
    background: var(--color-gray-bg);
}

.eminox-fallback-form {
    display: grid;
    gap: 16px;
}

.eminox-fallback-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.eminox-fallback-form label {
    display: grid;
    gap: 8px;
    color: var(--color-black);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.eminox-fallback-form input,
.eminox-fallback-form select,
.eminox-fallback-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-gray-border);
    border-radius: 0;
    background: var(--color-white);
    color: var(--color-black);
    font: inherit;
}

.eminox-fallback-form textarea {
    resize: vertical;
}

.eminox-fallback-form .btn {
    width: 100%;
}

.block-map {
    margin-top: 48px;
    overflow: hidden;
    background: var(--color-gray-bg);
}

.block-map iframe {
    display: block;
    width: 100%;
    border: 0;
}

.faq-accordion {
    border-top: 1px solid var(--color-gray-border);
}

.faq-item {
    border-bottom: 1px solid var(--color-gray-border);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    background: transparent;
    border: 0;
    color: var(--color-black);
    font: inherit;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.faq-chevron {
    flex: 0 0 auto;
}

.faq-answer {
    padding: 0 0 24px;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 26px;
}

/* (Els estils de .block-gallery viuen a "BLOCS FLEXIBLES — VARIANTS
   GENÈRIQUES": presentació d'aparador d'una sola peça.) */
.block-gallery-item {
    overflow: hidden;
}

@media (max-width: 1024px) {

    .block-card-grid--4,
    .block-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .block-text-media-grid,
    .block-stats-panel,
    .block-contact-grid {
        grid-template-columns: 1fr;
    }

    .block-text-media--left .block-media {
        order: 0;
    }
}

@media (max-width: 768px) {

    .page-flexible .section:first-child,
    .block-hero {
        margin-top: 64px;
    }

    .block-hero-inner {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .block-hero-title {
        font-size: 40px;
        line-height: 46px;
    }

    .block-hero-subtitle {
        font-size: 16px;
        line-height: 26px;
    }

    .block-title {
        font-size: 32px;
        line-height: 38px;
    }

    .block-card-grid--2,
    .block-card-grid--3,
    .block-card-grid--4,
    .block-process-grid,
    .block-gallery-grid,
    .block-stats-row {
        grid-template-columns: 1fr;
    }

    /* Les files d'estadistiques son flex: aqui grid-template-columns no els fa
       res, cal deixar-les embolcallar. El nowrap d'escriptori (pensat perque
       la quarta xifra no saltes de fila) en mobil escanyava la fila: a Empresa
       deixava l'ultima estadistica a 39px d'ample amb 61px de contingut i li
       retallava l'etiqueta.

       Dues columnes fixes en comptes de wrap lliure: amb wrap la home queia en
       3+1, que quedava desmanegat. Amb flex-basis calculat sobre el gap de
       32px en surten dues per fila i una graella regular (2x2 a la home, 2+1 a
       Empresa). */
    .home .block-stats-media.section-white .block-stats-row,
    .block-stats-media--panel .block-stats-row {
        flex-wrap: wrap;
        gap: 24px 32px;
    }

    .home .block-stats-media.section-white .block-stat,
    .block-stats-media--panel .block-stat {
        flex: 0 0 calc((100% - 32px) / 2);
        min-width: 0;
    }

    /* El filet separador nomes te sentit entre les dues columnes d'una fila:
       a la de la dreta sobra, com hi sobrava a l'ultima de la fila unica. */
    .block-stats-media--panel .block-stat:nth-child(2n) {
        padding-right: 0;
        border-right: 0;
    }

    .block-card,
    .block-process-step,
    .block-stats-panel,
    .block-contact-form,
    .block-cta-panel {
        padding: 24px;
    }

    .eminox-fallback-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .block-card-image {
        width: calc(100% + 48px);
        height: 216px;
        margin: -24px -24px 24px;
    }

    .block-actions {
        width: 100%;
    }

    .block-actions .btn {
        width: 100%;
    }
}

/* ============================================
   SWIPER OVERRIDES
   ============================================ */

/* Pagination dots - estil personalitzat */
.experience-pagination,
.jobs-pagination,
.services-pagination,
.inoxsis-pagination {
    position: relative;
    margin-top: 24px;
    text-align: center;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--color-gray-border);
    opacity: 1;
    margin: 0 4px;
}

.swiper-pagination-bullet-active {
    background: var(--color-black);
}

/* Ocultar pagination en desktop per sliders responsive-only */
.experience-pagination,
.jobs-pagination,
.services-pagination {
    display: none;
}

/* Mostrar pagination quan Swiper està actiu (mobile) */
@media (max-width: 768px) {

    .experience-pagination,
    .jobs-pagination,
    .services-pagination {
        display: block;
    }
}

/* INOXSIS pagination sempre visible */
.inoxsis-pagination {
    display: block;
}


/* Swiper slide height auto per cards */
.capabilities-swiper .swiper-slide,
.jobs-swiper .swiper-slide,
.services-swiper .swiper-slide {
    height: auto;
}

/* ============================================
   ANIMATIONS
   ============================================ */
.scroll-animate {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   HERO PAGE (Inner Pages)
   Height: 400px, overlay 40%, centred content
   ============================================ */
.hero-page {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0 60px;
}

.hero-page-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.hero-page-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 768px;
    margin: 0 auto;
}

.hero-page-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.hero-page-breadcrumbs a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.hero-page-breadcrumbs a:hover {
    color: #ffffff;
    opacity: 1;
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb-current {
    color: #ffffff;
}

.hero-page-title {
    font-size: 36px;
    line-height: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.hero-page-subtitle {
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 672px;
}

/* ============================================
   BLOG LISTING (home.php)
   ============================================ */

/* --- Filters --- */
.blog-filters {
    margin-bottom: 48px;
}

.blog-search {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.blog-search-input-wrap {
    position: relative;
    flex: 1;
}

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

.blog-search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-primary);
    border: 1px solid var(--color-gray-border);
    background-color: var(--color-white);
    outline: none;
    transition: border-color var(--transition-fast);
}

.blog-search-input:focus {
    border-color: var(--color-black);
}

.blog-search-input::placeholder {
    color: #999;
}

.blog-search-btn {
    flex-shrink: 0;
}

/* Category pills */
.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    /* Les targetes, el botó de cercar i el de carregar més van tots a
       var(--radius); les pastilles eren l'única cosa de la fila que quedava
       amb cantonades vives. */
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.blog-category-pill:hover,
.blog-category-pill.active {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
}

/* --- Blog Grid --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.blog-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.blog-card-image-link {
    display: block;
    position: relative;
    overflow: hidden;
}

.blog-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-bg);
    color: var(--color-gray-border);
}

.blog-card-category {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 12px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-white);
    background-color: var(--color-black);
    z-index: 2;
}

.blog-card-content {
    padding: 24px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.blog-card-date {
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-secondary);
}

.blog-card-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-secondary);
}

.blog-card-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.blog-card-title a {
    color: inherit;
}

.blog-card-title a:hover {
    opacity: 0.8;
}

.blog-card-excerpt {
    font-size: 15px;
    line-height: 24px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
    transition: gap var(--transition-fast);
}

.blog-card-link:hover {
    gap: 10px;
    opacity: 1;
}

/* --- Pagination --- */
.blog-pagination {
    display: flex;
    justify-content: center;
}

.blog-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 8px 14px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    transition: all var(--transition-fast);
}

.blog-pagination .page-numbers:hover {
    background-color: var(--color-gray-bg);
    border-color: var(--color-black);
    color: var(--color-text-primary);
    opacity: 1;
}

.blog-pagination .page-numbers.current {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.blog-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
}

.blog-pagination .page-numbers.dots:hover {
    background: transparent;
    border: none;
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    gap: 6px;
}

.blog-pagination .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* --- No Results --- */
.blog-no-results {
    text-align: center;
    padding: 80px 24px;
    color: var(--color-text-secondary);
}

.blog-no-results svg {
    margin-bottom: 24px;
    color: var(--color-gray-border);
}

.blog-no-results-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
}

.blog-no-results-text {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */
/* Butlletí (Figma 103:16810): panell blanc amb marc negre sobre fons gris,
   tot centrat en una sola columna. */
.section-newsletter {
    background-color: var(--color-gray-bg);
    padding: 80px 0;
}

.newsletter-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 896px;
    margin: 0 auto;
    padding: 50px;
    text-align: center;
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
}

.newsletter-title {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    color: var(--color-black);
}

.newsletter-subtitle {
    max-width: 672px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-secondary);
}

.newsletter-fallback-form,
.newsletter-form {
    width: 100%;
    max-width: 512px;
    padding-top: 16px;
}

.newsletter-input-group {
    display: flex;
    gap: 16px;
}

/* El Figma dona 52px d'alçada per al camp i el botó; amb el coixí de disseny
   i la nostra interlínia en sortirien 60, així que la fixem. */
.newsletter-input-group input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-primary);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-border);
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter-input-group input[type="email"]::placeholder {
    color: #9ca3af;
}

.newsletter-input-group input[type="email"]:focus {
    border-color: var(--color-black);
}

.newsletter-input-group .btn-primary {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 32px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-white);
    background-color: var(--color-black);
}

.newsletter-input-group .btn-primary:hover {
    background-color: var(--color-text-primary);
}

.newsletter-privacy {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-secondary);
}

.newsletter-privacy a {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.newsletter-privacy a:hover {
    color: var(--color-black);
}

/* ============================================
   SINGLE POST (single.php)
   ============================================ */

/* --- Single Hero modifiers --- */
.hero-page--single {
    padding: 140px 0 64px;
}

.hero-page--single .hero-page-content {
    max-width: 900px;
}

.hero-page--single .hero-page-title {
    font-size: 40px;
    line-height: 48px;
}

.single-post-category-badge {
    display: inline-block;
    padding: 4px 14px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 16px;
    transition: background-color var(--transition-fast);
}

.single-post-category-badge:hover {
    background-color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

/* --- Post meta in hero --- */
.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.single-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.single-post-author-name {
    font-weight: 500;
    color: var(--color-white);
}

.single-post-meta-sep {
    color: rgba(255, 255, 255, 0.4);
}

.single-post-date {
    color: rgba(255, 255, 255, 0.8);
}

.single-post-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.8);
}

/* --- Article body --- */
.single-post-content {
    padding-top: 64px;
    padding-bottom: 48px;
}

.single-post-body {
    max-width: 768px;
    margin: 0 auto;
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.single-post-body h2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    margin: 48px 0 16px;
}

.single-post-body h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    margin: 36px 0 12px;
}

.single-post-body h4 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    margin: 28px 0 10px;
}

.single-post-body p {
    margin-bottom: 24px;
}

.single-post-body ul,
.single-post-body ol {
    margin: 0 0 24px 24px;
    padding-left: 16px;
}

.single-post-body li {
    margin-bottom: 8px;
}

.single-post-body blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    border-left: 4px solid var(--color-black);
    background-color: var(--color-gray-bg);
    font-style: italic;
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.single-post-body blockquote p:last-child {
    margin-bottom: 0;
}

.single-post-body img {
    border-radius: 8px;
    margin: 32px 0;
}

.single-post-body .wp-caption {
    max-width: 100%;
    margin: 32px 0;
}

.single-post-body .wp-caption-text {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: 8px;
}

.single-post-body a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--transition-fast);
}

.single-post-body a:hover {
    opacity: 0.7;
}

.single-post-body pre {
    background-color: var(--color-gray-bg);
    padding: 24px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--color-gray-border);
    border-radius: 4px;
}

.single-post-body code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    padding: 2px 6px;
    background-color: var(--color-gray-bg);
    border-radius: 3px;
}

.single-post-body pre code {
    padding: 0;
    background: none;
}

.single-post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.single-post-body th,
.single-post-body td {
    padding: 12px 16px;
    border: 1px solid var(--color-gray-border);
    text-align: left;
}

.single-post-body th {
    background-color: var(--color-gray-bg);
    font-weight: 700;
}

/* --- Tags --- */
.single-post-tags {
    max-width: 768px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-gray-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.single-post-tags-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
}

.single-post-tag {
    display: inline-flex;
    padding: 4px 14px;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-secondary);
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    transition: all var(--transition-fast);
}

.single-post-tag:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
}

/* --- Share Buttons --- */
.single-post-share {
    max-width: 768px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-gray-border);
    display: flex;
    align-items: center;
    gap: 16px;
}

.single-post-share-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
}

.single-post-share-buttons {
    display: flex;
    gap: 8px;
}

.single-post-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-text-secondary);
    background-color: var(--color-gray-bg);
    border: 1px solid var(--color-gray-border);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.single-post-share-btn:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    opacity: 1;
}

.single-post-share-btn--copy.copied {
    background-color: #16a34a;
    color: var(--color-white);
    border-color: #16a34a;
}

/* --- Related Posts --- */
.related-posts-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.blog-grid--related {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================
   BLOG RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid--related {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Third related card on smaller screens - full width */
    .blog-grid--related .blog-card:nth-child(3) {
        grid-column: span 2;
    }
}

@media (max-width: 992px) {
    .hero-page--single .hero-page-title {
        font-size: 32px;
        line-height: 40px;
    }

    /* El panell ja és una columna centrada; aquí només s'estreny el coixí. */
    .newsletter-content {
        padding: 32px 24px;
    }

    /* Les pastilles no s'encongeixen (546px en una sola línia), així que en una
       fila estreta la cerca es quedava en un centenar de píxels. A partir d'aquí
       van una sobre l'altra. */
    .blog-listing .blog-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .blog-listing .blog-search {
        max-width: none;
    }

    .blog-listing .blog-categories {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

@media (max-width: 768px) {
    .hero-page {
        padding: 100px 0 48px;
    }

    .hero-page-title {
        font-size: 28px;
        line-height: 34px;
    }

    .hero-page--single {
        padding: 110px 0 48px;
    }

    .hero-page--single .hero-page-title {
        font-size: 28px;
        line-height: 34px;
    }

    .blog-search {
        flex-direction: column;
    }

    .blog-search-btn {
        width: 100%;
    }

    .blog-categories {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .blog-category-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid--related {
        grid-template-columns: 1fr;
    }

    .blog-grid--related .blog-card:nth-child(3) {
        grid-column: span 1;
    }

    .single-post-meta {
        flex-direction: column;
        gap: 8px;
    }

    .single-post-meta-sep {
        display: none;
    }

    .single-post-body {
        font-size: 16px;
    }

    .single-post-body h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .single-post-body h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .single-post-body blockquote {
        padding: 16px 20px;
        font-size: 17px;
    }

    .single-post-share {
        flex-direction: column;
        align-items: flex-start;
    }

    .newsletter-input-group {
        flex-direction: column;
    }

    .section-newsletter {
        padding: 48px 0;
    }
}

/* ============================================
   INNER PAGES STYLES
   ============================================ */

/* --- Intro Section (Nosaltres, Producte Inoxsis) --- */
.intro-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.intro-content--with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.intro-title {
    font-size: 30px;
    line-height: 36px;
    color: var(--color-text-primary);
}

.intro-paragraphs {
    font-size: 18px;
    line-height: 29px;
    color: var(--color-text-secondary);
}

.intro-paragraphs p {
    margin-bottom: var(--spacing-sm);
}

.intro-paragraphs p:last-child {
    margin-bottom: 0;
}

.intro-image {
    overflow: hidden;
    border-radius: 8px;
}

.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.intro-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.intro-image-item {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-gray-border);
}

.intro-image-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* --- CTA Banner --- */
.cta-banner {
    background-color: var(--color-black);
    padding: var(--spacing-3xl) 0;
}

.cta-banner-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.cta-banner-title {
    font-size: 36px;
    line-height: 40px;
    color: var(--color-white);
}

.cta-banner-subtitle {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-light);
    max-width: 640px;
}

.cta-banner-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.cta-banner-buttons .btn-primary {
    background-color: var(--color-white);
    color: var(--color-black);
}

.cta-banner-buttons .btn-primary:hover {
    background-color: #e0e0e0;
    opacity: 1;
}

.cta-banner-buttons .btn-outline {
    border-color: var(--color-white);
    color: var(--color-white);
}

.cta-banner-buttons .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* --- FAQ Accordion --- */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-gray-border);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-gray-border);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-primary);
    text-align: left;
    gap: var(--spacing-sm);
    transition: color var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-text-secondary);
}

.faq-chevron {
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.faq-question[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 0 20px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-secondary);
}

.faq-answer[hidden] {
    display: none;
}

.faq-answer p {
    margin-bottom: var(--spacing-sm);
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* --- Values Grid (Nosaltres) --- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.value-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.value-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.value-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.value-card-icon svg {
    width: 24px;
    height: 24px;
}

.value-card-title {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.value-card-desc {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
}

/* --- Sectors Grid (Nosaltres, Serveis) --- */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.sector-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.sector-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.sector-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.sector-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.sector-card:hover .sector-card-image img {
    transform: scale(1.03);
}

.sector-card-body {
    padding: 24px;
}

.sector-card-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.sector-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.sector-card-subtitle {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.sector-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.sector-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sector-card-features li {
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-primary);
    padding: 4px 12px;
    background-color: var(--color-gray-bg);
    border-radius: 4px;
}

/* --- Process Steps (Nosaltres, Serveis) --- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.process-step {
    text-align: center;
    padding: 33px 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    position: relative;
    transition: box-shadow var(--transition-normal);
}

.process-step:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    margin-bottom: 16px;
}

.process-step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--color-text-primary);
}

.process-step-icon svg {
    width: 24px;
    height: 24px;
}

.process-step-title {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.process-step-desc {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
}

/* --- Certifications Grid (Nosaltres) --- */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.cert-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.cert-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.cert-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.cert-card-icon svg {
    width: 24px;
    height: 24px;
}

.cert-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.cert-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* --- Clients Grid (Nosaltres) --- */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.client-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.client-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.client-card-logo {
    width: 120px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.client-card-name {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.client-card-quote {
    font-style: italic;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
    border: none;
    padding: 0;
    margin: 0;
}


/* --- Projects Gallery (Serveis) --- */
.projects-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.projects-gallery-item {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-gray-border);
}

.projects-gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.projects-gallery-item:hover img {
    transform: scale(1.03);
}

.projects-gallery-placeholder {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-secondary);
    padding: var(--spacing-xl) 0;
}

/* --- Trust Grid (Serveis) --- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.trust-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.trust-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.trust-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.trust-card-icon svg {
    width: 24px;
    height: 24px;
}

.trust-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.trust-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* --- Products Grid (Producte Inoxsis) --- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.product-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.product-card-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

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

.product-card-body {
    padding: 24px;
}

.product-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.product-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-card-features li {
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-primary);
    padding: 4px 12px;
    background-color: var(--color-gray-bg);
    border-radius: 4px;
}

/* --- Tech Grid (Producte Inoxsis) --- */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.tech-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.tech-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tech-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.tech-card-icon svg {
    width: 24px;
    height: 24px;
}

.tech-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.tech-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* --- Applications Grid (Producte Inoxsis) --- */
.applications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.application-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.application-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.application-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.application-card-icon svg {
    width: 24px;
    height: 24px;
}

.application-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.application-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* --- Buy Options Grid (Producte Inoxsis) --- */
.buy-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.buy-option-card {
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow var(--transition-normal);
}

.buy-option-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.buy-option-title {
    font-size: 24px;
    line-height: 32px;
    color: var(--color-text-primary);
}

.buy-option-desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-secondary);
}

.buy-option-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buy-option-benefits li {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
    padding-left: 20px;
    position: relative;
}

.buy-option-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--color-black);
    border-radius: 50%;
}

.buy-option-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* --- Support Grid (Producte Inoxsis) --- */
.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.support-card {
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.support-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.support-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.support-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* --- Catalog Actions (Producte Inoxsis) --- */
.catalog-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    max-width: 640px;
    margin: 0 auto;
}

.catalog-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
    text-decoration: none;
    color: inherit;
}

.catalog-action-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    opacity: 1;
}

.catalog-action-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.catalog-action-icon svg {
    width: 24px;
    height: 24px;
}

.catalog-action-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.catalog-action-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* --- Specific Grid (Producte Inoxsis) --- */
.specific-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.specific-card {
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow var(--transition-normal);
}

.specific-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.specific-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    border-radius: 8px;
}

.specific-card-icon svg {
    width: 24px;
    height: 24px;
}

.specific-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
}

.specific-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.specific-card .btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* --- Why Content (Trabaja) --- */
.why-content {
    max-width: 800px;
    font-size: 18px;
    line-height: 29px;
    color: var(--color-text-secondary);
}

.why-content p {
    margin-bottom: var(--spacing-sm);
}

.why-content p:last-child {
    margin-bottom: 0;
}

/* --- Profiles Grid (Trabaja) --- */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.profile-card {
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow var(--transition-normal);
}

.profile-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-white);
    border-radius: 8px;
}

.profile-card-icon svg {
    width: 24px;
    height: 24px;
}

.profile-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin: 0;
}

.profile-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.profile-card-requirements {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-card-requirements li {
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
    padding-left: 20px;
    position: relative;
}

.profile-card-requirements li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--color-black);
    border-radius: 50%;
}

/* --- Form Placeholder (Trabaja) --- */
.form-placeholder {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-secondary);
    padding: var(--spacing-xl) 0;
}

/* --- Info Cards Grid (Contacte) --- */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.info-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    transition: box-shadow var(--transition-normal);
}

.info-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.info-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--color-white);
    border-radius: 8px;
}

.info-card-icon svg {
    width: 24px;
    height: 24px;
}

.info-card-title {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.info-card-content {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.info-card-extra {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-secondary);
}

/* --- Departments Grid (Contacte) --- */
.departments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.department-card {
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow var(--transition-normal);
}

.department-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.department-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.department-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-white);
    border-radius: 8px;
}

.department-card-icon svg {
    width: 24px;
    height: 24px;
}

.department-card-name {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin: 0;
}

.department-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.department-card-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.department-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}

.department-contact-label {
    font-weight: 500;
    color: var(--color-text-primary);
}

.department-contact-link {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.department-contact-link:hover {
    opacity: 0.7;
}

/* --- Locations & Map (Contacte) --- */
.locations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.location-item {
    padding: 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
}

.location-name {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.location-address {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.location-map {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-gray-border);
}

.location-map iframe {
    display: block;
    width: 100%;
    height: 300px;
}

.main-map {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-gray-border);
}

.main-map iframe {
    display: block;
    width: 100%;
    height: 450px;
}

/* --- Hours Grid (Contacte) --- */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 640px;
    margin: 0 auto;
}

.hours-card {
    text-align: center;
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
}

.hours-card-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--color-white);
    border-radius: 8px;
}

.hours-card-icon svg {
    width: 24px;
    height: 24px;
}

.hours-card-title {
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.hours-card-schedule {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* --- Social Links Grid (Contacte) --- */
.social-links-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.social-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-normal);
    min-width: 120px;
}

.social-link-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    opacity: 1;
}

.social-link-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
}

.social-link-icon svg {
    width: 24px;
    height: 24px;
}

.social-link-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* --- Shared Contact Section (Inner Pages) --- */
.section-contact-shared {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-gray-bg);
}

.contact-shared-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.contact-shared-info {
    padding: 33px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
}

.contact-shared-info-title {
    font-size: 24px;
    line-height: 32px;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.contact-shared-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-shared-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-shared-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-white);
    border-radius: 8px;
}

.contact-shared-icon svg {
    width: 16px;
    height: 16px;
}

.contact-shared-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-shared-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.contact-shared-value {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.contact-shared-link {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.contact-shared-link:hover {
    opacity: 0.7;
}

.contact-shared-map {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-gray-border);
}

.contact-shared-map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.contact-shared-form-container {
    max-width: 768px;
    margin: 0 auto;
    padding: 48px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
}

/* --- Contacto Shared (legacy classes) --- */
.contacto-shared {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-gray-bg);
}

.contacto-shared-title {
    font-size: 36px;
    line-height: 40px;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.contacto-shared-subtitle {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-secondary);
}

.contacto-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.contacto-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contacto-info-icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-white);
    border-radius: 8px;
}

.contacto-info-icon svg {
    width: 16px;
    height: 16px;
}

.contacto-info-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.contacto-info-value {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

/* ============================================
   INNER PAGES - RESPONSIVE (1200px)
   ============================================ */
@media (max-width: 1200px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .contacto-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   INNER PAGES - RESPONSIVE (992px)
   ============================================ */
@media (max-width: 992px) {
    .intro-content--with-image {
        grid-template-columns: 1fr;
    }

    .contact-shared-content {
        grid-template-columns: 1fr;
    }

    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   INNER PAGES - RESPONSIVE (768px)
   ============================================ */
@media (max-width: 768px) {
    .intro-images-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .sectors-grid {
        grid-template-columns: 1fr;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .certs-grid {
        grid-template-columns: 1fr;
    }

    .clients-grid {
        grid-template-columns: 1fr;
    }

    .services-page-grid {
        grid-template-columns: 1fr;
    }

    .projects-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .applications-grid {
        grid-template-columns: 1fr;
    }

    .buy-options-grid {
        grid-template-columns: 1fr;
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

    .specific-grid {
        grid-template-columns: 1fr;
    }

    .profiles-grid {
        grid-template-columns: 1fr;
    }

    .info-cards-grid {
        grid-template-columns: 1fr;
    }

    .departments-grid {
        grid-template-columns: 1fr;
    }

    .hours-grid {
        grid-template-columns: 1fr;
    }

    .contacto-info-grid {
        grid-template-columns: 1fr;
    }

    .cta-banner {
        padding: var(--spacing-xl) 0;
    }

    .cta-banner-title {
        font-size: 28px;
        line-height: 34px;
    }

    .cta-banner-subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .cta-banner-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-banner-buttons .btn {
        width: 100%;
    }

    .faq-question {
        font-size: 16px;
        line-height: 24px;
    }

    .contact-shared-info {
        padding: 24px;
    }

    .contact-shared-form-container {
        padding: 24px;
    }

    .intro-title {
        font-size: 24px;
        line-height: 30px;
    }
}

/* ============================================
   INNER PAGES - RESPONSIVE (480px)
   ============================================ */
@media (max-width: 480px) {
    .projects-gallery {
        grid-template-columns: 1fr;
    }

    .social-links-grid {
        flex-direction: column;
        align-items: center;
    }

    .social-link-card {
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }

    .value-card,
    .cert-card,
    .trust-card,
    .tech-card,
    .application-card,
    .info-card {
        padding: 24px;
    }

    .process-step {
        padding: 24px 16px;
    }

    .buy-option-card,
    .specific-card,
    .profile-card,
    .department-card,
    .support-card {
        padding: 24px;
    }

    .main-map iframe {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .hero-page-breadcrumbs {
        font-size: 12px;
    }

    .blog-card-image {
        height: 180px;
    }

    .blog-card-content {
        padding: 16px;
    }

    .blog-card-title {
        font-size: 18px;
        line-height: 24px;
    }
}

/* ============================================
   SERVICE SINGLE FLEXIBLE BLOCKS
   ============================================ */
.servicio-hero {
    position: relative;
    display: flex;
    height: 620px;
    align-items: flex-end;
    padding: 160px 0 96px;
    overflow: hidden;
    background-color: var(--color-black);
}

.servicio-hero__background,
.servicio-hero__background img,
.servicio-hero__overlay {
    position: absolute;
    inset: 0;
}

.servicio-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.servicio-hero__overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.48) 48%, rgba(0, 0, 0, 0.12) 100%);
}

.servicio-hero__content {
    position: relative;
    z-index: 1;
    color: var(--color-white);
}

.servicio-hero__title {
    max-width: 820px;
    color: var(--color-white);
    font-size: 64px;
    line-height: 1.04;
    margin-bottom: 24px;
}

.servicio-hero__subtitle {
    max-width: 640px;
    color: var(--color-text-light);
    font-size: 20px;
    line-height: 1.6;
}

.servicio-texto-imagen,
.servicio-proceso,
.servicio-resultados,
.servicio-estadisticas,
.servicio-galeria-acabados,
.servicio-video,
.servicio-valor-cards,
.servicio-especificaciones,
.servicio-contacto {
    padding: 96px 0;
}

.servicio-texto-imagen:nth-of-type(even),
.servicio-proceso,
.servicio-estadisticas,
.servicio-video,
.servicio-especificaciones {
    background: var(--color-gray-bg);
}

.servicio-texto-imagen__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.servicio-texto-imagen--image-left .servicio-texto-imagen__image-wrapper {
    order: -1;
}

.servicio-texto-imagen__title {
    font-size: 44px;
    line-height: 1.12;
    margin-bottom: 24px;
}

.servicio-texto-imagen__content {
    color: var(--color-text-secondary);
    font-size: 17px;
    line-height: 1.7;
}

.servicio-texto-imagen__content p+p {
    margin-top: 16px;
}

.servicio-texto-imagen__features {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    list-style: none;
}

.servicio-texto-imagen__feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-text-primary);
    font-size: 16px;
    line-height: 1.45;
}

.servicio-texto-imagen__feature-icon,
.servicio-proceso__step-icon,
.servicio-valor-cards__icon,
.servicio-contacto__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: 8px;
}

.servicio-texto-imagen__feature-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    color: var(--color-black);
    background: transparent;
    border-radius: 0;
}

.servicio-texto-imagen__feature-icon svg,
.servicio-proceso__step-icon svg,
.servicio-valor-cards__icon svg,
.servicio-contacto__icon svg {
    width: 22px;
    height: 22px;
}

.servicio-texto-imagen__image-wrapper,
.servicio-video__thumbnail,
.servicio-resultados__image-wrapper,
.servicio-galeria-acabados__item {
    border-radius: 8px;
    overflow: hidden;
    background: #e9e9e9;
}

.servicio-texto-imagen__image {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.servicio-proceso__grid,
.servicio-valor-cards__grid,
.servicio-resultados__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* .servicio-proceso__grid i .servicio-valor-cards__grid redefineixen
   grid-template-columns tot seguit a partir de --steps / --cards. */

/* Els passos del procés van tots en una fila, sigui quin sigui el nombre. El
   template el passa a data-steps (no a un style inline, que Swiper esborra en
   destruir el carrusel) i aquí el traduïm a --steps. Com a .block-process-grid,
   repeat() no accepta var(): calculem l'amplada de columna (100% menys els N-1
   gaps, dividit entre N) i deixem que auto-fit n'hi encabeixi N. */
.servicio-proceso__grid {
    --process-gap: 32px;
    --cols: var(--steps, 3);
    grid-template-columns: repeat(auto-fit,
            calc((100% - (var(--cols) - 1) * var(--process-gap)) / var(--cols)));
    gap: var(--process-gap);
}

.servicio-proceso__grid[data-steps="1"] {
    --steps: 1;
}

.servicio-proceso__grid[data-steps="2"] {
    --steps: 2;
}

.servicio-proceso__grid[data-steps="3"] {
    --steps: 3;
}

.servicio-proceso__grid[data-steps="4"] {
    --steps: 4;
}

.servicio-proceso__grid[data-steps="5"] {
    --steps: 5;
}

.servicio-proceso__grid[data-steps="6"] {
    --steps: 6;
}

/* Les targetes de valor segueixen el mateix criteri: totes en una fila. Amb
   quatre certificacions (Figma 103:2068), la graella fixa de tres columnes en
   deixava una de sola a la segona fila. */
.servicio-valor-cards__grid {
    --process-gap: 32px;
    --cols: var(--cards, 3);
    grid-template-columns: repeat(auto-fit,
            calc((100% - (var(--cols) - 1) * var(--process-gap)) / var(--cols)));
    gap: var(--process-gap);
}

.servicio-valor-cards__grid[data-cards="1"] {
    --cards: 1;
}

.servicio-valor-cards__grid[data-cards="2"] {
    --cards: 2;
}

.servicio-valor-cards__grid[data-cards="3"] {
    --cards: 3;
}

.servicio-valor-cards__grid[data-cards="4"] {
    --cards: 4;
}

/* A diferència dels passos del procés, les targetes de valor porten un
   paràgraf sencer i per sota de ~250px no es llegeixen bé. A partir de cinc
   es reparteixen en files de tres (Figma 103:5660), en comptes d'encabir-les
   totes en una sola fila. */
.servicio-valor-cards__grid[data-cards="5"],
.servicio-valor-cards__grid[data-cards="6"] {
    --cards: 3;
}

/* ============================================
   CARRUSELS DE LA FITXA DE SERVEI
   Procés, valor, resultats i galeria d'acabats porten sempre el marcatge de
   Swiper, però initServicioCarousels() només l'inicialitza per sota de 768px.
   Mentre no està inicialitzat, el .swiper-wrapper i les .swiper-slide han de
   deixar pas: si es queden amb el flex-nowrap del CSS de la llibreria ocupen
   una sola cel·la de la graella i les targetes desborden en una única fila.
   ============================================ */
.servicio-swiper:not(.swiper-initialized)>.swiper-wrapper,
.servicio-swiper:not(.swiper-initialized)>.swiper-wrapper>.swiper-slide {
    display: contents;
}

.servicio-swiper:not(.swiper-initialized)>.servicio-pagination {
    display: none;
}

/* Un cop inicialitzat mana Swiper: la graella deixa de ser graella. */
.servicio-swiper.swiper-initialized {
    display: block;
    padding-bottom: 40px;
}

.servicio-swiper.swiper-initialized>.swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.servicio-swiper.swiper-initialized .swiper-slide {
    display: flex;
    height: auto;
}

/* Les targetes omplen la slide perquè totes quedin a la mateixa alçada. */
.servicio-swiper.swiper-initialized .swiper-slide>* {
    width: 100%;
    margin: 0;
}

.servicio-swiper .servicio-pagination {
    bottom: 0;
}

.servicio-proceso__step,
.servicio-valor-cards__card,
.servicio-resultados__item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    padding: 32px;
}

/* Resultats: la imatge mana. Va a sang dins la targeta (sense el marc que
   deixava el padding de 32px) i el títol queda a sota amb el seu propi
   encoixinat, sense l'espai mort que hi havia al peu de la targeta. */
.servicio-resultados__item {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.servicio-resultados__image-wrapper {
    border-radius: 0;
}

.servicio-proceso__step-number {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: var(--color-black);
    border-radius: 50%;
    font-weight: 700;
}

.servicio-proceso__step-title,
.servicio-valor-cards__title {
    font-size: 22px;
    line-height: 1.25;
    margin: 20px 0 10px;
}

.servicio-resultados__item-title {
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
    padding: 20px 24px 24px;
}

.servicio-proceso__step-description,
.servicio-valor-cards__description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.servicio-galeria-acabados__image,
.servicio-video__thumb-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Ràtio fix en comptes d'alçada fixa: totes les imatges de resultats queden
   igual de proporcionades sigui quina sigui l'amplada de la columna. */
.servicio-resultados__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.servicio-estadisticas__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

.servicio-estadisticas__divider {
    display: none;
}

.servicio-estadisticas__item {
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
}

.servicio-estadisticas__number {
    display: block;
    color: var(--color-text-primary);
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 10px;
}

.servicio-estadisticas__label {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.4;
}

.servicio-galeria-acabados__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.servicio-galeria-acabados__caption {
    padding: 14px 16px;
    color: var(--color-text-primary);
    background: var(--color-white);
}

.servicio-video__player {
    max-width: 944px;
    margin: 0 auto;
}

.servicio-video__thumbnail {
    position: relative;
    cursor: pointer;
}

/* L'iframe que substitueix la miniatura en clicar el play. Mantenim l'àrea
   16:9 perquè la secció no faci un salt d'alçada en canviar la imatge pel
   reproductor. */
.servicio-video__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-black);
}

.servicio-video__embed iframe,
.servicio-video__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* El vídeo local pot no ser 16:9: object-fit evita que es deformi. */
.servicio-video__native {
    display: block;
    object-fit: contain;
    background: var(--color-black);
}

.servicio-video__thumb-image {
    height: 520px;
}

.servicio-video__play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.servicio-video__thumbnail:hover .servicio-video__play-btn {
    transform: translate(-50%, -50%) scale(1.08);
}

.servicio-video__play-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 6px;
    border-radius: 50%;
}

.servicio-cta-banner {
    padding: 80px 0;
    color: var(--color-white);
    background: var(--color-black);
}

.servicio-cta-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.servicio-cta-banner__title {
    color: var(--color-white);
    font-size: 40px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.servicio-cta-banner__subtitle {
    max-width: 680px;
    color: var(--color-text-light);
}

.servicio-cta-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 0 auto;
}

/* El fons negre del .btn-primary desapareix sobre la banda negra i el botó
   quedava com un text solt. Sobre fons fosc s'inverteix, igual que fan
   .cta-banner-buttons i .block-cta-panel. */
.servicio-cta-banner__buttons .btn-primary {
    background: var(--color-white);
    color: var(--color-black);
}

.servicio-cta-banner__buttons .btn-primary:hover {
    background: #e0e0e0;
}

.servicio-especificaciones__table {
    overflow: hidden;
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    background: var(--color-white);
}

.servicio-especificaciones__row {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
}

.servicio-especificaciones__row+.servicio-especificaciones__row {
    border-top: 1px solid var(--color-gray-border);
}

.servicio-especificaciones__label,
.servicio-especificaciones__value {
    padding: 20px 24px;
}

.servicio-especificaciones__label {
    color: var(--color-text-primary);
    font-weight: 700;
    background: var(--color-gray-bg);
}

.servicio-contacto__content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: start;
}

.servicio-contacto__info,
.servicio-contacto__aside,
.servicio-contacto__form {
    display: grid;
    gap: 20px;
}

.servicio-contacto__item {
    display: flex;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    background: var(--color-white);
}

.servicio-contacto__label {
    display: block;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 4px;
}

.servicio-contacto__value {
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.servicio-contacto__link {
    color: var(--color-text-primary);
}

/* La caixa del formulari (fons, vora i padding) ja ve de la regla compartida
   de .block-contact-form. Aquí només traiem el margin-top de 48px que allà
   separa el formulari del contingut anterior: en aquesta secció el formulari
   va en columna al costat de les dades de contacte i ha de començar a la
   mateixa alçada que la primera targeta. */
.servicio-contacto__form {
    margin-top: 0;
}

/* CF7 genera tots els camps dins d'un sol <p> separats per <br>. Donem aire
   entre camps i amaguem els <br>, que si no sumen una línia buida a cada salt. */
.servicio-contacto__form .wpcf7-form>p>br {
    display: none;
}

.servicio-contacto__form .wpcf7-form>p>label {
    display: block;
    margin-bottom: 20px;
}

.servicio-contacto__form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}

/* L'acceptació de privacitat i el botó, separats de l'últim camp. */
.servicio-contacto__form .wpcf7-form>p>.wpcf7-form-control-wrap[data-name="privacy"] {
    margin-bottom: 24px;
}

.servicio-contacto__map {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-gray-border);
}

.servicio-contacto__map iframe {
    display: block;
    width: 100%;
}


/* ==========================================================================
   Comparativa abans/després (Figma 101:775)
   ========================================================================== */

.servicio-comparativa__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: start;
}

.servicio-comparativa__side {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    overflow: hidden;
}

/* La capçalera de cada costat és la que distingeix el "abans" del "després":
   gris per l'estat de partida i negra per al resultat. */
.servicio-comparativa__label {
    margin: 0;
    padding: 16px;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-border);
}

.servicio-comparativa__side--negative .servicio-comparativa__label {
    background: var(--color-gray-bg);
    color: var(--color-black);
}

.servicio-comparativa__side--positive .servicio-comparativa__label {
    background: var(--color-black);
    color: var(--color-white);
}

.servicio-comparativa__media {
    background: #e9e9e9;
}

.servicio-comparativa__image {
    display: block;
    width: 100%;
    height: 384px;
    object-fit: cover;
}

.servicio-comparativa__points {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 24px;
    list-style: none;
}

.servicio-comparativa__points li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* El Figma fa servir una creu al costat negatiu i un tic al positiu. Es
   dibuixen amb CSS per no dependre de dos SVG més a la Mediateca. */
.servicio-comparativa__points li::before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: var(--color-black);
}

.servicio-comparativa__side--negative .servicio-comparativa__points li::before {
    content: "\00d7";
}

.servicio-comparativa__side--positive .servicio-comparativa__points li::before {
    content: "\2713";
}

/* Panell de paràmetres: marc negre gruixut com la resta de blocs destacats. */
.servicio-comparativa__params {
    margin-top: 64px;
    padding: 32px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 8px;
}

.servicio-comparativa__params-title {
    margin: 0 0 24px;
    font-size: 24px;
    line-height: 1.35;
    text-align: center;
}

.servicio-comparativa__params-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.servicio-comparativa__param {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    background: var(--color-gray-bg);
    border-radius: 8px;
}

.servicio-comparativa__param-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-black);
}

.servicio-comparativa__param-icon svg {
    width: 100%;
    height: 100%;
}

.servicio-comparativa__param-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-black);
}

.servicio-comparativa__param-value {
    font-size: 24px;
    line-height: 1.35;
    color: var(--color-black);
}

.servicio-comparativa__param-note {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Camps opcionals afegits a blocs existents (Figma 101:583)
   ========================================================================== */

/* ==========================================================================
   Procés vertical (Figma 103:6353)
   Files a tota amplada amb el número al costat, unides per una fletxa avall.
   No és un carrusel: cada fila ja ocupa tot l'ample.
   ========================================================================== */

.servicio-proceso__flow-inner {
    display: grid;
    gap: 48px;
}

.servicio-proceso__flow .servicio-proceso__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 34px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 0;
}

/* La fletxa entre files es dibuixa amb CSS, centrada al buit de 48px. L'última
   no en porta. */
.servicio-proceso__flow .servicio-proceso__step::after {
    content: "";
    position: absolute;
    bottom: -38px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: var(--color-black);
    transform: translateX(-50%);
}

.servicio-proceso__flow .servicio-proceso__step::before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
}

.servicio-proceso__flow-inner > .servicio-proceso__step:last-child::after,
.servicio-proceso__flow-inner > .servicio-proceso__step:last-child::before {
    content: none;
}

.servicio-proceso__step-number--flow {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    border-radius: 0;
    font-size: 30px;
    line-height: 1.2;
}

.servicio-proceso__step-body {
    flex: 1 1 auto;
    min-width: 0;
}

.servicio-proceso__flow .servicio-proceso__step-title {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.35;
}

.servicio-proceso__flow .servicio-proceso__step-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Tira de sub-elements dins d'un pas. */
.servicio-proceso__step-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.servicio-proceso__step-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--color-gray-bg);
}

.servicio-proceso__step-item-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    color: var(--color-black);
}

.servicio-proceso__step-item-icon svg {
    width: 100%;
    height: 100%;
}

.servicio-proceso__step-item-label {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-black);
}

.servicio-proceso__step-item-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* Encapçalament opcional sobre els punts d'un pas (Figma 103:5437). */
.servicio-proceso__step-points-title {
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-black);
}

/* Amb encapçalament, la llista ja no necessita el marge de sobre. */
.servicio-proceso__step-points-title + .servicio-proceso__step-points {
    margin-top: 8px;
}

/* Punts dins de cada pas del procés. */
.servicio-proceso__step-points {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.servicio-proceso__step-points li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.servicio-proceso__step-points li::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: var(--color-black);
}

/* Mètrica destacada al peu de les targetes de valor. */
.servicio-valor-cards__metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding: 16px;
    text-align: center;
    background: var(--color-gray-bg);
    border-radius: 8px;
}

/* La mètrica ha de quedar arrapada al peu encara que les targetes tinguin
   textos de llargades diferents. */
.servicio-valor-cards__card {
    display: flex;
    flex-direction: column;
}

.servicio-valor-cards__metric-value {
    font-size: 30px;
    line-height: 1.2;
    color: var(--color-black);
}

.servicio-valor-cards__metric-label {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* Galeria amb text: la imatge manté el marc i el peu porta títol i descripció. */
.servicio-galeria-acabados__grid--rich .servicio-galeria-acabados__item {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
}

.servicio-galeria-acabados__body {
    padding: 20px 24px 24px;
}

.servicio-galeria-acabados__item-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

.servicio-galeria-acabados__item-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Peu de text opcional sota el vídeo. */
.servicio-video__caption {
    max-width: 944px;
    margin: 24px auto 0;
    text-align: center;
}

.servicio-video__caption-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
}

.servicio-video__caption-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Tira de característiques sota el peu del vídeo (Figma 103:2240). Quan hi és,
   el peu s'alinea a l'esquerra: el text passa a ser descriptiu i no un simple
   retolet centrat sota el reproductor. */
.servicio-video__caption:has(.servicio-video__features) {
    max-width: none;
    text-align: left;
}

.servicio-video__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.servicio-video__feature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--color-gray-bg);
    border-radius: 8px;
}

.servicio-video__feature-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    color: var(--color-black);
}

.servicio-video__feature-icon svg {
    width: 100%;
    height: 100%;
}

.servicio-video__feature-title {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-black);
}

.servicio-video__feature-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* CTA centrat (Figma 101:1084): títol, text i botons en una sola columna. */
.servicio-cta-banner__content--centered {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 24px;
}

.servicio-cta-banner__content--centered .servicio-cta-banner__subtitle {
    max-width: 850px;
}

.servicio-cta-banner__content--centered .servicio-cta-banner__buttons {
    justify-content: center;
}

/* Galeria amb fitxa: el nombre de columnes surt del nombre d'elements. Amb un
   de sol ocupa tota l'amplada (Figma 101:1186); amb dos o tres es reparteixen
   (Figma 103:4755). El template ho passa a data-items. */
.servicio-galeria-acabados__grid--rich {
    grid-template-columns: 1fr;
}

.servicio-galeria-acabados__grid--rich[data-items="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.servicio-galeria-acabados__grid--rich[data-items="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.servicio-galeria-acabados__grid--rich[data-items="4"] {
    grid-template-columns: repeat(2, 1fr);
}

.servicio-galeria-acabados__grid--rich .servicio-galeria-acabados__image {
    height: 384px;
}

/* Repartida en columnes, la imatge no necessita tanta alçada. */
.servicio-galeria-acabados__grid--rich:not([data-items="1"]) .servicio-galeria-acabados__image {
    height: 260px;
}

/* Especificacions dins d'un element de galeria (Figma 103:4755). */
.servicio-galeria-acabados__points {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.servicio-galeria-acabados__points li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.servicio-galeria-acabados__points li::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: var(--color-black);
}

/* Caixa de característiques del text+imatge, amb encapçalament per fila. */
/* Caixa d'aplicacions (Figma 103:1590 "Background+Border"): marc negre gruixut
   sobre fons blanc, com la resta de panells destacats de la fitxa. Les mides
   surten del disseny: 34px de coixí, 24px sota el títol i una graella de dues
   columnes amb 16px de separació. */
.servicio-texto-imagen__features-box {
    margin-top: 28px;
    padding: 34px;
    background: var(--color-white);
    border: 2px solid var(--color-black);
}

.servicio-texto-imagen__features-title {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.4;
}

.servicio-texto-imagen__features--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 0;
}

/* Dins la caixa, la icona és petita i el text s'ordena en dues línies:
   encapçalament en negreta i detall a sota. */
.servicio-texto-imagen__features--grid .servicio-texto-imagen__feature-item {
    align-items: flex-start;
    gap: 12px;
}

.servicio-texto-imagen__features--grid .servicio-texto-imagen__feature-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    margin-top: 4px;
}

.servicio-texto-imagen__features--grid .servicio-texto-imagen__feature-icon svg {
    width: 100%;
    height: 100%;
}

.servicio-texto-imagen__feature-heading {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-black);
}

.servicio-texto-imagen__features--grid .servicio-texto-imagen__feature-text {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
@media (max-width: 1024px) {
    .servicio-hero__title {
        font-size: 52px;
    }

    .servicio-texto-imagen__grid,
    .servicio-contacto__content,
    .servicio-cta-banner__content {
        grid-template-columns: 1fr;
        display: grid;
    }

    /* En una sola columna els botons han d'omplir-la, com fa l'altra banner
       (.cta-banner-buttons). Amb justify-self: start es quedaven encastats a
       l'esquerra i deixaven un buit a la dreta (38px a 390px, 134px a 501px). */
    .servicio-cta-banner__buttons {
        justify-self: stretch;
        flex-direction: column;
        width: 100%;
    }

    .servicio-cta-banner__buttons .btn {
        width: 100%;
    }

    .servicio-resultados__grid,
    .servicio-galeria-acabados__grid,
    .servicio-estadisticas__row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Aquí només cal tocar --cols: la graella ja en deriva l'amplada. */
    .servicio-proceso__grid,
    .servicio-valor-cards__grid {
        --cols: 2;
    }

    .servicio-comparativa__params-grid,
    .servicio-texto-imagen__features--grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .servicio-hero {
        padding: 132px 0 72px;
    }

    .servicio-hero__title {
        font-size: 40px;
    }

    .servicio-texto-imagen,
    .servicio-proceso,
    .servicio-resultados,
    .servicio-estadisticas,
    .servicio-galeria-acabados,
    .servicio-video,
    .servicio-valor-cards,
    .servicio-especificaciones,
    .servicio-contacto {
        padding: 64px 0;
    }

    .servicio-texto-imagen__grid {
        gap: 32px;
    }

    .servicio-texto-imagen--image-left .servicio-texto-imagen__image-wrapper {
        order: 0;
    }

    .servicio-texto-imagen__title,
    .servicio-cta-banner__title {
        font-size: 32px;
    }

    .servicio-resultados__grid,
    .servicio-galeria-acabados__grid,
    .servicio-estadisticas__row,
    .servicio-especificaciones__row {
        grid-template-columns: 1fr;
    }

    .servicio-proceso__grid,
    .servicio-valor-cards__grid {
        --cols: 1;
    }

    .servicio-comparativa__grid,
    .servicio-video__features,
    .servicio-proceso__step-items,
    .servicio-galeria-acabados__grid--rich[data-items="2"],
    .servicio-galeria-acabados__grid--rich[data-items="3"],
    .servicio-galeria-acabados__grid--rich[data-items="4"] {
        grid-template-columns: 1fr;
    }

    .servicio-comparativa__params,
    .servicio-texto-imagen__features-box {
        margin-top: 32px;
        padding: 24px;
    }

    /* El número passa a sobre del text i el pas s'apila. */
    .servicio-proceso__flow .servicio-proceso__step {
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }

    .servicio-proceso__step-number--flow {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        font-size: 24px;
    }

    .servicio-texto-imagen__image,
    .servicio-video__thumb-image {
        height: 360px;
    }

    .servicio-galeria-acabados__image {
        height: 240px;
    }
}

/* ==========================================================================
   Responsive hardening for generic .block-* sections (home, contacto,
   empresa, trabaja, producto). These blocks are styled per-page with
   nth-of-type overrides that lacked mobile fallbacks, so fixed multi-column
   grids and fixed widths overflowed below ~1024px. Collapse them here.
   ========================================================================== */

/* Tablet and below: two-column block grids -> single column */
@media (max-width: 1024px) {

    .block-text-media-grid,
    .block-stats-panel,
    .block-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* A map placed in a second grid column would keep its huge fixed size;
       force it back into normal flow at full width. */
    .block-contact-grid .block-map {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-height: 360px !important;
    }

    .block-contact-grid .block-map iframe {
        height: 360px !important;
    }

    /* 4-up card grids -> 2-up on tablet */
    .block-card-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone: everything to a single readable column, no horizontal overflow */
@media (max-width: 768px) {

    .block-card-grid--2:not(.swiper-initialized),
    .block-card-grid--3:not(.swiper-initialized),
    .block-card-grid--4:not(.swiper-initialized),
    .block-process-grid,
    .block-gallery-grid,
    .block-image-grid:not(.swiper) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* El carrusel gestiona ell mateix el layout: no li forcem cap graella,
       que sobreescriuria el flex que hi posa Swiper en inicialitzar-se. */
    .block-image-grid.swiper .swiper-wrapper {
        display: flex;
    }

    .block-image-grid.swiper .swiper-slide {
        height: auto;
    }

    /* Copy column should never keep a desktop max-width that exceeds the viewport */
    .block-copy {
        max-width: 100%;
    }

    /* Media/images fill the column and keep aspect, never overflow */
    .block-media,
    .block-image-grid,
    .block-image-grid img,
    .block-media img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Section headers that were given a fixed desktop width per page */
    .section-header,
    .section-title,
    .section-subtitle,
    .block-richtext,
    .block-richtext p {
        max-width: 100% !important;
        width: auto !important;
    }

    /* Contact Form 7: collapse the two-up field rows and cap input width.
       CF7 lays fields out with inline-block labels at fixed widths on these
       pages, which is what produced ~500px inputs in a 390px viewport. */
    .block-contact-form .wpcf7-form p,
    .wpcf7-form .row,
    .wpcf7-form .columns {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    .wpcf7-form label,
    .wpcf7-form .wpcf7-form-control-wrap,
    .wpcf7-form input.wpcf7-form-control,
    .wpcf7-form select.wpcf7-form-control,
    .wpcf7-form textarea.wpcf7-form-control {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Buttons / action rows wrap instead of pushing width */
    .block-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .block-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* Small phones: tighten gutters so content has room */
@media (max-width: 480px) {

    .block-copy,
    .block-richtext {
        font-size: 15px;
    }

    .block-contact-grid .block-map,
    .block-contact-grid .block-map iframe {
        height: 280px !important;
    }
}

/* Tauleta/mòbil: apilar les graelles de dues columnes de la home. Les regles
   d'escriptori de la home tenen més especificitat que les genèriques d'apilat,
   per això calen aquí amb el mateix selector. */
@media (max-width: 1024px) {

    .home .block-text-media .block-text-media-grid,
    .home .block-stats-media.section-white .block-stats-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .home .block-stats-media.section-white {
        padding: 64px 0;
    }

    .home .block-stats-media.section-white .block-copy,
    .home .block-stats-media.section-white .block-title {
        max-width: 100%;
    }

    /* Les 4 fotos d'equip en graella 2x2 */
    .home .block-stats-media.section-white .block-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home .block-stats-media.section-white .block-image-grid img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    /* Capçaleres de secció mai més amples que el viewport */
    main>[class*="block-"] .section-header {
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    /* A les pàgines interiors la graella estàtica passa a una columna i
       anul·la les mides inline de Swiper. MAI a la home: allà el carrusel
       és real i Swiper necessita les seves amplades de slide calculades
       perquè l'snap 1:1 funcioni. */
    body:not(.home) .block-services .swiper-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .block-services .services-grid {
        width: 100% !important;
        overflow: hidden;
    }

    body:not(.home) .block-services .swiper-slide {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* Hero de la home en mòbil: el títol llarg ha de cabre i lliurar el header fix */
@media (max-width: 768px) {
    .home .block-hero:first-child {
        min-height: 560px;
        padding: 104px 0 56px;
    }

    /*
     * EMX-FE-04: a 390px el títol ocupava 4 línies i, amb el subtítol i els
     * dos botons, el contingut es menjava 391px dels 560 del hero: la
     * fotografia gairebé no es veia i el rètol EMINOX de l'edifici quedava
     * tapat pel text.
     *
     * clamp() escala el cos entre 24 i 32px segons l'amplada, de manera que
     * el títol baixa a 3 línies i el bloc de text s'encongeix.
     */
    .home .block-hero:first-child .block-hero-title {
        max-width: 100%;
        font-size: clamp(22px, 6.2vw, 30px);
        line-height: 1.18;
    }

    .home .block-hero:first-child .block-hero-subtitle {
        font-size: 15px;
        line-height: 1.45;
        max-width: 34ch;
        margin-left: auto;
        margin-right: auto;
    }

    /*
     * El rètol de l'edifici queda a la part alta de la foto; centrant-la
     * verticalment es perdia darrere el text.
     */
    .home .block-hero:first-child .block-hero-media img {
        object-position: 50% 35%;
    }

    /* Amb menys llum de fons el títol blanc es llegeix millor. */
    .home .block-hero:first-child .block-hero-overlay {
        background: rgba(0, 0, 0, 0.66);
    }
}

/* Contact info/item columns must never keep a fixed desktop width */
@media (max-width: 768px) {

    .block-contact-grid,
    .block-contact-info,
    .block-contact-item,
    .block-contact-form,
    .wpcf7-form {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* CF7 two-up field grids (`repeat(2, 511px)` etc.) -> single column,
       and let labels size to content instead of fixed heights. */
    .wpcf7-form>p,
    .wpcf7-form .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
    }

    .wpcf7-form label {
        height: auto !important;
        width: 100% !important;
    }

    /* Long titles/words should wrap rather than push width */
    .service-title,
    .service-card-title,
    .block-card-title,
    .block-title,
    .section-title {
        overflow-wrap: break-word;
    }

    /* Grid/flex children must be allowed to shrink below content size */
    .block-stats-row,
    .block-stat,
    .block-card,
    .block-card-grid>*,
    .services-grid .swiper-slide,
    .block-process-step {
        min-width: 0 !important;
    }

    /* Blog cards: one column, and let the meta row wrap */
    .blog-listing,
    .blog-grid,
    [class*="blog"][class*="grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .blog-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .blog-card-meta {
        flex-wrap: wrap;
    }
}

/* Belt-and-braces: stop any stray fixed-width descendant from forcing a
   horizontal scrollbar on the whole document on small screens. */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* ==========================================================================
   CF7 form polish — match the site typography and fix the home form on mobile
   ========================================================================== */

/* Use the theme font (Roboto) for all form controls and their placeholders,
   instead of the browser default (Arial) that CF7 inherits. */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form button,
.block-contact-form input,
.block-contact-form select,
.block-contact-form textarea {
    font-family: inherit;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    font-family: inherit;
    color: #9ca3af;
    opacity: 1;
}

/* ==========================================================================
   Espaiat consistent etiqueta/camp als formularis CF7
   ========================================================================== */

/* Consistent spacing between every CF7 label text and its input, regardless
   of label length (no fixed label heights). Applies on all breakpoints. */
.wpcf7-form label {
    display: block;
}

.wpcf7-form label .wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}

/* When a label wraps the control directly (no inner wrap), still space it */
.wpcf7-form label>input,
.wpcf7-form label>select,
.wpcf7-form label>textarea {
    margin-top: 8px;
}

/* Vertical rhythm between consecutive fields */
.wpcf7-form p>label,
.wpcf7-form .row>label {
    margin-bottom: 18px;
}

/* ==========================================================================
   Language switcher (Polylang) — dropdown
   ========================================================================== */
.lang-switcher {
    position: relative;
    display: inline-block;
    margin-left: 12px;
}

.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: transparent;
    border: 1px solid var(--color-gray-border, #e5e7eb);
    border-radius: 6px;
    color: var(--color-black, #0b0b0b);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.lang-switcher__toggle:hover {
    border-color: var(--color-black, #0b0b0b);
}

/* Over a hero image the header is transparent and nav links are white, so the
   switcher must be light too (dark text/border is invisible on the photo).
   When the header gets a solid background on scroll, revert to dark. */
.header:not(.scrolled) .lang-switcher__toggle {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}

.header:not(.scrolled) .lang-switcher__toggle:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.header.scrolled .lang-switcher__toggle {
    color: var(--color-black, #0b0b0b);
    border-color: var(--color-gray-border, #d9d9d9);
}

.lang-switcher__caret {
    transition: transform .2s ease;
}

.lang-switcher.is-open .lang-switcher__caret {
    transform: rotate(180deg);
}

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-gray-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1001;
}

.lang-switcher.is-open .lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 5px;
    color: var(--color-text-secondary, #6b7280);
    font-size: 14px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}

.lang-switcher__item:hover {
    background: var(--color-gray-bg, #f3f4f6);
    color: var(--color-black, #0b0b0b);
}

.lang-switcher__item.is-current {
    color: var(--color-black, #0b0b0b);
    font-weight: 700;
}

.lang-switcher__code {
    min-width: 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-black, #0b0b0b);
}

@media (max-width: 768px) {

    /* In the mobile drawer: full-width row, menu expanded inline */
    .lang-switcher {
        margin: 12px 24px 0;
        display: block;
    }

    .lang-switcher__toggle {
        width: 100%;
        justify-content: space-between;
    }

    .lang-switcher__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        margin-top: 6px;
        min-width: 0;
        display: none;
    }

    .lang-switcher.is-open .lang-switcher__menu {
        display: block;
    }

    .lang-switcher__item {
        padding: 12px 10px;
        font-size: 15px;
    }
}

/* Footer credit (Made by TestartStudio) */
.footer-credit {
    margin-top: 8px;
    font-size: 13px;
    /*
     * EMX-FE-11: el gris heretat quedava a 1.08:1 sobre el fons del peu,
     * practicament invisible. Aquest to arriba a 4.6:1 i compleix l'AA.
     */
    color: #b9b9b9;
}

.footer-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-credit a:hover {
    color: var(--color-white, #fff);
}

/* ==========================================================================
   Subtle border-radius pass — light rounding across components.
   Uses --radius/--radius-sm. Overrides the legacy `border-radius: 0` rules.
   ========================================================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.block-card,
.blog-card,
.block-process-step,
.block-contact-item,
.block-contact-form,
.block-card-icon,
.block-process-icon,
.block-contact-icon,
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-submit {
    border-radius: var(--radius);
}

/* Media and images get the same gentle rounding (standalone media only).
   Les .service-card queden rectes (Figma 103:16537: graella amb separadors
   d'1px, sense radi), per això no surten ni aquí ni a la llista de sobre. */
.block-media,
.block-media img,
.block-card-image,
.block-image-grid img,
.block-gallery-item,
.inoxsis-image,
.inoxsis-image img,
.experience-image-item img {
    border-radius: var(--radius);
    overflow: hidden;
}

.service-card .service-card-image,
.service-card .service-card-image img {
    border-radius: 0;
}

/* Standalone contact cards/maps keep all four corners rounded */
.block-contact-grid {
    border-radius: var(--radius);
}

.block-map,
.block-map iframe {
    border-radius: var(--radius);
    overflow: hidden;
}

/* Smaller controls / chips use the tighter radius */
.block-eyebrow,
.blog-card-meta,
.lang-switcher__toggle,
.lang-switcher__menu,
.lang-switcher__item {
    border-radius: var(--radius-sm);
}

/* Icon-image inside a rounded media card shouldn't double-clip oddly */
.block-card-icon svg,
.block-process-icon svg,
.block-contact-icon svg {
    border-radius: 0;
}

/* Form controls: ensure the subtle radius wins over per-page border-radius:0 */
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form select,
.wpcf7-form textarea,
.block-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.block-contact-form select,
.block-contact-form textarea {
    border-radius: var(--radius) !important;
}
/* ==========================================================================
   Bloc d'ofertes de treball (Figma 103:12186)
   Files a tota amplada amb marc gris, filtres per tipus a sobre.
   ========================================================================== */

.block-jobs__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 48px;
}

.block-jobs__filter {
    padding: 14px 26px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.block-jobs__filter:hover {
    border-color: var(--color-black);
}

.block-jobs__filter.is-active {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.block-jobs__list {
    display: grid;
    gap: 24px;
}

/* El Figma dibuixa la targeta amb cantonades vives, però la resta de targetes
   del lloc (blog, passos, valor) van a 8px: aquí prioritzem la coherència. */
.block-jobs__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 34px;
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-border);
    border-radius: 8px;
}

/* El filtre amaga les files amb l'atribut hidden, però el display:flex de
   sobre guanya al [hidden]{display:none} del navegador i es continuarien
   veient. */
.block-jobs__item[hidden] {
    display: none;
}

.block-jobs__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.block-jobs__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.block-jobs__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
}

.block-jobs__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-jobs__meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-secondary);
}

/* L'etiqueta de tipus no s'ha d'encongir quan el títol és llarg. El radi és
   més petit que el de la targeta perquè l'element també ho és. */
.block-jobs__badge {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--color-white);
    background-color: var(--color-black);
    border-radius: 4px;
}

.block-jobs__description {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.block-jobs__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.block-jobs__column-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-black);
}

.block-jobs__points {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-jobs__points li {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-secondary);
}

.block-jobs__points li::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: var(--color-black);
}

.block-jobs__cta {
    align-self: flex-start;
    padding: 14px 32px;
}

/* Ocupa el lloc d'una targeta, així que segueix el mateix radi. */
.block-jobs__empty {
    padding: 34px;
    text-align: center;
    color: var(--color-text-secondary);
    background-color: var(--color-gray-bg);
    border-radius: 8px;
}

/* Files fantasma: comparteixen marc i coixí amb les reals perquè la llista no
   canviï d'alçada en arribar el contingut. */
.block-jobs__item--skeleton {
    gap: 16px;
    pointer-events: none;
}

.block-jobs__item--skeleton .skeleton-line {
    width: 100%;
}

.block-jobs__item--skeleton .skeleton-line--title {
    width: 45%;
    height: 24px;
}

.block-jobs__item--skeleton .skeleton-line--meta {
    width: 60%;
}

.block-jobs__more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Igual que a les files: el display:flex de sobre guanya al
   [hidden]{display:none} del navegador, i el botó es continuaria veient quan
   ja no queden ofertes per carregar. */
.block-jobs__more[hidden] {
    display: none;
}

.block-jobs__more-btn {
    min-width: 233px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
}

.block-jobs__more-btn:hover:not(:disabled) {
    color: var(--color-white);
    background-color: var(--color-black);
}

.block-jobs__more-btn:disabled {
    opacity: 0.75;
    cursor: default;
}

@media (max-width: 768px) {

    .block-jobs__item {
        padding: 24px;
    }

    /* L'etiqueta passa a sota del títol per no estrènyer-lo. */
    .block-jobs__head {
        flex-direction: column;
        gap: 12px;
    }

    .block-jobs__columns {
        grid-template-columns: 1fr;
    }

    .block-jobs__cta {
        align-self: stretch;
        text-align: center;
    }
}

/* Camp preseleccionat en venir del botó d'una oferta: un contorn breu perquè
   el canvi no passi desapercebut després del salt al formulari. */
.is-prefilled {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
    transition: outline-color var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
    .is-prefilled {
        transition: none;
    }
}


/* ============================================
   ACCESSIBILITAT (EMX-AC-01..04)
   ============================================ */

/*
 * Enllac per saltar la navegacio. Fora de la pantalla fins que rep el focus:
 * qui fa servir el teclat el troba amb el primer tabulador i s'estalvia tot
 * el menu a cada pagina.
 */
.skip-link {
    /*
     * Fix, no absolute: el body te overflow, i amb position:absolute
     * l'enllac no arribava a entrar a la pantalla en rebre el focus.
     * El desplacament es fa amb transform, que no depen del bloc contenidor.
     */
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 12px 20px;
    background: var(--color-black, #0b0b0b);
    color: #fff;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transform: translateY(-150%);
    transition: transform 0.15s ease-in-out;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/*
 * EMX-AC-03: un focus que es vegi tant sobre blanc com sobre fotografia i
 * sobre el peu fosc. El contorn fosc amb ombra blanca al voltant funciona
 * en tots tres casos; :focus-visible fa que no surti en clicar amb el ratoli.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-black, #0b0b0b);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
    border-radius: 2px;
}

/* Sobre fons foscos s'inverteix perque no es perdi. */
.footer a:focus-visible,
.footer button:focus-visible,
.block-hero a:focus-visible,
.block-hero button:focus-visible,
.hero-page a:focus-visible,
.service-card a:focus-visible,
.header.scrolled .nav-link:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.75);
}

/*
 * EMX-AC-04: el cos anava a pes 300 sobre fotografia, i amb text clar sobre
 * imatge la lletra fina es desfa (sobretot a mobil, a ple sol). Pugem a 400
 * nomes on el text va damunt d'una imatge.
 */
.block-hero-subtitle,
.hero-page-subtitle,
.service-card-text,
.service-cta-text {
    font-weight: 400;
}


/* ============================================
   PAGINES LEGALS (avis legal, privacitat, cookies)
   ============================================

   Els textos legals son prosa llarga: 17 seccions numerades amb
   subapartats, llistes i enllacos. El bloc text_media sense imatge no hi
   encaixava de sortida per dos motius mesurats:

   - .block-text-media-grid es una graella fixa de dues columnes (544px
     544px). Sense imatge, el text es quedava en mitja amplada i deixava
     544px morts al costat.
   - Dins de .block-richtext els encapcalaments no tenien marge (margin:0),
     de manera que cada seccio nova s'encastava amb el paragraf anterior, i
     els enllacos sortien del mateix color que el text i sense subratllat:
     en un document legal, l'enllac a la politica de privacitat ha de
     distingir-se.

   La classe .is-legal la posa eminox_body_class_legal() a les tres pagines.
*/

/* Una sola columna, amb amplada de lectura comoda (~75 caracters). */
.is-legal .block-text-media-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.is-legal .block-text-media .block-copy {
    max-width: 75ch;
    margin: 0 auto;
}

/* El titol de la pagina no ha de competir amb els de seccio. */
.is-legal .block-text-media .block-title {
    margin-bottom: 32px;
}

/* --- Jerarquia de seccions ------------------------------------------- */

.is-legal .block-richtext h2,
.is-legal .block-richtext h3 {
    margin: 48px 0 16px;
    color: var(--color-black);
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
}

/* Els subapartats a) b) c) pengen de la seccio: un pel mes discrets. */
.is-legal .block-richtext h4 {
    margin: 32px 0 12px;
    color: var(--color-black);
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}

/* La primera seccio no ha de separar-se del principi del bloc. */
.is-legal .block-richtext > :first-child {
    margin-top: 0;
}

/* --- Cos ------------------------------------------------------------- */

.is-legal .block-richtext p {
    margin: 0 0 16px;
}

.is-legal .block-richtext ul,
.is-legal .block-richtext ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.is-legal .block-richtext li {
    margin-bottom: 8px;
}

.is-legal .block-richtext li::marker {
    color: var(--color-text-secondary);
}

/*
 * Els enllacos han de ser identificables sense dependre nomes del color
 * (WCAG 1.4.1): per aixo van subratllats.
 */
.is-legal .block-richtext a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.is-legal .block-richtext a:hover,
.is-legal .block-richtext a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Les dades de contacte del titular, en bloc destacat. */
.is-legal .block-richtext .legal-datos {
    margin: 0 0 16px;
    padding: 20px 24px;
    border-left: 3px solid var(--color-black);
    background: var(--color-gray-bg);
}

.is-legal .block-richtext .legal-datos p {
    margin: 0;
}

/*
 * Nota per a allo que encara depen del CMP (la taula de cookies i el panell
 * de configuracio): es veu que hi falta informacio, sense fingir que ja hi es.
 */
.is-legal .block-richtext .legal-pendent {
    margin: 0 0 16px;
    padding: 16px 20px;
    border: 1px dashed var(--color-gray-border);
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 24px;
}

@media (max-width: 768px) {
    .is-legal .block-richtext h2,
    .is-legal .block-richtext h3 {
        margin-top: 36px;
        font-size: 20px;
        line-height: 26px;
    }

    .is-legal .block-richtext .legal-datos {
        padding: 16px 18px;
    }
}


/* ============================================
   INFORMACIO BASICA DE PROTECCIO DE DADES (formularis)
   ============================================

   El text que va just abans de la casella d'acceptacio als formularis de
   contacte i de candidatura. Es informacio obligatoria, pero no ha de
   competir amb els camps: va en una sola linia de lletra petita, seguida,
   perque ocupi el minim possible.

   El `display: block` no es decoratiu: el formulari reparteix els seus
   paragrafs en dues columnes i, sense aixo, les etiquetes (Responsable,
   Finalitat...) queden en una columna i els valors a l'altra.

   L'insereix docs/migrations/v1.24.0-formularis-legals.php dins del _form
   de cada formulari CF7.
*/
.wpcf7-form p.form-legal {
    display: block !important;
    grid-column: 1 / -1;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

/* Les etiquetes marquen el ritme de lectura sense trencar la linia. */
.wpcf7-form p.form-legal strong {
    color: var(--color-text-secondary);
    font-weight: 700;
}

/*
 * Els enllacos han de ser identificables sense dependre nomes del color
 * (WCAG 1.4.1).
 */
.wpcf7-form p.form-legal a,
.wpcf7-form .wpcf7-acceptance a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wpcf7-form p.form-legal a:hover,
.wpcf7-form .wpcf7-acceptance a:hover,
.wpcf7-form p.form-legal a:focus-visible,
.wpcf7-form .wpcf7-acceptance a:focus-visible {
    text-decoration-thickness: 2px;
}

@media (max-width: 768px) {
    .wpcf7-form p.form-legal {
        font-size: 11px;
        line-height: 17px;
    }
}

/* ==========================================================================
   Banner de cookies (provisional, fins que entri el Conzent OCI)
   ========================================================================== */

.cookie-banner {
    position: fixed;
    z-index: 9999;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    max-width: 560px;
    margin-left: auto;
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    font-family: var(--font-family);
}

.cookie-banner__title {
    margin: 0 0 var(--spacing-xs);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.cookie-banner__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.cookie-banner__link {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* El detall per categories: tancat fins que es prem «Configurar». */
.cookie-banner__options {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-border);
    max-height: 40vh;
    overflow-y: auto;
}

.cookie-option {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    padding: var(--spacing-xs) 0;
    cursor: pointer;
}

.cookie-option--locked {
    cursor: default;
    opacity: 0.75;
}

.cookie-option input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.cookie-option__body {
    display: block;
}

.cookie-option__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cookie-option__badge {
    margin-left: var(--spacing-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-gray-bg);
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.cookie-option__text {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.cookie-btn {
    flex: 1 1 auto;
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cookie-btn--solid {
    border: 1px solid var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
}

.cookie-btn--solid:hover {
    background: #2a2a2a;
}

.cookie-btn--ghost {
    border: 1px solid var(--color-gray-border);
    background: var(--color-white);
    color: var(--color-text-primary);
}

.cookie-btn--ghost:hover {
    background: var(--color-gray-bg);
}

/* Botó del peu per tornar a obrir el panell. */
.footer-cookies {
    margin: 0;
}

/* Va a la mateixa fila que els enllaços legals del peu, així que s'hi iguala:
   mateixa font, mateix blanc i el mateix hover per opacitat. Segueix sent un
   <button> perquè obre el panell, no navega enlloc. */
.footer-cookies__btn {
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.footer-cookies__btn:hover {
    opacity: 0.7;
}

/* Taula de cookies de la política. Ha de poder desplaçar-se sola: en mòbil
   cinc columnes no hi caben i el <body> no ha de fer scroll horitzontal. */
.legal-taula-wrap {
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

.legal-taula {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-taula th,
.legal-taula td {
    padding: 10px var(--spacing-sm);
    border: 1px solid var(--color-gray-border);
    text-align: left;
    vertical-align: top;
}

.legal-taula th {
    background: var(--color-gray-bg);
    font-weight: 600;
    white-space: nowrap;
}

.legal-taula code {
    font-size: 13px;
    word-break: break-word;
}

@media (max-width: 600px) {
    .cookie-banner {
        right: var(--spacing-sm);
        bottom: var(--spacing-sm);
        left: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .cookie-banner__actions {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Carrusel d'una targeta per vista (blocs de targetes i galeria amb fotos)
   ========================================================================== */

/* Sense JS el marcatge Swiper no fa res i les targetes queden apilades: amb
   overflow amagat només se'n veuria una i no hi hauria manera d'arribar a la
   resta. Fins que el carrusel s'inicialitza, doncs, es veuen totes. */
.cards-swiper-full:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    gap: var(--spacing-lg);
}

.cards-swiper-full .block-card,
.cards-swiper-full .block-gallery-item {
    height: 100%;
    margin: 0;
}

.cards-swiper-full .block-card-image,
.cards-swiper-full .block-gallery-item img {
    width: 100%;
    height: 384px;
    object-fit: cover;
}

/* Fletxes i punts, sota el carrusel i centrats (Figma 103:2565). */
.block-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.block-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 0;
    border-radius: var(--radius);
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.block-carousel-btn:hover {
    background-color: #2a2a2a;
}

/* Swiper amaga les fletxes quan no hi ha on anar; amb loop no passa, però
   si algun dia es treu el loop val més que ocupin lloc i no ballin. */
.block-carousel-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.block-carousel-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}

.block-carousel-dots .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 !important;
    background-color: var(--color-gray-border);
    opacity: 1;
}

.block-carousel-dots .swiper-pagination-bullet-active {
    background-color: var(--color-black);
}

@media (max-width: 768px) {
    .cards-swiper-full .block-card-image,
    .cards-swiper-full .block-gallery-item img {
        height: 240px;
    }
}