/* Estilos CSS Combinados y Optimizados
  Organizado por secciones lógicas para mejor mantenimiento.
*/

/* --- CONFIGURACIÓN DE FUENTE (GOOGLE FONTS) --- */
/* 1. Pega aquí el @import de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');

/* ========================================================================
   Variables Globales y Configuración Base
   ======================================================================== */

:root {
    /* 2. Define aquí el nombre de la fuente */
    --main-font: 'Share Tech', sans-serif;

    --grid-cell-size: 20px;
    /* tamaño de celda */
    --grid-line-alpha: 0.04;
    /* opacidad de línea (0.03 = muy sutil, 0.1 = visible, 0.2 = más visible, 0.3+ = muy visible) */
    --grid-line-color: 255, 255, 255;
    /* color en formato R,G,B */

    /* ========================================================================
       Tipografía Fluida - Edita estos valores para ajustar los tamaños de texto
       ======================================================================== */
    /* Título Hero (H1) - [MÒDUL] */
    --fs-hero-h1-min: 6rem;
    /* Tamaño mínimo - aumentado */
    --fs-hero-h1-preferred: 25vw;
    /* Tamaño ideal (viewport width) - aumentado */
    --fs-hero-h1-max: 18rem;
    /* Tamaño máximo - aumentado */

    /* Texto mediano (glow) - CONVERTIM IDEES EN WEBS */
    --fs-medium-min: 1.2rem;
    --fs-medium-preferred: 3vw;
    --fs-medium-max: 1.8rem;

    /* Texto del enlace de scroll - DESPLAÇA'T PER VEURE */
    --fs-scroll-link-min: 18px;
    --fs-scroll-link-preferred: 2.2vw;
    --fs-scroll-link-max: 30px;

    /* Espaciado uniforme del hero - usado para mantener la misma distancia entre elementos */
    --hero-gap-min: 1rem;
    --hero-gap-preferred: 2.5vw;
    --hero-gap-max: 2rem;
}

/* Estilos de selección de texto - Blanco en vez de azul */
::selection {
    background-color: #ffffff !important;
    color: #000000 !important;
}

::-moz-selection {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Eliminar completamente badges de Webflow */
a.w-webflow-badge,
.w-webflow-badge,
a[href*="webflow.com?utm_campaign=brandjs"],
a[href*="webflow.com"][href*="utm_campaign=brandjs"],
a[href*="webflow.com"][href*="brandjs"],
[class*="w-webflow-badge"],
[id*="webflow-badge"],
a[href*="webflow.com"]:has([href*="brandjs"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    transform: scale(0) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: none !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

/* Ocultar cualquier contenedor padre que solo contenga badges */
body > a[href*="webflow.com"]:only-child,
body > .w-webflow-badge:only-child {
    display: none !important;
}

/* Ajustes generales */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    cursor: none;
    /* Desactivar cursor predeterminado */
    position: relative;
    font-family: var(--main-font);
}

/* Prevenir scrollbars duplicados en móvil/tablet */
@media (max-width: 991px) {
    html {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body {
        overflow: visible;
        /* Permitir que el contenido fluya y lo gestione el html */
    }

    /* Asegurar que Lenis no cree wrappers en móvil */
    html.lenis,
    html.lenis body {
        height: auto;
    }

    html.lenis {
        overflow: visible;
    }
}

/* Prevenir doble scroll en desktop cuando Lenis está activo */
@media (min-width: 992px) {

    /* Cuando Lenis está activo, permitir overflow para middle-click pero ocultar scrollbar */
    html.lenis {
        overflow: auto;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    html.lenis::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge */
    }

    /* El body debe heredar */
    html.lenis body {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html.lenis body::-webkit-scrollbar {
        display: none;
    }

    /* Asegurar que no haya scroll horizontal */
    html.lenis,
    html.lenis body {
        overflow-x: hidden;
    }

    /* Si no hay scroll necesario, no permitir scroll en absoluto */
    html:not(.lenis) {
        overflow-y: auto;
    }

    /* Cuando no hay scroll necesario (contenido cabe en pantalla), no permitir scroll */
    html.no-scroll-needed,
    html.no-scroll-needed body {
        overflow: hidden !important;
    }
}

/* Cursor personalizado - solo en desktop */
/* Aplicar cursor: none inmediatamente, incluso antes de que cargue el JavaScript */
@media (min-width: 992px) {

    html,
    body {
        cursor: none !important;
    }

    /* Aplicar a elementos comunes que podrían mostrar cursor predeterminado */
    a,
    button,
    [role="button"],
    .btn,
    .submit-button,
    .checkbox,
    .radio,
    .checkbox-field,
    .checkbox-label,
    .form-label,
    input[type="button"],
    input[type="submit"],
    label[for],
    .primary-button,
    .button-content,
    .arrow-wrapper,
    .contact-link,
    .curzr-hover,
    .navbar,
    .navbar *,
    .navbar a,
    .navbar .brand,
    .navbar .is-projectes-link,
    [data-primary-button],
    [data-primary-button] *,
    /* Clases de navegación */
    .nav,
    .nav *,
    .nav-brand,
    .nav-link,
    .inline-block,
    .current,
    /* Anchor links específicamente */
    a[href*="#"],
    a[href*="#"] *,
    a[href*="#"]:hover,
    a[href*="#"]:active,
    a[href*="#"]:focus {
        cursor: none !important;
    }

    /* Asegurar cursor: none en TODOS los estados para prevenir flash del cursor predeterminado */
    a:hover,
    a:active,
    a:focus,
    a:visited,
    button:hover,
    button:active,
    button:focus,
    [role="button"]:hover,
    [role="button"]:active,
    [role="button"]:focus,
    .btn:hover,
    .btn:active,
    .btn:focus,
    .submit-button:hover,
    .submit-button:active,
    .submit-button:focus,
    .primary-button:hover,
    .primary-button:active,
    .primary-button:focus,
    .curzr-hover:hover,
    .curzr-hover:active,
    .curzr-hover:focus,
    .navbar a:hover,
    .navbar a:active,
    .navbar a:focus,
    .navbar a:visited,
    .navbar .brand:hover,
    .navbar .brand:active,
    .navbar .brand:focus,
    .navbar .is-projectes-link:hover,
    .navbar .is-projectes-link:active,
    .navbar .is-projectes-link:focus,
    [data-primary-button]:hover,
    [data-primary-button]:active,
    [data-primary-button]:focus,
    [data-primary-button]:hover *,
    [data-primary-button]:active *,
    [data-primary-button]:focus *,
    /* Clases de navegación en todos los estados */
    .nav:hover,
    .nav:active,
    .nav:focus,
    .nav-brand:hover,
    .nav-brand:active,
    .nav-brand:focus,
    .nav-link:hover,
    .nav-link:active,
    .nav-link:focus,
    .inline-block:hover,
    .inline-block:active,
    .inline-block:focus,
    .current:hover,
    .current:active,
    .current:focus {
        cursor: none !important;
    }

    /* Ocultar el caret (cursor de texto predeterminado) en inputs y textareas */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    [contenteditable="true"] {
        caret-color: transparent !important;
    }

    /* Permitir cursor de texto solo en inputs/textarea cuando sea necesario */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    [contenteditable="true"]:focus {
        cursor: text !important;
    }
}

@media (max-width: 991px) {

    html,
    body {
        cursor: auto;
        /* Restaurar cursor en móvil */
    }
}

/* Fondo y Capas Base */
.bg-asset {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Asegurar que ocupe al menos la altura de la ventana */
}

/* Prevenir overflow en móvil que cause scrollbars duplicados */
@media (max-width: 991px) {
    .page-wrapper {
        overflow: visible;
    }
}

/* Cuadrícula de fondo */
.bg-grid {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image:
        linear-gradient(rgba(var(--grid-line-color),
                var(--grid-line-alpha)) 1px, rgba(255, 255, 255, 0) 1px),
        linear-gradient(90deg, rgba(var(--grid-line-color),
                var(--grid-line-alpha)) 1px, rgba(255, 255, 255, 0) 1px);
    background-size: var(--grid-cell-size) var(--grid-cell-size),
        var(--grid-cell-size) var(--grid-cell-size);
    background-position: top left, top left;
    opacity: 1;
}

/* ========================================================================
   Componentes Reutilizables
   ======================================================================== */

/* Botón primario con efecto de texto escalonado */
.brand [data-primary-button] {
    overflow: hidden;
    position: relative;
    display: inline-block;
    /* No establecer transform aquí, dejar que GSAP lo maneje para el hover */
    will-change: transform;
}

.brand [data-primary-button] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.brand:hover [data-primary-button] span {
    transform: translateY(-1.3em) rotate(0.001deg);
}

/* Hover para strong dentro de enlaces - cambiar a blanco */
a.is-glow:hover strong,
a.text-size-medium:hover strong,
a.treballem-link:hover strong,
.treballem-link.is-hovered strong {
    color: #ffffff !important;
}

/* Wrapper para el enlace TREBALLEM JUNTS */
.treballem-link {
    position: relative;
    z-index: 0;
}

/* Hover para footer - color eliminado, mantener color original */

/* Animación de resplandor (glow) */
.is-glow {
    display: inline-block;
    white-space: nowrap;
}

.is-glow-space {
    animation: none !important;
    opacity: 1 !important;
}

.is-glow span {
    display: inline-block;
    opacity: 0.5;
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ========================================================================
   Correcciones y Overrides Específicos
   ======================================================================== */

/* Correcciones de GSAP Pinning */
.pin-spacer {
    pointer-events: none !important;
}

.pin-spacer>* {
    pointer-events: auto !important;
}

.hero-section,
.hero-section * {
    pointer-events: auto !important;
}

/* ========================================================================
   Layouts Específicos (Desktop Primero)
   ======================================================================== */

/* Grid de Trabajos (Works Grid) */
@media (min-width: 992px) {
    [data-works-grid] .grid__img {
        will-change: transform, opacity;
        transform-style: preserve-3d;
    }

    /* Navbar - Mostrar todos los enlaces en desktop y tablets */
    .navbar .navbar-component>.is-projectes-link {
        display: block !important;
    }

    /* Textos del hero en desktop */
    .hero-content .text-size-medium.is-glow {
        font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
        /* Tamaño aumentado en desktop */
    }

    /* Tamaño de fuente del navbar en desktop - más pequeño */
    .navbar .brand,
    .navbar .navbar-component,
    .navbar .navbar-component *,
    .navbar .is-projectes-link,
    .navbar .is-projectes-link *,
    .navbar [data-primary-button] {
        font-size: clamp(0.95rem, 1.4vw, 1.25rem) !important;
    }

    .navbar strong {
        font-size: clamp(0.95rem, 1.4vw, 1.25rem) !important;
        font-weight: 700 !important;
    }
}

/* Copyright / Footer */
.copyright {
    text-align: center;
    width: 100%;
    opacity: 0;
    /* Inicialmente oculto para evitar parpadeo */
    visibility: hidden;
    /* Oculto hasta que se anime */
    transition: none;
    /* Sin transición CSS, GSAP maneja las animaciones */
    z-index: 10;
    /* Asegurar que esté por encima de otros elementos */
    position: relative;
    /* Asegurar posicionamiento relativo para mantenerlo en el flujo */
    margin-top: auto;
    /* Empujar al final si está en un flex container */
    flex-shrink: 0;
    /* No permitir que se encoja */
}

.copyright.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.copyright .paragraph {
    text-align: center;
}

.credits-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.copyright .credits-wrapper {
    justify-content: center !important;
}

.credits-wrapper .crediits,
.credits-wrapper .paragraph {
    text-align: center;
    margin: 0 auto;
}

/* Limitar hover del footer solo al texto de créditos */
.copyright {
    pointer-events: none;
}

.copyright .paragraph.is-light {
    pointer-events: auto;
    display: inline-block;
    position: relative;
    z-index: 11;
    /* Asegurar que el texto esté por encima */
}

.copyright .padding-global {
    display: flex;
    justify-content: center;
    width: 100%;
}

.copyright .layout-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

/* --- INICIO: CORRECCIÓN VISIBILIDAD FOOTER EN MÓVIL Y DESKTOP --- */
/* NO forzar visibilidad inicial - dejar que GSAP maneje la animación */
/* El footer comenzará oculto y se animará desde abajo */

/* Estilos de los créditos en móvil, ahora aplicados de forma global */
@media (max-width: 991px) {
    .credits-wrapper {
        position: fixed;
        /* Fijar a la pantalla */
        left: 0;
        right: 0;
        bottom: 12px;
        /* Un poco de espacio inferior */
        justify-content: center;
        opacity: 0;
        /* Inicialmente oculto para evitar parpadeo antes de la animación JS */
        visibility: hidden;
        /* Oculto hasta que se anime */
        z-index: 100;
        /* Asegurar que está por encima de otros elementos */
        pointer-events: auto;
        /* Permitir clics/hovers */
        will-change: opacity, transform;
        /* Optimización para la animación */
    }

    /* Si los créditos están dentro del hero, ajustar posición */
    .hero-section .credits-wrapper {
        position: absolute;
        /* Mantener la lógica original para la home */
        bottom: 24px;
    }
}

/* Asegurar visibilidad del footer en desktop */
@media (min-width: 992px) {

    /* Hero section debe ocupar exactamente 100vh */
    .hero-section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* En index.html, el footer debe estar dentro del hero-section, posicionado absolutamente */
    .hero-section .copyright {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding-bottom: 24px;
        /* Espacio inferior */
    }

    /* En otras páginas (como contacte.html), el page-wrapper debe tener 100vh mínimo */
    .page-wrapper.has-contact-wrapper {
        min-height: 100vh;
        position: relative;
    }

    /* El section con contact-wrapper debe ocupar 100vh */
    .page-wrapper>section .contact-wrapper {
        min-height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    /* Footer en contacte.html debe estar posicionado absolutamente dentro del page-wrapper */
    .page-wrapper.has-contact-wrapper [data-role="footer-placeholder"] .copyright,
    .page-wrapper.has-contact-wrapper>.copyright {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding-bottom: 24px;
        z-index: 10;
    }

    .copyright {
        display: block !important;
        /* NO forzar opacity/visibility aquí - dejar que GSAP maneje la animación */
    }

    .copyright .credits-wrapper {
        position: relative !important;
        /* Mantener en el flujo */
    }

    /* El texto del footer se animará desde abajo */
    .copyright .paragraph.is-light {
        position: relative !important;
        /* NO forzar transform aquí - GSAP lo manejará */
    }
}

/* --- FIN: CORRECCIÓN VISIBILIDAD FOOTER EN MÓVIL Y DESKTOP --- */

/* --- INICIO: Barra de Scroll Personalizada para Desktop con Lenis --- */
@media (min-width: 992px) {
    .custom-scrollbar {
        position: fixed;
        top: 0;
        right: 0;
        width: 8px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.05);
        z-index: 9999;
        pointer-events: auto;
        /* Permitir interacción con el ratón */
        transform: translateX(100%);
        /* Posición inicial fuera de la pantalla */
        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        /* Transición suave */
    }

    .custom-scrollbar.is-visible {
        transform: translateX(0);
        /* Posición final visible */
    }

    .custom-scrollbar-thumb {
        width: 100%;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        will-change: height, transform;
        /* Optimización para animaciones */
    }
}

/* --- FIN: Barra de Scroll Personalizada para Desktop con Lenis --- */

/* ========================================================================
   Clases de Utilidad (Optimizaciones Finales)
   ======================================================================== */

/* Page Mask Flex Layout */
.page-mask-flex {
    display: flex;
}

.mask-bar {
    width: 100%;
    height: 0%;
}

/* Image Filters */
.img-no-blur {
    filter: blur(0px);
}

/* GSAP Initial States (to avoid inline styles) */
.gsap-opacity-0 {
    opacity: 0;
}

.gsap-width-05 {
    width: 0.5%;
}


/* Navbar - Estado inicial oculto para evitar parpadeo */
.navbar {
    opacity: 0;
    will-change: transform, opacity;
    overflow: visible !important;
}

/* Asegurar que el logo no se corte al animarse */
.navbar .container {
    overflow: visible !important;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.navbar .navbar-component {
    overflow: visible !important;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 1rem;
}

.navbar-component>.is-projectes-link:first-child {
    justify-self: start;
}

.navbar-component>.is-projectes-link:nth-child(2) {
    justify-self: center;
}

.navbar-component>.is-projectes-link:last-child {
    justify-self: end;
}

.navbar .brand.logo {
    overflow: visible !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: relative;
}

.navbar .brand.logo>div {
    overflow: visible !important;
    position: relative;
}

/* Aplicar el mismo padding/margin a todos los enlaces del navbar para alineación consistente */
.navbar .brand {
    overflow: visible !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    position: relative;
}

.navbar .brand>div {
    overflow: visible !important;
    position: relative;
}

.navbar .is-projectes-link {
    margin: 0 0px 0px 0px;
}

/* Anular el margen izquierdo solo para el primer elemento del menú */
.navbar-component>.is-projectes-link:first-child {
    margin-left: 0;
}

/* Tamaño de fuente del navbar - uniforme (base, se sobrescribe en desktop y móvil) */
.navbar .brand,
.navbar .navbar-component,
.navbar .navbar-component *,
.navbar .is-projectes-link,
.navbar .is-projectes-link *,
.navbar [data-primary-button] {
    font-size: clamp(0.95rem, 1.4vw, 1.25rem) !important;
    font-weight: 500 !important;
}

.navbar strong {
    font-size: clamp(0.95rem, 1.4vw, 1.25rem) !important;
    font-weight: 700 !important;
}

/* Home Hero y CTA Scroll */
.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Hero section en página de proyectos - ocupar 100% del ancho */
.hero-section .padding-global {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hero-section .padding-global .layout-container,
.hero-section .padding-global .container-large,
.hero-section .padding-global .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Wrapper para texto + flechas - ahora dentro de hero-content, hereda el gap */
.home-hero .scroll-link-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
    gap: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
    /* Gap entre texto y flechas */
}

/* Texto del scroll - solo visual, no clickeable */
.home-hero .scroll-link-wrapper .text-size-medium {
    pointer-events: none;
    /* No es clickeable */
    cursor: default;
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: block;
    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Flechas de scroll - SOLO estas son clickeables */
.cta-scroll-arrows {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: clamp(30px, 8vh, 50px);
    padding: 12px 16px;
    pointer-events: auto;
    /* Permitir interacción */
    overflow: visible;
    background: transparent !important;
    cursor: none;
    /* Cursor personalizado en desktop */
    text-decoration: none;
}

.cta-scroll-arrows .arrow {
    width: clamp(1.8em, 4vw, 2.5em);
    /* Ancho fluido - bastante más grande */
    height: clamp(1.8em, 4vw, 2.5em);
    /* Alto fluido - bastante más grande */
    background: transparent !important;
    border-width: 0 0.25em 0.25em 0;
    /* Borde más grueso para flechas más grandes */
    border-style: solid;
    border-color: #fff;
    transform: translateY(0%) rotate(45deg);
    opacity: 0.7;
    /* Opacidad inicial para la animación */
    animation: scrolldown 1.2s ease-in-out infinite !important;
    /* Forzar animación */
    box-sizing: content-box;
    transform-origin: center center;
    display: block;
    visibility: visible !important;
}

.cta-scroll-arrows .a1 {
    animation-delay: 0s !important;
    animation: scrolldown 1.2s ease-in-out infinite !important;
}

.cta-scroll-arrows .a2 {
    animation-delay: 0.15s !important;
    animation: scrolldown 1.2s ease-in-out infinite !important;
    margin-top: -0.5em;
    /* Margen relativo para un solapamiento correcto */
}

@keyframes scrolldown {
    0% {
        transform: translateY(15%) rotate(45deg);
        opacity: 0.7;
    }

    50% {
        transform: translateY(0%) rotate(45deg);
        opacity: 0.2;
    }

    100% {
        transform: translateY(15%) rotate(45deg);
        opacity: 0.7;
    }
}

/* Asegurar que ambas flechas parpadeen incluso cuando tienen data-js-animated */
.cta-scroll-arrows .arrow[data-js-animated="true"] {
    visibility: visible !important;
    animation: scrolldown 1.2s ease-in-out infinite !important;
    /* No forzar opacity aquí, dejar que la animación la controle */
}

/* Acelerar animación al hacer hover (0.6s más rápido) - SOLO en dispositivos con mouse */
@media (hover: hover) {

    .cta-scroll-arrows:hover .arrow,
    .cta-scroll-arrows:hover .a1,
    .cta-scroll-arrows:hover .a2,
    .cta-scroll-arrows.curzr-hover:hover .arrow,
    .cta-scroll-arrows.curzr-hover:hover .a1,
    .cta-scroll-arrows.curzr-hover:hover .a2 {
        animation-duration: 0.6s !important;
        animation: scrolldown 0.6s ease-in-out infinite !important;
    }
}

/* Desactivar animaciones al tocar en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {

    /* Mantener animación normal, sin cambios al tocar */
    .cta-scroll-arrows:active .arrow,
    .cta-scroll-arrows:active .a1,
    .cta-scroll-arrows:active .a2,
    .cta-scroll-arrows:focus .arrow,
    .cta-scroll-arrows:focus .a1,
    .cta-scroll-arrows:focus .a2 {
        animation-duration: 1.2s !important;
        animation: scrolldown 1.2s ease-in-out infinite !important;
        /* No cambiar la animación al tocar */
    }

    /* Asegurar que no haya transformaciones adicionales al tocar */
    .cta-scroll-arrows:active {
        transform: none !important;
    }
}

/* --- Mensaje de éxito del formulario (animado a la derecha del botón) --- */
.success-message.form-done {
    display: none !important;
    /* Forzar oculto por defecto */
    white-space: nowrap;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    position: absolute;
    left: calc(33.333% + 20px);
    top: 50%;
    transform: translateY(-50%);
    /* Ancho máximo para que no se salga de la pantalla */
    max-width: calc(66.666% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.success-message.form-done .success {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    /* Limitar ancho al contenedor del formulario */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Asegurar que el contenedor del botón permita flexbox y respete el ancho del formulario */
.primary-button.is-relative,
.form-submit-wrapper {
    position: relative;
    width: 100%;
    display: block;
    margin-top: 20px;
    overflow: visible;
    padding-top: 6px;
    /* Espacio adicional para el transform hacia arriba */
}

/* Estilos básicos para el botón submit */
.submit-button {
    width: 33.333%;
    padding: 0;
    height: auto;
    min-height: 52px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
    cursor: none !important;
    border-radius: 4px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    line-height: 1;
    overflow: visible;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 0;
    /* Resetear estilos por defecto del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Permitir que GSAP maneje las transformaciones */
    will-change: transform;
    /* No usar transition aquí, GSAP manejará las animaciones */
    transform: translateY(-20px);
}

.submit-button:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

.submit-button:active {
    background: #ffffff;
    border-color: #ffffff;
}

.submit-button:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
}

/* --- Project Link Button --- */
.project-link {
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    /* Start lower for more visible upward motion */
    z-index: 10;
    opacity: 0;
    /* Hidden by default */

    /* Display & Sizing - Match Connectem/Submit Button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 100px;
    /* Reduced from 160px for narrower button */
    height: 48px;
    /* Similar to submit-button */
    padding: 0 16px;
    /* Reduced from 24px for narrower button */

    /* Typography */
    font-family: inherit;
    font-size: 13px;
    /* Larger font */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    /* Visuals */
    background: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: none;
    /* Prevent clicking when hidden */

    /* Animation */
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, color 0.2s ease;
    will-change: transform, opacity;
}

/* Project Image Blur Effect */
.grid__img .image {
    transition: filter 0.25s ease;
    /* Faster blur */
    will-change: filter;
}

/* Solo aplicar efectos hover en dispositivos con mouse (no táctiles) */
@media (hover: hover) {
    .grid__img:hover .image {
        filter: blur(5px) !important;
        /* Force override inline style */
    }

    /* Show on hover of the parent container (grid__img) */
    .grid__img:hover .project-link {
        opacity: 1;
        transform: translate(-50%, -50%);
        /* Move up to center */
        pointer-events: auto;
        /* Enable clicking */
    }

    /* Button specific hover effect */
    .grid__img .project-link:hover {
        transform: translate(-50%, -65%);
        /* Move up slightly more */
    }
}

/* Estilos para dispositivos táctiles: hacer proyectos siempre clickeables */
@media (hover: none) and (pointer: coarse) {

    /* Hacer el botón siempre visible y clickeable en táctiles */
    .grid__img .project-link {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: auto !important;
        /* Asegurar que sea clickeable */
        touch-action: manipulation;
        /* Mejorar la respuesta táctil */
        z-index: 10;
    }

    /* Asegurar que el contenedor permita toques y sea clickeable */
    .grid__img {
        touch-action: manipulation;
        cursor: pointer;
        /* Indicar que es clickeable */
        position: relative;
        /* Asegurar contexto de posicionamiento */
    }

    /* La imagen no debe bloquear los toques */
    .grid__img .image {
        pointer-events: none;
        /* La imagen no bloquea los toques, el JavaScript maneja los toques en el contenedor */
    }

    /* Feedback visual al tocar el contenedor */
    .grid__img:active {
        opacity: 0.9;
        transform: scale(0.98);
        transition: opacity 0.1s ease, transform 0.1s ease;
    }
}

/* --- INICIO: Estilos del Título del Hero (MODIFICADO) --- */

/* 1. MÒDUL: Texto normal sin fondo ni borde */
.heading-style-h1.is-hero {
    background: transparent !important;
    border: none !important;
}

.heading-style-h1.is-hero .text-spam {
    background: transparent !important;
    border: none !important;
    width: auto !important;
}


[data-anim-id="88335f1a-5f47-9f32-4156-0da995d1c0d3"] {
    animation: none !important;
    transition: none !important;
}

[data-anim-id="6d3cf483-00bb-3191-1729-3bf064f8bc50"] {
    width: auto !important;
    animation: none !important;
    transition: none !important;
}

/* 3. Hacer que los h1 del hero aparezcan en una sola línea */
.hero-content h1.heading-style-h1 {
    /* Título principal [MÒDUL] - ahora fluido */
    font-size: clamp(var(--fs-hero-h1-min), var(--fs-hero-h1-preferred), var(--fs-hero-h1-max));
    /* Aumentado para móviles */
    line-height: 1;
    display: inline-block !important;
    vertical-align: middle;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

/* Asegurar que los corchetes también estén en línea */
.hero-content h1.heading-style-h1 .bracket-close {
    display: inline !important;
    white-space: nowrap;
    position: relative;
    /* Para que la animación de transform funcione
correctamente */
}

.hero-content h1.heading-style-h1 .text-spam {
    display: inline !important;
    white-space: nowrap;
}

/* --- FIN: Estilos del Título del Hero --- */


/* --- INICIO: Contenedor del Hero (Simplificado) --- */
.max-width_hero {
    position: relative;
    width: 100%;
    border: none !important;
    background-color: transparent !important;
    padding: 0;
    overflow: visible;
    left: auto;
    transform: none;
}

.hero-background {
    display: none !important;
    /* Eliminar el fondo */
}

/* Espaciado del hero-content - ahora fluido */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
    /* Espaciado fluido */
    width: 100%;
    padding: 0;
}

/* Textos superior e inferior - Estilo unificado y fluido */
.hero-content .text-size-medium.is-glow,
.scroll-link-wrapper .text-size-medium.is-glow {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    /* Tamaño de fuente fluido - aumentado */
    line-height: 1.3;
    letter-spacing: 0.06em;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 1;
    /* Asegurar que sean visibles por defecto (JS controla la animación de entrada) */
    visibility: visible;
    transform: translate(0px, 0px);
    /* Limpiar transformaciones residuales */
}

/* Estilos comunes para ambos textos animados por JS */
.text-size-medium.is-glow[data-js-animated="true"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0px, 0px) !important;
}

/* --- FIN: Bordes del Contenedor del Hero --- */


/* ========================================================================
   Componente: Indicador de Scroll Móvil
   ======================================================================== */

.mobile-scroll-hint {
    display: none;
}

@media (min-width: 992px) {
    .mobile-scroll-hint {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 991px) {
    .mobile-scroll-hint {
        position: fixed !important;
        /* fijado al viewport siempre */
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(12px + env(safe-area-inset-bottom));
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
        color: #fff;
        font-size: 12px;
        letter-spacing: .04em;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease, transform .3s ease;
        z-index: 2147483647;
        /* topmost */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        max-width: 88vw;
        text-align: center;
    }

    .mobile-scroll-hint .hint-chevrons {
        display: inline-flex;
        gap: 2px;
    }

    .mobile-scroll-hint .hint-chevron {
        display: inline-block;
        opacity: .9;
    }

    .mobile-scroll-hint.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Fallbacks de Safe Area (iOS) */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 991px) {
        .mobile-scroll-hint {
            bottom: calc(12px + constant(safe-area-inset-bottom));
        }
    }
}

@supports (height: 100dvh) {
    @media (max-width: 991px) {
        .mobile-scroll-hint {
            bottom: calc(12px + env(safe-area-inset-bottom));
        }
    }
}

/* ========================================================================
   Media Queries (Móvil y Tablet)
   ======================================================================== */

@media (max-width: 991px) {

    /* Ajustes generales */
    body {
        transform: translateZ(0);
    }

    /* Bajar el título Contacta'ns en móviles y tablets */
    .contact .is-mobile h1.heading-style-h1 {
        margin-top: 30px !important;
    }

    /* Navbar en móvil - resetear padding/margin para alineación correcta */
    .navbar .brand {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Tamaño de fuente del navbar en móvil - más grande que el texto del hero */
    .navbar .brand,
    .navbar .navbar-component,
    .navbar .navbar-component *,
    .navbar .is-projectes-link,
    .navbar .is-projectes-link *,
    .navbar [data-primary-button] {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }

    .navbar strong {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
        font-weight: 700 !important;
    }

    .navbar .brand.logo {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .navbar .navbar-component {
        align-items: center !important;
    }

    /* Grid de Trabajos (Móvil) */
    [data-works-grid] {
        transform: none !important;
        perspective: none !important;
        will-change: auto !important;
    }

    [data-works-grid] .grid__img {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: auto !important;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    [data-works-grid] * {
        transform-style: flat !important;
        -webkit-transform-style: flat !important;
    }

    .hero-content {
        gap: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
    }

    /* Título [MÒDUL] más grande en tablet/móvil */
    .hero-content h1.heading-style-h1 {
        font-size: clamp(4rem, 20vw, 14rem) !important;
        /* Más grande en móviles */
    }

    /* Hero CTA (Tablet) */
    .home-hero .scroll-link {
        margin-top: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
        /* Mismo espaciado que el gap del hero-content */
    }

    /* .home-hero .scroll-link .text-size-medium {
        font-size: clamp(12px, 1.8vw, 18px);
    } */

    .cta-scroll-arrows {
        margin-top: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
        /* Mismo espaciado que el gap del hero-content */
        min-height: clamp(25px, 6vh, 35px);
    }

    .cta-scroll-arrows .arrow {
        width: clamp(1.8em, 5vw, 2.5em);
        /* Bastante más grande */
        height: clamp(1.8em, 5vw, 2.5em);
        /* Bastante más grande */
        border-width: 0 0.25em 0.25em 0;
        /* Borde más grueso para flechas más grandes */
    }

    .hero-content .text-size-medium.is-glow,
    .scroll-link-wrapper .text-size-medium.is-glow {
        font-size: clamp(0.75rem, 2.2vw, 1.1rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Desactivar animaciones hover del navbar en móvil */
    .navbar .brand *,
    .navbar .brand {
        transform: none !important;
        transition: none !important;
    }

    /* Desactivar todas las animaciones hover del navbar en móvil */
    .navbar * {
        transform: none !important;
        transition: none !important;
    }

    /* Créditos en Hero (Móvil) */
    .hero-section {
        position: relative;
    }

    /* Eliminamos la regla original para .hero-section .credits-wrapper
       porque ya la hemos gestionado de forma más global arriba */
}

@media (max-width: 767px) {

    /* Navbar (Móvil pequeño) - Ocultar solo "projectes" (segundo enlace) */
    .navbar .navbar-component>.is-projectes-link:nth-child(2) {
        display: none !important;
    }

    /* Ajustar grid del navbar en móvil pequeño para 2 elementos (MÒDUL y treballem junts) */
    .navbar .navbar-component {
        grid-template-columns: 1fr 1fr;
    }

    /* Tamaño de fuente del navbar en móvil pequeño - más grande */
    .navbar .brand,
    .navbar .navbar-component,
    .navbar .navbar-component *,
    .navbar .is-projectes-link,
    .navbar .is-projectes-link *,
    .navbar [data-primary-button] {
        font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
    }

    .navbar strong {
        font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
        font-weight: 700 !important;
    }

    .hero-content {
        gap: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
    }

    /* Título [MÒDUL] aún más grande en móvil pequeño */
    .hero-content h1.heading-style-h1 {
        font-size: clamp(4.5rem, 22vw, 15rem) !important;
        /* Aún más grande en móvil pequeño */
    }

    /* Hero CTA (Móvil) */
    .home-hero .scroll-link {
        margin-top: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
        /* Mismo espaciado que el gap del hero-content */
    }

    .home-hero .scroll-link .is-glow {
        white-space: normal;
        /* permitir salto de línea */
        display: block;
        text-align: center;
    }

    /* .home-hero .scroll-link .text-size-medium {
        font-size: clamp(11px, 2.5vw, 15px);
    } */

    .cta-scroll-arrows {
        margin-top: clamp(var(--hero-gap-min), var(--hero-gap-preferred), var(--hero-gap-max));
        /* Mismo espaciado que el gap del hero-content */
        min-height: clamp(25px, 6vh, 35px);
    }

    /* Aumentar distancia desde el footer en móviles para flechas con position absolute */
    .hero-section .cta-scroll-arrows[style*="position"],
    .hero-section .cta-scroll-arrows[style*="bottom"] {
        bottom: 4rem !important;
    }

    .cta-scroll-arrows .arrow {
        width: clamp(1.8em, 5vw, 2.5em);
        /* Bastante más grande */
        height: clamp(1.8em, 5vw, 2.5em);
        /* Bastante más grande */
        border-width: 0 0.25em 0.25em 0;
        /* Borde más grueso para flechas más grandes */
    }

    /* Centrar imágenes con object-fit: cover en móviles */
    img[style*="object-fit: cover"],
    img[style*="object-fit:cover"] {
        object-position: center center !important;
    }

    .hero-content .text-size-medium.is-glow,
    .scroll-link-wrapper .text-size-medium.is-glow {
        font-size: clamp(0.65rem, 2vw, 0.95rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

@media (max-width: 479px) {

    /* Ajuste de padding en Contacto */
    .contact-wrapper {
        padding-bottom: 40px !important;
    }

    /* Bajar el título Contacta'ns en móviles */
    .contact .is-mobile h1.heading-style-h1 {
        margin-top: 40px !important;
    }
}

/* Reducir espacio superior en la página de contacto */
.contact-wrapper .padding-global {
    padding-top: 30px !important;
}

/* Reducir padding-top del div.contact directamente */
.contact-wrapper .contact {
    padding-top: 20px !important;
}

@media (min-width: 992px) {
    .contact-wrapper .padding-global {
        padding-top: 40px !important;
    }

    .contact-wrapper .contact {
        padding-top: 30px !important;
    }
}

@media (max-width: 479px) {
    .contact-wrapper .padding-global {
        padding-top: 20px !important;
    }

    .contact-wrapper .contact {
        padding-top: 20px !important;
    }
}

/* ========================================================================
   Estilos del Formulario de Contacto - Ancho completo de campos
   ======================================================================== */

/* Hacer que los inputs y textarea ocupen el 100% del ancho como sus labels */
.form-field_wrapper {
    width: 100% !important;
}

.form-field_wrapper .form-field,
.form-field_wrapper .form-input,
.form-field_wrapper input.form-field,
.form-field_wrapper input.form-input,
.form-field_wrapper textarea.form-field,
.form-field_wrapper textarea.form-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Específicamente para los campos Name, Email y Message */
#Name,
#Email,
#Message {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Asegurar que el contenedor de los campos Name y Email también ocupe el 100% */
.form-fields_component:not(.is-checkbox) {
    width: 100% !important;
}

.form-fields_component:not(.is-checkbox) .form-field_wrapper {
    width: 100% !important;
}

/* ========================================================================
   Estilos de Botones Radio (Servei y Pressupost) - Animación al seleccionar
   ======================================================================== */

/* Estilos base para los botones radio - Animación de 0.4s */
.checkbox-field.radio {
    transition: background-color 0.4s ease-out, color 0.4s ease-out, border-color 0.4s ease-out;
    will-change: background-color, color, border-color;
}

.checkbox-field.radio .checkbox-label {
    transition: color 0.5s ease-out;
    will-change: color;
}

/* Transición de 0.5s para todos los elementos internos */
.checkbox-field.radio .form-radio-input,
.checkbox-field.radio .radio-input,
.checkbox-field.radio .checkbox {
    transition: background-color 0.5s ease-out, border-color 0.5s ease-out;
    will-change: background-color, border-color;
}

/* Cuando el radio está seleccionado, el label padre se vuelve blanco - TODO BLANCO */
.checkbox-field.radio:has(input[type="radio"]:checked) {
    background-color: #ffffff !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Todos los elementos internos se vuelven blancos - texto también blanco */
.checkbox-field.radio:has(input[type="radio"]:checked) .checkbox-label,
.checkbox-field.radio:has(input[type="radio"]:checked) .checkbox-label.form-label {
    color: #ffffff !important;
}

/* Elementos internos del radio - fondo blanco pero sin afectar texto */
.checkbox-field.radio:has(input[type="radio"]:checked) .form-radio-input,
.checkbox-field.radio:has(input[type="radio"]:checked) .radio-input,
.checkbox-field.radio:has(input[type="radio"]:checked) .checkbox,
.checkbox-field.radio:has(input[type="radio"]:checked) .form-radio-input--inputType-custom,
.checkbox-field.radio:has(input[type="radio"]:checked)>div {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Alternativa usando selector de hermano adyacente para compatibilidad */
.checkbox-field.radio input[type="radio"]:checked~.checkbox-label,
.checkbox-field.radio input[type="radio"]:checked~* .checkbox-label {
    color: #ffffff !important;
}

/* Fallback para navegadores que no soportan :has() - usar JavaScript o clase adicional */
/* Prioridad alta para la clase checked agregada por JavaScript */
.checkbox-field.radio.checked {
    background-color: #ffffff !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.checkbox-field.radio.checked .checkbox-label,
.checkbox-field.radio.checked .checkbox-label.form-label {
    color: #ffffff !important;
}

/* Asegurar que TODOS los elementos internos se vuelvan blancos - texto blanco */
.checkbox-field.radio.checked .form-radio-input,
.checkbox-field.radio.checked .radio-input,
.checkbox-field.radio.checked .checkbox,
.checkbox-field.radio.checked .form-radio-input--inputType-custom {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Específicamente para el div interno del radio */
.checkbox-field.radio.checked>div,
.checkbox-field.radio.checked>.form-radio-input,
.checkbox-field.radio.checked>.radio-input {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ========================================================================
   Mensaje de Error del Formulario - Oculto inicialmente
   ======================================================================== */

/* Ocultar el mensaje de error por defecto para evitar que se vea antes de cargar */
.form-fail {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ========================================================================
   Cursor Personalizado - Ahora se carga desde cursor/cursor.css
   ======================================================================== */
/* Los estilos del cursor personalizado se han movido a cursor/cursor.css */

/* ========================================================================
   Estilos para páginas de proyectos - Control de alturas
   ======================================================================== */

/* Espaciado superior para .cms-hero - Separar del navbar */
.cms-hero {
    margin-top: clamp(6rem, 14vh, 12rem);
    padding-top: 0;
}

@media (max-width: 991px) {
    .cms-hero {
        margin-top: clamp(4.5rem, 11vh, 9rem);
    }
}

@media (max-width: 767px) {
    .cms-hero {
        margin-top: clamp(3.5rem, 9vh, 7rem);
    }
}

/* Altura de las secciones .cms-image */
.cms-image {
    /* Ajusta la altura mínima aquí si es necesario */
    /* min-height: 60vh; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-image .works-cms-image {
    width: 100%;
}

/* Separar imágenes en las galerías */
.works-cms-image.is-grid {
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Cuando solo hay una imagen, que ocupe el ancho de dos columnas en desktop */
.works-cms-image.is-grid .gallery-item:only-child {
    grid-column: 1 / -1;
}

.gallery-item {
    margin-bottom: 2rem;
}

.gallery-item:last-child {
    margin-bottom: 0;
}

/* Ajustes responsive para el espaciado */
@media (max-width: 991px) {
    .works-cms-image.is-grid {
        gap: 1.5rem;
    }

    .gallery-item {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 767px) {
    .works-cms-image.is-grid {
        gap: 1rem;
        grid-template-columns: 1fr;
    }

    /* En móvil, la imagen única ocupa una columna (comportamiento normal) */
    .works-cms-image.is-grid .gallery-item:only-child {
        grid-column: 1;
    }

    .gallery-item {
        margin-bottom: 1rem;
    }
}

/* Limitar ancho de elementos en página de proyectos (igual que navbar) */
/* Padding-global en página de proyectos (excepto hero-section) */
.page-wrapper section:not(.hero-section)>.padding-global {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Contenedores en página de proyectos */
.page-wrapper section:not(.hero-section) .container-medium,
.page-wrapper section:not(.hero-section) .container-large,
.page-wrapper section:not(.hero-section) .layout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Secciones cms-image - limitar ancho del contenido interno (igual que divider-wrapper) */
.page-wrapper .cms-image {
    padding-left: 2rem;
    padding-right: 2rem;
}

.page-wrapper .cms-image .works-cms-image,
.page-wrapper .cms-image .dyn-list {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Asegurar que las imágenes parallax-photo tengan exactamente el mismo ancho que el contenido del padding-global */
/* El padding-global tiene max-width: 1200px con padding 2rem, así que el contenido real es 1200px - 4rem */
/* Cuando hay dos imágenes, cada una ocupa la mitad menos el gap */
.page-wrapper .cms-image .parallax-photo {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
    object-fit: cover;
}

/* Asegurar que el contenedor de imágenes tenga el mismo ancho que el padding-global */
.page-wrapper .cms-image .works-cms-image.is-grid {
    max-width: calc(1200px - 4rem);
    margin-left: auto;
    margin-right: auto;
}

/* Ajustes para móvil */
@media (max-width: 991px) {

    .page-wrapper section:not(.hero-section)>.padding-global,
    .page-wrapper section:not(.hero-section) .container-medium,
    .page-wrapper section:not(.hero-section) .container-large,
    .page-wrapper section:not(.hero-section) .layout-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .page-wrapper .cms-image {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Mantener mismo ancho en móvil (1200px - 3rem de padding) */
    .page-wrapper .cms-image .works-cms-image.is-grid {
        max-width: calc(1200px - 3rem);
    }
}

@media (max-width: 767px) {

    .page-wrapper section:not(.hero-section)>.padding-global,
    .page-wrapper section:not(.hero-section) .container-medium,
    .page-wrapper section:not(.hero-section) .container-large,
    .page-wrapper section:not(.hero-section) .layout-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-wrapper .cms-image {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Mantener mismo ancho en móvil pequeño (1200px - 2rem de padding) */
    .page-wrapper .cms-image .works-cms-image.is-grid {
        max-width: calc(1200px - 2rem);
    }
}

/* Espacio entre divider-wrapper y las imágenes - igual que entre título y PROJECTE */
section:has(.divider-wrapper)+section.cms-image {
    margin-top: clamp(1rem, 2vh, 1.5rem) !important;
}

@media (max-width: 991px) {
    section:has(.divider-wrapper)+section.cms-image {
        margin-top: clamp(0.75rem, 1.5vh, 1.25rem) !important;
    }
}

@media (max-width: 767px) {
    section:has(.divider-wrapper)+section.cms-image {
        margin-top: clamp(0.5rem, 1vh, 1rem) !important;
    }
}

/* Espaciado uniforme para la sección .launch que contiene .works-content - casi cero */
section.launch {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Reducir padding interno del contenedor en .launch */
section.launch .container-medium,
section.launch .layout-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reducir espaciado interno de works-content */
section.launch .works-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* Eliminar espaciado entre elementos dentro de works-content */
section.launch .works-top-content {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

section.launch .works-rich-text {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

section.launch .works-rich-text p {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

section.launch .works-rich-text p+p {
    margin-top: 0.5rem;
}

/* Eliminar espaciado en works-filters y categorie */
section.launch .works-filters {
    margin: 0;
    padding: 0;
}

section.launch .categorie {
    margin: 0;
    padding: 0;
}

section.launch .works-filters>div {
    margin: 0;
    padding: 0;
}

/* Reducir el margen superior de la imagen que viene después de .launch */
section.launch+section.cms-image {
    margin-top: 0 !important;
}

/* Reducir el espacio entre la imagen anterior y .launch */
section.cms-image+section.launch {
    margin-top: 0 !important;
}

/* Separar la imagen .is-second de las imágenes de arriba */
.cms-image .works-cms-image.max-size {
    margin-top: clamp(4rem, 10vh, 8rem);
}

@media (max-width: 991px) {
    .cms-image .works-cms-image.max-size {
        margin-top: clamp(3rem, 8vh, 6rem);
    }
}

@media (max-width: 767px) {
    .cms-image .works-cms-image.max-size {
        margin-top: clamp(2.5rem, 6vh, 4.5rem);
    }
}

/* Altura del divider-wrapper - reducido para acercar al título */
.divider-wrapper {
    /* Ajusta la altura aquí si es necesario */
    /* min-height: 80px; */
    margin-top: clamp(1rem, 2vh, 1.5rem);
    margin-bottom: clamp(0.25rem, 0.5vh, 0.5rem);
}

@media (max-width: 991px) {
    .divider-wrapper {
        margin-top: clamp(0.75rem, 1.5vh, 1.25rem);
        margin-bottom: clamp(0.2rem, 0.4vh, 0.4rem);
    }
}

@media (max-width: 767px) {
    .divider-wrapper {
        margin-top: clamp(0.5rem, 1vh, 1rem);
        margin-bottom: clamp(0.15rem, 0.3vh, 0.3rem);
    }
}

/* Altura de las imágenes parallax-photo */
.parallax-photo {
    /* Las imágenes mantienen su aspect ratio por defecto */
    /* width: 100%; */
    /* height: auto; */
}

/* Altura específica para .parallax-photo.is-second */
.parallax-photo.is-second {
    /* Ajusta la altura aquí si es necesario */
    /* min-height: 70vh; */
    /* max-height: 90vh; */
}

/* Altura para contenedores con clase .max-size */
.works-cms-image.max-size {
    /* Ajusta la altura aquí si es necesario */
    /* min-height: 60vh; */
}

/* Altura específica para el div con height: 500px inline */
.works-cms-image.max-size>div[style*="height: 500px"] {
    /* Descomenta y ajusta para cambiar la altura del div con 500px */
    /* height: 60vh !important; */
    /* O usa un valor fijo: */
    /* height: 600px !important; */
}

/* Fix for project image shape during animation */
.parallax-photo,
.gallery-item img {
    border-radius: 0.5rem !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    overflow: hidden;
    /* Sin transición en border-radius para evitar animación visual */
    transition: none !important;
}

/* Asegurar que todos los bordes estén redondeados, especialmente los inferiores */
.page-wrapper .cms-image .parallax-photo,
.page-wrapper .cms-image .gallery-item img {
    border-radius: 0.5rem !important;
    overflow: hidden;
    /* Sin transición en border-radius para evitar animación visual */
    transition: none !important;
}