/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://dev.undsgn.com
Template: uncode
Version: 2.0.0
Text Domain: uncode
*/

/* ==========================================================================
   DESIGN SYSTEM — CSS Custom Properties
   Based on React prototype (tu-web-accesible)
   Primary: #7c3aed | Fonts: Inter + Playfair Display
   ========================================================================== */

:root {
    /* ── Colors — Primary (Purple) ── */
    --color-primary: #7c3aed;
    --color-primary-hover: #7c3aed;
    --color-primary-light: #ede9fe;
    --color-primary-lighter: #f5f3ff;
    --color-primary-200: #ddd6fe;
    --color-primary-300: #c4b5fd;
    --color-primary-400: #a78bfa;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #7c3aed;
    --color-primary-700: #7c3aed;

    /* ── Colors — Neutral ── */
    --color-black: #000000;
    --color-dark: #111111;
    --color-dark-bg: #050505;
    --color-dark-bg-alt: #0A0A0A;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-white: #ffffff;

    /* ── Colors — Semantic (states, accents) ── */
    --color-success: #10b981;
    --color-success-light: #059669;
    --color-success-bright: #22c55e;
    --color-error: #dc2626;
    --color-warning: #f97316;
    --color-info: #3b82f6;
    --color-info-light: #0ea5e9;
    --color-accent-purple: #a855f7;
    --color-accent-yellow: #fbbf24;
    --color-accent-pink: #ec4899;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Spacing ── */
    --container-max: 1400px;
    --container-std: 1200px;
    --section-padding-y: 6rem;
    --section-padding-x: 2rem;

    /* ── Borders ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-brutal: 8px 8px 0px 0px rgba(0, 0, 0, 1);
    --shadow-glow-purple: 0 0 30px rgba(124, 58, 237, 0.3);
    --shadow-glow-blue: 0 0 30px rgba(59, 130, 246, 0.3);
    --shadow-glow-green: 0 0 30px rgba(16, 185, 129, 0.3);
    --shadow-glow-orange: 0 0 30px rgba(249, 115, 22, 0.3);
    --shadow-glow-white: 0 0 50px rgba(255, 255, 255, 0.1);

    /* ── Z-Index Layers ── */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-mobile-menu: 40;
    --z-navbar: 50;
    --z-modal: 9999;

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to content link — visible on focus for keyboard users */
.twa-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary, #7c3aed);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: top 0.2s ease;
}

.twa-skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary-400, #a78bfa);
    outline-offset: 2px;
}

.twa-acceptance-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   ANIMATION KEYFRAMES
   ========================================================================== */

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sombraDesvanecida {
  0% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(167, 139, 250, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
  }
}

/* Animation Utility Classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-blink {
    animation: blink 1s step-end infinite;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-marquee {
    animation: marquee 40s linear infinite;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-sombra-desvanecida {
    animation: sombraDesvanecida 2s ease-in-out infinite;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   BASE / RESET
   ========================================================================== */

::selection {
    background-color: var(--color-primary);
    color: white;
}

/* Focus Visible — WCAG AA */
*:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}

/* Skip to Content Link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 24px;
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
}

/* Scroll margin for keyboard nav (WCAG 2.4.11) */
a,
button,
input,
textarea,
select,
[tabindex] {
    scroll-margin-top: 100px;
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px;
}

#mega-menu-wrap-primary .mega-menu-toggle+#mega-menu-primary {
    width: 410px;
}

/* lista en contenido */
b,
strong {
    font-family: var(--font-sans);
    font-weight: 700;
}

header {
    border-top: 0px solid #000;
}

header .row-menu-inner .menu-horizontal-inner {
    display: flex;
    align-items: center;
    justify-content: end;
}

.main-container .sections-container .post-body ul li::marker {
    color: var(--color-primary);
}

.main-container .sections-container .post-body ul li ul li::marker {
    color: #000000;
}

.no-color-url {
    color: #000000 !important;
}

/* boton */
.btn-color-white-Two.text-color-black-Three-color {
    color: #000000 !important;
}

.btn {
    padding: 12px 44px !important;
}

.text-color-xsdn-color strong {
    color: #fff !important;
}

/* General */

.btn-white-informate {
    border: 3px solid #fff;
    border-radius: none !important;
    display: inline-flex;
    align-items: center;
    font-size: 17px !important;
    margin: 0;
    padding: 7px 17px 6px 14px !important;
    width: max-content;
}

.btn-color-white-Two:not(.btn-hover-nobg):not(.icon-animated):hover,
.btn-color-white-Two:not(.btn-hover-nobg):not(.icon-animated):focus,
.btn-color-white-Two:not(.btn-hover-nobg):not(.icon-animated):active,
.btn-color-black-Three:not(.btn-hover-nobg):not(.icon-animated):hover,
.btn-color-black-Three:not(.btn-hover-nobg):not(.icon-animated):focus,
.btn-color-black-Three:not(.btn-hover-nobg):not(.icon-animated):active,
#btn-home-border-black:hover,
.btn-color-xsdn.btn-flat:not(.btn-hover-nobg):hover,
.btn-color-xsdn.btn-flat:not(.btn-hover-nobg):focus,
.btn-color-xsdn.btn-flat:active,
.btn-color-xsdn:not(.btn-hover-nobg):not(.icon-animated):hover,
.style-light .btn-default:not(.btn-hover-nobg):not(.icon-animated):not(.btn-flat):hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

.border-black-hover:hover.btn-color-white-Two:not(.btn-hover-nobg):not(.icon-animated):hover,
.btn-color-black-Three:not(.btn-hover-nobg):not(.icon-animated):hover.border-black-hover:hover {
    border-color: #000 !important;
}

.btn-white-interesa {
    padding: 10px 17px 9px 24px !important;
}

.btn-white-informate i {
    font-size: 30.4px;
    position: absolute !important;
    right: 19px;
    top: auto !important;
    bottom: auto;
}

.btn-white-informate i::before {
    font-size: 30.4px;
}

#column-btn-white-informate #column-btn-white-informate .btn-container {
    margin-top: 23px;
    width: 203px;
}

#form-quienes-somos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0 25px;
}

#form-quienes-somos #checkbox-terminos input,
.form-prueba-gratis .checkbox-terminos input,
#form-quienes-somos #input-message textarea {
    border: solid #707070 1.3px;
}

#form-quienes-somos #input-name input,
#form-quienes-somos #input-email input,
#form-quienes-somos #input-tel input,
#form-quienes-somos #input-message input {
    border: solid #707070 1.3px;
    width: 100%;
}

#form-quienes-somos #checkbox-terminos input,
.form-prueba-gratis .checkbox-terminos input,
.row-generator #checkbox-terminos input {
    width: 20px;
    height: 20px;
}

#form-quienes-somos #btn-enviar input,
.form-prueba-gratis .btn-enviar input {
    color: #ffffff;
    background-color: #000;
    font-size: 17px;
    padding: 14px 52px;
    letter-spacing: 0;
}

#form-quienes-somos #checkbox-terminos label {
    display: flex;
}

.form-prueba-gratis .input-email,
.form-prueba-gratis .input-name,
.form-prueba-gratis .input-tlfn {
    margin-bottom: 1rem;
}

#form-quienes-somos #checkbox-terminos .acepto,
.row-generator #checkbox-terminos .acepto {
    font-weight: normal;
    padding-top: 2px;
}

#form-quienes-somos #checkbox-terminos input::before,
.form-prueba-gratis .checkbox-terminos input::before {
    font-size: 14px;
}

#form-quienes-somos #checkbox-terminos p,
.form-prueba-gratis .checkbox-terminos p {
    margin-top: 6px;
}

#form-quienes-somos #checkbox-terminos .acepto a u,
.form-prueba-gratis .checkbox-terminos .acepto a u,
.row-generator #checkbox-terminos .acepto a u {
    color: #000000;
    text-underline-offset: 4.5px;
}

#form-quienes-somos #input-name {
    grid-area: 1 / 1 / 2 / 7;
}

#form-quienes-somos #input-email {
    grid-area: 2 / 1 / 3 / 4;
}

#form-quienes-somos #input-tel {
    grid-area: 2 / 4 / 3 / 7;
}

#form-quienes-somos #input-message {
    grid-area: 3 / 1 / 4 / 7;
}

#form-quienes-somos #input-message textarea {
    height: 120px;
}

#form-quienes-somos #checkbox-terminos {
    grid-area: 4 / 1 / 5 / 7;
}

#form-quienes-somos #btn-enviar {
    grid-area: 5 / 1 / 6 / 7;
}

#form-quienes-somos #btn-enviar p {
    margin-top: 26px;
}

.form-prueba-gratis .input-name input,
.form-prueba-gratis .input-email input,
.form-prueba-gratis .input-tlfn input {
    border: solid #707070 1.3px;
    margin-top: 0;
    width: 100%;
}

.form-prueba-gratis .input-name label,
.form-prueba-gratis .input-email label,
.form-prueba-gratis .input-tlfn label {
    font-size: 20px;
    font-weight: 200;
}

.form-prueba-gratis .row-inner p:first-of-type {
    margin-top: 0;
}

.form-prueba-gratis .btn-enviar {
    margin-top: 25px;
}

.text-contacto-quienes {
    padding-right: 5em;
}

.right-banner-waw {
    padding-left: 4em !important
}

.right-banner-waw .btn-container {
    margin-top: 23px !important;
    width: 203px;
}

.fontheight-25 p {
    line-height: 25px;
}

.fontheight-28 p {
    line-height: 28px;
}

.fontheight-34 p {
    line-height: 34px;
}

.fontheight-35 p {
    line-height: 35px;
}

.fontsize-16 p {
    font-size: 16px;
}

.fontsize-17 p {
    font-size: 17px;
}

.fontsize-18 p {
    font-size: 18px;
}

.fontsize-30 p {
    font-size: 30px;
}

.fontsize-35 p {
    font-size: 35px;
}

/* Margins */
.mt-0 {
    margin-top: 0 !important;
}

.mt-3 {
    margin-top: 3px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-38 {
    margin-top: 38px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-45 {
    margin-top: 45px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-55 {
    margin-top: 55px !important;
}

.mt-75 {
    margin-top: 75px !important;
}

.mx-30 {
    margin-left: 30px !important;
    margin-right: 30px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-75 {
    margin-bottom: 75px !important;
}

/* Paddings */
.pt-5 {
    padding-top: 5px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-13 {
    padding-top: 13px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-28 {
    padding-right: 28px !important;
}

.pr-30 {
    padding-right: 30px !important;
}

.pr-40 {
    padding-right: 40px !important;
}

.pr-60 {
    padding-right: 60px !important;
}

.pr-80 {
    padding-right: 80px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-30 {
    padding-left: 30px !important;
}

.pl-60 {
    padding-left: 60px !important;
}

.pr-100 {
    padding-right: 100px !important;
}

.color-white-Two p {
    color: #fff;
}

#column-img-que-accesibilidad .uncol {
    position: absolute;
    top: -54px;
}

.lista-ventajas-accs li {
    padding-top: 3px;
}

.lista-ventajas-accs li:first-child {
    padding-top: 0;
}

.btn-contacta-footer,
.btn-social-footer {
    font-size: 16px;
    background-color: #000 !important;
}

.btn-social-footer {
    padding-left: 22.5px !important;
    text-align: left;
    width: 225px;
}

@media (min-width: 960px) {
    .btn-social-footer {
        width: 97%;
    }
}

.columna-contacto span.btn-container {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 99999999999;
}

#telf-footer p {
    margin-top: 7px;
}

#text-footer {
    padding-right: 20px;
}

#list-mapa-web {
    font-size: 16px;
    list-style: none;
}

#list-mapa-web li {
    font-size: 16px;
}

#container-list-mapa-web {
    padding-left: 60px;
}

#text-accs-we-all-web {
    padding-right: 60px;
}

.icons-w15 {
    width: 15%;
}

.list-purple,
.list-purple-lh-25 {
    padding-left: 95px !important;
    padding-right: 88px !important;
}

.list-purple li {
    line-height: 28px;
    margin-top: 14px;
    padding-left: 6px;
}

.list-purple-lh-25 li {
    line-height: 28px;
    margin-top: 9px;
    padding-left: 6px;
}

.list-purple li:first,
.list-purple-lh-25:first {
    margin-top: 0;
}

.list-purple li::marker,
.list-purple-lh-25::marker {
    font-size: 23px;
}



.text-institucion-publica {
    padding-top: 5px;
}

.row-mas-servicios a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4.5px;
}

#btn-home-border-black {
    color: #000000 !important;
    background-color: transparent !important;
    align-items: center;
    font-size: 20px;
    letter-spacing: 0;
    padding: 10px 32px 10px 32px !important;
}

#btn-home-border-black::after {
    content: url('http://localhost/tuwebaccesible/wp-content/uploads/2024/07/arrow-right.svg');
    display: inline-block;
    filter: invert(100%);
    vertical-align: middle;
    margin: auto 0 auto 40px;
}

#cln-btn-home-border-black .btn-container {
    margin-top: 33px !important;
    margin-bottom: 37px;
}

#btn-home-border-black i::before {
    font-size: 26px;
}

#btn-home-border-black i {
    margin-left: 57px
}

#heading-cumplimiento p:last-of-type {
    color: #ffffff;
    font-size: 25px;
    line-height: 38px;
    margin-top: 0;
}

#img-logos-accesibilidad {
    margin-bottom: 6px;
}

#purple-button {
    background-color: #ede9fe !important;
    border: 3px solid #ede9fe !important;
    color: #000000 !important;
    display: inline-flex;
    align-items: center;
    width: auto !important;
}

.btn-no-border-black {
    color: #ffffff !important;
    background-color: #000000 !important;
    display: inline-block;
    letter-spacing: 0 !important;
    padding: 6px 20px 3px 14px !important;
}

.btn-no-border-white {
    color: #000000 !important;
    background-color: #ffffff !important;
    align-items: center;
    letter-spacing: 0 !important;
    padding: 6px 14px 3px 14px !important
}

.btn-no-border-black:hover {
    background-color: transparent !important;
}

.btn-no-border-white:hover {
    color: #000 !important;
    background-color: #000 !important;
    border: 3px solid #000 !important;
}

#purple-button:hover {
    border: 3px solid #000000 !important;
}

.btn-no-border-white::after,
.btn-white-informate::after,
#purple-button::after,
.btn-white-interesa::after {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/07/arrow-right.svg");
    display: inline-block;
    filter: invert(100%);
    margin-left: 36px;
    vertical-align: middle;
}

.btn-no-border-black::after {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/07/arrow-right.svg");
    display: inline-block;
    margin-left: 36px;
    vertical-align: middle;
}

.btn-no-border-black {
    transition: all 0.5s ease-in;
}

.btn-no-border-black:hover::after {
    filter: invert(100%);
}

.btn-no-border-black i::before {
    font-size: 26px;
}

.btn-no-border-black i {
    margin-left: 40px !important;
}

.btn-no-border-white i::before {
    font-size: 26px;
}

.btn-no-border-white i {
    margin-left: 40px !important;
}

.clm-btn-no-border-white .btn-container {
    margin-top: 25px !important;
}

#list-home li:first {
    margin-top: 0;
}

#list-home li {
    font-size: 30px;
    line-height: 32px;
    margin-top: 25px;
}

#row-beneficios-acsb .btn-container {
    margin-top: 3.3em !important;
}

/* Old #accordion-home styles — disabled, replaced by legacy normalization (Section 12) */
/* #accordion-home { margin-top: 46px; } */
/* #accordion-home .panel-group .panel { border: 3px solid #000; margin-top: 20px; } */

/* ── Old UNCODE FAQ accordion → TWA style override ───────── */

/* Hide "¿Necesitas ayuda?" CTA section in articles */
.twa-article-content .section-contacto-blog,
.twa-article-content section.section-contacto-blog {
    display: none !important;
}

/* FAQ section wrapper: remove UNCODE defaults */
.twa-article-content .uncode-accordion.wpb_accordion {
    border: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Items container — override UNCODE's negative margins */
.twa-article-content .wpb_accordion_wrapper.panel-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
}

/* Each FAQ item card — all borders purple */
.twa-article-content .panel-group .panel.panel-default,
.twa-article-content .panel-group .panel.panel-default:not(.active-group),
.twa-article-content .panel-group .panel+.panel {
    background: #fff !important;
    border: 2px solid #c4b5fd !important;
    border-radius: 1rem !important;
    overflow: visible !important;
    margin: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
}

/* Active item: stronger purple border */
.twa-article-content .panel-group .panel.active-group,
.twa-article-content .panel-group .panel.active-panel {
    border: 2px solid #7c3aed !important;
    border-radius: 1rem !important;
}

/* Remove UNCODE's ::before separator between heading and collapse */
.twa-article-content .panel-group .panel-heading+.panel-collapse::before,
.twa-article-content .panel-collapse::before {
    display: none !important;
    border: none !important;
    padding: 0 !important;
    content: none !important;
}

/* Question header */
.twa-article-content .panel-heading.wpb_accordion_header {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.twa-article-content p.panel-title {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.twa-article-content p.panel-title a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background 0.2s !important;
}

.twa-article-content p.panel-title a:hover {
    background: #f9fafb !important;
}

.twa-article-content p.panel-title a:focus {
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 2px #7c3aed !important;
    border-radius: 1rem !important;
}

.twa-article-content p.panel-title a>span {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    flex: 1 !important;
    padding-right: 40px !important;
}

/* Replace UNCODE icon font (span::after) with SVG chevron */
.twa-article-content .panel-title>a>span::after {
    content: '' !important;
    font-family: initial !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.3s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
}

/* Rotate chevron when open */
.twa-article-content .panel.active-group .panel-title>a>span::after,
.twa-article-content .panel.active-panel .panel-title>a>span::after,
.twa-article-content .panel-title.active>a>span::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Answer body */
.twa-article-content .panel-collapse .panel-body {
    padding: 0 24px 20px 28px !important;
    background: transparent !important;
    border: none !important;
}

.twa-article-content .panel-body .uncode_text_column {
    color: #6b7280 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.twa-article-content .panel-body .uncode_text_column p {
    color: #6b7280 !important;
    margin-bottom: 0.75rem !important;
}

.twa-article-content .panel-body .uncode_text_column p:last-child {
    margin-bottom: 0 !important;
}

.twa-article-content .panel-body .uncode_text_column strong {
    color: #374151 !important;
}

/* Override w-border — use our purple borders instead */
.twa-article-content .uncode-accordion.w-border .panel,
.twa-article-content .uncode-accordion.w-border .panel:last-child {
    border: 2px solid #c4b5fd !important;
    border-radius: 1rem !important;
}

/* Re-apply our card borders (after removing w-border) */
.twa-article-content .panel-group .panel {
    border: 2px solid #c4b5fd !important;
    border-radius: 1rem !important;
}

.twa-article-content .panel-group .panel.active-group {
    border: 2px solid #7c3aed !important;
    border-radius: 1rem !important;
}

/* FAQ heading style — more spacing before accordion items */
.twa-article-content h2[id*="preguntas-frecuentes"] {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #111 !important;
    margin-bottom: 2rem !important;
}

/* Spacing between FAQ heading wrapper and accordion */
.twa-article-content .vc_custom_heading_wrap+.uncode-accordion {
    margin-top: 1.5rem !important;
}

/* Panel-collapse: our JS takes full control (no Bootstrap classes).
   Override all Bootstrap collapse states to prevent flash-of-hidden-content */
.twa-article-content .panel-collapse,
.twa-article-content .panel-collapse.collapse,
.twa-article-content .panel-collapse.collapsing,
.twa-article-content .panel-collapse.collapse.in {
    overflow: visible !important;
    height: auto !important;
    transition: none !important;
}

/* Prevent Bootstrap .collapse from hiding content before our JS runs */
.twa-article-content .panel-collapse.collapse:not(.in) {
    display: none !important;
}

.twa-article-content .panel-collapse.collapse.in {
    display: block !important;
}

.twa-article-content .panel-body {
    position: relative !important;
    z-index: 1 !important;
}

#column-soluciones-waw-home .triple-block-padding {
    padding-right: 78px !important;
}

.underline-space {
    color: #000000;
    text-underline-offset: 4.5px;
}

#row-servicio-web .single-internal-gutter:nth-child(2) {
    padding-left: 68px !important;
}

#olist-ad-publicas {
    margin-top: 0;
    padding-left: 10px;
}

#olist-ad-publicas li {
    margin-top: 18px !important;
    line-height: 20px !important;
}

#olist-ad-publicas li::marker {
    color: #000;
}

#ulist-ad-publicas li:first {
    margin-top: 0;
}

#ulist-ad-publicas li {
    margin-top: 23px;
    line-height: 25px;
}

#column-soluciones-waw-home .triple-block-padding {
    padding-right: 73px !important;
}

#btn-unete-a-la-red {
    border: none;
}

#btn-unete-a-la-red i {
    vertical-align: text-bottom;
}

#column-unete-a-la-red .single-block-padding {
    border-radius: 10px;
}

.img-inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 20px !important;
}

#img-herramienta-acc {
    position: absolute;
    top: 30px;
    width: 624px;
}

.img-caracteristicas-waw {
    position: absolute;
    top: -12.3em;
}

.list-pros-waw {
    padding-left: 35px !important;
}

.list-pros-waw li:first {
    margin-top: 0;
}

.list-pros-waw li {
    font-size: 18px;
    line-height: 25px;
    list-style-type: none;
    margin-top: 15px;
}

.list-pros-waw li::before {
    content: url("/wp-content/uploads/2024/08/fondo-lista.png");
    position: absolute;
    margin-left: -35px;
}

.lista-servicio-avanzado {
    list-style-type: none !important;
    padding-left: 0 !important;
}

.lista-servicio-avanzado li {
    font-size: 30px;
    line-height: 40px;
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 0 !important;
    margin-bottom: 22px !important;
    display: flex;
    align-items: center;
    gap: 23px;
}

.lista-servicio-avanzado li:last-child {
    gap: 17px;
}

.beneficios-acc-web {
    padding: 15px 5px 0 15px !important;
}

.pasos-acc-web {
    padding: 10px 45px 0 0 !important;
}

.quienes-somos-first-row .col-no-gutter {
    padding-right: 28px !important;
}

.list-pers-btn li::marker {
    color: #000 !important;
    font-size: 26px;
}

.list-pers-btn li {
    padding-bottom: 5px !important;
}

.list-pers-btn li p {
    margin-top: 0;
    font-size: 17px !important;
}

.list-number>li::before {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    --size: 23px;
    left: calc(0.15* var(--size) - 2px);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    background: var(--color-primary);
    border-radius: 50%;
    text-align: center;
    content: counters(orderedList, ".") !important;
    margin-top: 2px;
}

.list-number li {
    counter-increment: orderedList;
    padding: 4px 8px;
}

.list-number {
    counter-reset: orderedList;
    list-style: none;
    padding-left: 15px;
}

.container-code {
    background-color: #f5f3ff;
    padding: 20px 40px 15px 40px;
    border: 2px solid #000;
    border-radius: 10px;
    word-wrap: break-word;
}

.container-code p {
    margin: 0 !important;
    font-size: 17px !important;
}

.tabnav-container-code {
    padding: 0 !important;
}

.tabs-pers-waw ul .active a {
    color: #fff !important;
}

.btn-red {
    background-color: #CE3545;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-left: 10px;
}

.btn-blue {
    background-color: #006CF7;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-left: 10px;
}

.text-gray-100 {
    color: #646464 !important;
}

.text-red {
    color: #C80000 !important;
}

.text-purple {
    color: var(--color-primary) !important;
}

#list-icon {
    display: flex;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
    counter-reset: list-counter;
    list-style: none;
}

#list-icon li {
    counter-increment: list-counter;
}

#list-icon>li::before {
    margin-right: 2px !important;
    content: counter(list-counter) ". " !important;
}

.icon-wheelchair {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/wheelchair-icon.png");
}

.wheelchair-icon-thin {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/wheelchair-icon-thin.png");
}

.wheelchair-icon-variant {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/wheelchair-icon-variant.png");
}

.wheelchair-icon-light {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/wheelchair-icon-light.png");
}

.hand-point-up-icon {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/hand-point-up-icon.png");
}

.hand-point-up-icon-solid {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/hand-point-up-icon-solid.png");
}

.wheelchair-icon-solid {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/wheelchair-icon-solid.png");
    width: 15px;
}

.universal-access-icon-light {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/universal-access-icon-light.png");
}

.accessible-icon {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/accessible-icon.png");
}

.universal-access-icon-variant {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/universal-access-icon-variant.png");
}

.universal-access-icon-solid {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/universal-access-icon-solid.png");
}

.universal-access-icon {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/04/universal-access-icon.png");
}

#list-icon li i {
    margin-right: 0 !important;
}

#list-language {
    list-style: none !important;
    padding-left: 10px;
    height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.link-button {
    margin: 0;
    color: #020202 !important;
    padding: 15px 0 15px 0 !important;
    border: 2px solid #000 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    background-image: none !important;
}

.link-button,
.link-button {
    width: 100%;
}

#menu-information li {
    font-size: 16px;
}

a .underline-space:hover,
a u:hover {
    color: var(--color-primary) !important;
}

/* Categorías Iconos - Menú Lateral */
aside section#block-3 {
    margin-bottom: 30px
}

aside.widget_categories {
    margin-top: 25px
}

aside.widget_categories ul.wp-block-categories-list {
    list-style: none;
}

aside.widget_categories ul.wp-block-categories-list li {
    /*box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.36);*/
    margin-bottom: 0.6em;
    display: flex;
    align-items: center;
    border-top: 1px solid #000000;
}

aside.widget_categories ul.wp-block-categories-list li:last-child {
    border-bottom: 1px solid #000000;
}

aside.widget_categories ul.wp-block-categories-list li a {
    color: #000 !important;
    text-transform: none;
    padding-left: 35px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 23px;
    line-height: 34px;
}

aside.widget_categories ul.wp-block-categories-list li a:hover {
    color: var(--color-primary) !important
}

aside.widget_categories ul.wp-block-categories-list .actualidad-category::before {
    content: url('/wp-content/themes/uncode-child/img/icono-actualidad.png');
    height: 33px;
    width: 45px;
}

aside.widget_categories ul.wp-block-categories-list .exito-category::before {
    content: url('/wp-content/themes/uncode-child/img/icono-casos-de-exito.png');
    height: 43px;
    width: 45px;
}

aside.widget_categories ul.wp-block-categories-list .formacion-category::before {
    content: url('/wp-content/themes/uncode-child/img/icono-formacion.png');
    height: 32px;
    width: 45px;
}

aside.widget_categories ul.wp-block-categories-list .ranking-category::before {
    content: url('/wp-content/themes/uncode-child/img/icono-ranking.png');
    height: 40px;
    width: 45px;
}

aside.widget_categories ul.wp-block-categories-list li {
    padding: 14px 20px 14px 20px;
    cursor: pointer;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    background-color: #fff;
}

aside.widget_categories ul.wp-block-categories-list li:nth-child(1) {
    padding: 19px 20px 18px 20px;
}

aside.widget_categories ul.wp-block-categories-list li:nth-child(3) {
    padding: 19px 20px 18px 20px;
}

aside.widget_categories ul.wp-block-categories-list li:nth-child(4) {
    padding: 15px 20px 15px 20px;
}

aside.widget_categories ul.wp-block-categories-list li:hover {
    background-color: #000000;
    color: #fff !important;
}

aside.widget_categories ul.wp-block-categories-list li:hover a {
    color: #fff !important;
    opacity: inherit !important;
}

.widget-container.widget_categories li a::before {
    content: none;
}

#block-8 {
    background-color: #000;
    padding: 58px 36px 27px 60px;
    display: inline-block;
}

#block-9 {
    background-color: #ede9fe;
    padding: 55px 36px 51px 50px;
    display: inline-block;
}

#recent-posts-4 ul li {
    display: flex;
    justify-content: start;
    flex-direction: row-reverse;
    gap: 15px;
    border-top: 1px solid #000000;
    padding-top: 15px;
    padding-bottom: 12px;
    margin-bottom: 0;
}

#recent-posts-4 ul li:last-child {
    border-bottom: 1px solid #000000 !important;
}

#recent-posts-4 ul li:last-of-type {
    border-bottom: none;
}

#recent-posts-4 ul li a {
    font-size: 18px;
    line-height: 25px;
}

#recent-posts-4 .post-date {
    border: 1px solid var(--color-primary);
    text-align: center;
    padding: 4px !important;
    line-height: 1.19;
    font-size: 16px;
    text-transform: uppercase;
    width: 46px !important;
    height: 46px !important;
}

#recent-posts-4 .widget-title {
    font-family: var(--font-sans);
    font-size: 30px;
    line-height: 34px;
    font-weight: 700;
    margin-bottom: 0px;
    padding-bottom: 10px;
    text-transform: none;
    border-bottom: none;
}

.boton-borde-negro {
    border: 3px solid #000000 !important;
    color: #000000 !important;
    font-size: 17px;
    padding: 18px;
}

.boton-borde-negro:hover {
    text-decoration: underline;
}

.t-entry .t-entry-title a {
    font-family: var(--font-sans);
    font-weight: 700;
}

#row-title-home {
    border-top: 1px solid #000 !important;
}

#list-mapa-web li:first-of-type {
    margin-top: 0px;
}

#list-mapa-web li {
    margin-top: 6px;
}

#list-mapa-web {
    margin-top: 15px;
    padding-left: 0;
}

html[lang="en-US"] #btn-basico.btn-no-border-black,
html[lang="en-US"] #btn-grande.btn-no-border-black,
html[lang="en-US"] #purple-button.btn-no-border-black,
html[lang="en-US"] #btn-xgrande.btn-no-border-black {
    padding: 6px 15px 3px 15px !important;
}

html[lang="en-US"] #btn-basico.btn-no-border-black::after,
html[lang="en-US"] #btn-grande.btn-no-border-black::after,
html[lang="en-US"] #purple-button.btn-no-border-black::after,
html[lang="en-US"] #btn-xgrande.btn-no-border-black::after {
    margin-left: 20px;
}

#btn-basico:hover,
#btn-grande:hover,
#btn-xgrande:hover {
    background-color: #ede9fe !important;
    border-color: #ede9fe !important;
}

.pl-18 {
    padding-left: 18px !important;
}

.pr-18 {
    padding-right: 18px !important;
}

.pb-18 {
    padding-bottom: 18px !important;
}

.pt-18 {
    padding-top: 18px !important;
}

.subtitulo-pagina-30-normal {
    font-size: 30px;
    line-height: 39px;
    color: #000000;
    margin-bottom: 10px;
    font-weight: 500 !important;
}

.list-serv-accs li::marker {
    color: #000 !important;
    font-size: 24px;
}

.list-serv-accs li {
    font-size: 17px;
}

.borde-magenta {
    border: 6px solid var(--color-primary-400) !important;
}

.cuadro-consultoria {
    padding: 50px 140px 75px 130px;
}

.post #row-unique-0 .wpb_column,
.post #row-unique-1 .wpb_column {
    padding-left: 0;
}

.table-resposive {
    overflow-x: auto;
}

.listado-posts p.text-lead {
    font-size: 20px;
    line-height: 25px;
    margin-top: 24px !important;
}

.listado-posts .t-entry-meta span.t-entry-date {
    font-size: 16px !important;
    line-height: 34px !important;
    font-weight: 400 !important;
}

.listado-posts .t-entry-meta span.t-entry-date::before {
    content: "\e072";
    font-family: 'uncodeicon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font: normal normal normal 14px/1 FontAwesome;
    margin-right: 7px;
    color: var(--color-primary);
}

.listado-posts .t-entry-readmore.btn-container {
    margin-top: 27px !important;
}

.listado-posts .t-entry-readmore.btn-container a::after {
    margin-left: 17px;
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2024/07/arrow-right.svg");
    display: inline-block;
    vertical-align: middle;
}

.listado-posts .t-entry-readmore.btn-container a:hover::after {
    filter: invert(100%);
}

.double-gutter.uncode-post-table .tmb.tmb-table .t-inside {
    padding-top: 100px;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link {
    font-size: 17px;
}

#mega-menu-wrap-primary {
    height: 40px !important;
}

.wpb_column.pos-top.pos-center.align_left.column_parent.col-lg-12.single-internal-gutter {
    padding-left: 0 !important;
}

.distribuidor-logo {
    text-align: left;
    display: block;
    width: 100%;
    line-height: 28px !important;
    margin-top: 5px;
}

.menu-smart>li>a {
    padding: 0px 10px 0px 10px;
}

#btn-informate-blog {
    padding-left: 0 !important;
    transition: padding-left 0.3s ease-in, background-color 0.3s ease-in, color 0.3s ease-in;
}

#btn-informate-blog:hover {
    padding-left: 21px !important;
}

#left-column-ADA .uncol,
#left-column-ADA .uncont {
    height: 100% !important;
}

#left-column-ADA .uncont {
    display: flex;
    flex-direction: column;
}

#left-column-ADA .uncont .btn-container {
    padding-bottom: 7px;
}

#accordion-ADA .panel-group .active-group {
    background-color: #ffffff !important;
    box-shadow: 0 50px 100px rgba(0, 0, 0, .1);
    border-radius: 10px;
}

#accordion-ADA .panel-group .panel.active-group {
    padding: 36px !important;
    transition: padding 0.3s ease;
}

#accordion-ADA .panel-group .panel {
    padding: 8.5px 36px;
    transition: padding 0.3s ease;
}

#accordion-ADA .panel-group .panel .panel-body {
    padding-bottom: 0 !important;
}

#accordion-ADA .panel-group .panel a {
    padding: 0 !important;
}

#accordion-ADA .panel-title>a>span::after {
    font-size: 1.25em;
    font-family: "uncodeicon";
    content: "\f105";
    right: 0;
    margin-right: 0;
    margin-top: 0;
    font-weight: 400;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    transition: transform 200ms ease-out;
    transform-origin: center;
    width: 1em;
}

#accordion-ADA .panel-group .active-group .panel-title>a span::after {
    transform: translateY(-50%) rotate(90deg);
}

#accordion-ADA .panel-title>a>span {
    font-size: 20px;
    font-family: var(--font-sans) !important;
    font-weight: 700;
    text-transform: none;
}

.white-home p a,
.white-home p {
    color: #FFFFFF;
}

.clm-btn-no-border-white .uncont .btn-container {
    padding-top: 4px;
}

/* ── Article FAQ (secondary-accordion-ADA) — TWA redesign ── */
.secondary-accordion-ADA {
    margin-top: 2rem;
}

.secondary-accordion-ADA .panel-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.secondary-accordion-ADA .panel-group .panel {
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    overflow: hidden;
    background: #fff !important;
    margin: 0 !important;
    transition: border-color 0.3s;
}

.secondary-accordion-ADA .panel-group .panel.active-group {
    border-color: #e5e7eb !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.secondary-accordion-ADA .panel-group .panel .panel-heading {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.secondary-accordion-ADA .panel-group .panel h3,
.secondary-accordion-ADA .panel-group .panel .panel-title a>span {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    color: #111827 !important;
}

.secondary-accordion-ADA .panel-group .panel .panel-title a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 1.5rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
}

.secondary-accordion-ADA .panel-group .panel .panel-title a:hover {
    background: #f9fafb !important;
}

/* Hide old SVG icon */
.secondary-accordion-ADA .panel-group .panel h3::after {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    right: 0 !important;
    position: relative !important;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
    transform: rotate(0deg) !important;
    transition: transform 0.3s !important;
}

.secondary-accordion-ADA .panel.active-group h3::after {
    transform: rotate(180deg) !important;
}

.secondary-accordion-ADA .panel-group .panel-collapse .panel-body {
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
    font-size: 0.9375rem !important;
}

/* Section container — white background */
#accordion-preguntas-frecuentes {
    background: #fff !important;
}

#accordion-preguntas-frecuentes .row-parent {
    background: #fff !important;
}

footer #sub-footer .row {
    padding-bottom: 36px !important;
}

/* Footer — fondo negro puro + texto blanco */
footer#colophon,
footer#colophon .row-container,
footer#colophon .row-parent,
#sub-footer,
#sub-footer .row-container,
#sub-footer .row-parent {
    background-color: #000 !important;
}

footer#colophon,
footer#colophon p,
footer#colophon span,
footer#colophon li,
footer#colophon h1,
footer#colophon h2,
footer#colophon h3,
footer#colophon h4,
footer#colophon h5,
footer#colophon h6,
footer#colophon .uncode_text_column,
footer#colophon .uncode_text_column p,
#sub-footer,
#sub-footer p,
#sub-footer span {
    color: #fff !important;
}

footer#colophon a,
footer#colophon .btn-contacta-footer,
footer#colophon .btn-social-footer,
#sub-footer a {
    color: #fff !important;
    border-color: #fff !important;
}

footer#colophon a:hover,
#sub-footer a:hover {
    color: #7c3aed !important;
    border-color: #7c3aed !important;
}

/* idiomas  */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
    border: none !important;
}

.wpml-ls-legacy-dropdown a {
    border: none !important;
}

.wpml-ls-legacy-dropdown a:active {
    border: none !important;
}

.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown-click {
    width: 12.0em;
}

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after,
.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after {
    content: "\e874";
    font-family: 'uncodeicon' !important;
    border-bottom: 0;
    border-top: 0;
    top: calc(50% - 0.4em);
}

.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a {
    padding: 12px 10px;
}

/* fin idiomas  */

.row-oaw {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-right: 0;
    padding-top: 15px;
    width: 100%;
}

.row-oaw .label-oaw {
    font-size: 18px;
    color: #FFFFFF;
}

.row-oaw .input-oaw {
    background-color: transparent;
    border: 1.3px solid #fff;
    color: #fff;
    min-width: 93.5%;
    padding: 14px 15px 14px 21px;
}

.row-oaw .row-button {
    display: flex;
    justify-content: space-between;
    min-width: 93.5%;
    width: 93.5%;
}

.row-oaw .input-oaw::placeholder {
    color: #fff;
    font-family: var(--font-sans) !important;
}

.row-oaw .wpcf7-submit {
    align-items: center;
    border: 2px solid #fff !important;
    border-radius: 0;
    display: flex;
    font-size: 17px;
    gap: 23px;
    justify-content: space-between;
    letter-spacing: 0 !important;
    padding: 8px 16px 6px 16px;
}

.row-oaw .row-button .wpcf7-submit::after {
    content: url("http://localhost/tuwebaccesible/wp-content/uploads/2025/01/arrow-black-right.svg");
    display: flex;
    width: 27px;
}

.row-oaw .wpcf7-submit:hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

#wpcf7-f8744-p1070-o1 .wpcf7-response-output {
    color: #fff !important;
    font-style: italic !important;
}

#row-checkbox-oaw .wpcf7-list-item-label {
    color: #fff;
    font-size: 17px;
    line-height: 25px;
    padding-right: 20px;
}

#row-checkbox-oaw label {
    display: flex !important;
}

#row-checkbox-oaw #checkbox-oaw {
    background-color: transparent;
    border-radius: 0;
    margin-top: 3px;
    width: 28px;
    height: 20px;
}

#row-checkbox-oaw #checkbox-oaw:checked::before {
    background-color: #878787;
    line-height: 1.6em !important;
}

#row-checkbox-oaw .checkbox-oaw-url {
    color: #fff !important;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 3px;
}

#row-checkbox-oaw .checkbox-oaw-url:hover {
    color: var(--color-primary) !important;
}

/* Override old white-on-dark styles when inside TWA form (white background) */
.twa-obs-form-wrap #row-checkbox-oaw .wpcf7-list-item-label {
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.twa-obs-form-wrap #row-checkbox-oaw .checkbox-oaw-url {
    color: var(--color-primary, #7c3aed) !important;
    text-decoration: underline !important;
    border-bottom: none !important;
}

.twa-obs-form-wrap #row-checkbox-oaw .checkbox-oaw-url:hover {
    color: #5b21b6 !important;
}

.twa-obs-form-wrap #row-checkbox-oaw #checkbox-oaw {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
}

.twa-obs-form-wrap #row-checkbox-oaw #checkbox-oaw:checked {
    background: var(--color-primary, #7c3aed);
    border-color: var(--color-primary, #7c3aed);
}

.twa-obs-form-wrap #row-checkbox-oaw #checkbox-oaw:checked::before {
    content: '';
    display: block;
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    background: none;
}

.twa-obs-form-wrap #row-checkbox-oaw label {
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

#text-validador {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
}

.text-gradient-E28CDB {
    color: #8b5cf6 !important;
}

#img-wcag-validador,
.img-criterios-oaw {
    width: 160px;
}

/*Formulario de Generador de DA*/
.row-generator .input-generator {
    border: 1px solid #000;
    padding: 10px 15px;
    width: 100%;
    color: #000;
}

.row-generator #btn-generator-form {
    color: #FFF;
    border: 2px solid #000;
    background-color: #000;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 13px 28px;
}

.row-generator #btn-generator-form:hover {
    color: #000;
    background-color: transparent;
}

.row-generator #checkbox-terminos input {
    border: 1px solid #000;
    width: 18px;
    height: 18px;
}

.row-generator #checkbox-terminos input::before {
    top: 2px;
}


.grecaptcha-badge {
    visibility: hidden;
}

.wpml-ls-slot-shortcode_actions .js-wpml-ls-item-toggle:hover,
.wpml-ls-slot-shortcode_actions .js-wpml-ls-item-toggle:focus,
.wpml-ls-slot-shortcode_actions .js-wpml-ls-sub-menu .wpml-ls-link:hover {
    color: #ede9fe !important
}

/* Ocultar el botón de cerra del megamenú */
#mega-menu-wrap-primary .mega-close {
    display: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* ==== Clientes ==== */

/* Botones de tabs */
.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs {
    border-bottom: none;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 3rem;
}

.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li {
    background-size: 100% 0px;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: bottom;
    border-radius: 8px !important;
    min-width: 259px;
    padding: 14px 38px;
    transition: background-size .3s ease-in-out !important;
}

.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background-color: #000;
    border-radius: 8px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li.active {
    background-size: 100% 100%;
    border-radius: 8px;
}

.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li a {
    padding: 0;
    border: 0;
}

.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li.active a span {
    color: #FFF;
}

.tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li a span {
    color: #000000;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.188rem;
    text-transform: none;
    transition: color .3s ease-in-out !important;
}

.logos-nuestros-clientes img {
    margin-right: 2%;
    margin-bottom: 2%;
}

/* Empresas Casos de éxito */
.success__stories {
    padding-bottom: 1.7rem !important;
}

.success__stories .success__stories__item:nth-child(1) {
    padding-right: .656rem !important;
}

.success__stories .success__stories__item:nth-child(2) {
    padding-left: .656rem !important;
}

.success__stories__item .uncol {
    border: 2px solid #ede9fe;
    border-radius: 10px;
    padding: 0 2.313rem .938rem 2.313rem;
    height: 100%;
}

.success__stories__item .uncol .uncont {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.success__stories__item .uncol .uncont .company__description {
    padding-bottom: .5rem;
}

.success__stories__item .uncol .uncont .type__company {
    margin-top: auto !important;
}

.casos-exito .isotope-container .tmb .t-inside {
    border: 2px solid #ede9fe;
    border-radius: 10px;
    padding: .938rem 2.313rem .938rem 2.313rem;
}

.casos-exito .isotope-container .tmb .t-entry-visual-tc img {
    height: 90px;
    width: auto;
}

.casos-exito .isotope-container .tmb .t-entry-visual-tc .dummy {
    padding-top: 18.9% !important;
}

.casos-exito .isotope-container .tmb .t-entry p {
    font-size: 18px;
    line-height: 30px;
}

.casos-exito .isotope-container .tmb .t-entry div {
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
}

.casos-exito .loadmore-button a {
    color: #141414 !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    background-color: #f5f3ff !important;
}

.casos-exito .loadmore-button a:hover {
    color: #f5f3ff !important;
    background-color: #141414 !important;
}

.btn-color-811822:not(.btn-hover-nobg):not(.icon-animated):hover {
    background-color: #141414 !important;
}

.casos-exito .isotope-footer-inner.grid-footer-inner.limit-width.menu-light.text-center {
    text-align: left !important;
}

/* ==== Sección de opiniones ==== */
#client-opinion .t-inside {
    display: flex;
    flex-direction: column;
}

#client-opinion .isotope-container.isotope-infinite-button {
    min-height: 497px;
}

#client-opinion .t-entry-text,
#client-opinion .t-entry-visual {
    width: 100% !important;
}

#client-opinion .t-inside .not-image .not-image-content {
    background-color: #000;
    width: 70px;
    min-width: 70px;
    height: 70px;
    min-height: 70px;
    align-items: center;
    border-radius: 50%;
    cursor: default;
    display: flex;
    justify-content: center;
    user-select: none;
}

#client-opinion .t-inside .not-image .not-image-content span {
    color: #FFF;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
}

#client-opinion .t-entry-text .t-entry-text-tc {
    padding-left: 0 !important;
}

#client-opinion .t-entry-visual .t-entry-visual-cont:not(:has(.t-entry-cf-opinion-cargo, .t-entry-cf-opinion-empresa)),
#client-opinion .t-inside .not-image:not(:has(.t-entry-cf-opinion-cargo, .t-entry-cf-opinion-empresa)) {
    display: flex;
    align-items: center;
}

#client-opinion .t-entry-visual .t-entry-visual-cont .dummy {
    display: none;
    visibility: hidden;
}

#client-opinion .t-entry-cf-stars-number {
    margin-top: .5rem;
}

#client-opinion .t-entry-cf-stars-number {
    margin-top: .5rem;
}

#client-opinion .t-entry-cf-stars-number img {
    max-height: 20px;
    height: 20px;
    max-width: 107px !important;
}

#client-opinion .t-inside .not-image .opinion-container:not(:has(.t-entry-cf-opinion-cargo, .t-entry-cf-opinion-empresa)),
#client-opinion .t-entry-visual .t-entry-visual-cont:not(:has(.t-entry-cf-opinion-cargo, .t-entry-cf-opinion-empresa)) .opinion-container {
    padding-left: 1.5rem;
}

#client-opinion .t-inside .not-image .opinion-container:has(.t-entry-cf-opinion-cargo, .t-entry-cf-opinion-empresa),
#client-opinion .t-entry-visual .t-entry-visual-cont:has(.t-entry-cf-opinion-cargo, .t-entry-cf-opinion-empresa) .opinion-container {
    margin-top: 1rem;
}

#client-opinion .t-inside .not-image .opinion-container .t-entry-title,
#client-opinion .t-inside .not-image .opinion-container .t-entry-title a,
#client-opinion .t-entry-visual .t-entry-visual-cont .opinion-container .t-entry-title,
#client-opinion .tmb-light.tmb .t-entry-visual *:not(.add_to_cart_text):not(.view-cart) {
    color: var(--color-dark) !important;
    text-transform: uppercase;
    border-radius: 0;
}

#client-opinion .t-entry-visual .t-entry-visual-cont .t-entry-cf-opinion-cargo,
#client-opinion .t-entry-visual .t-entry-visual-cont .t-entry-cf-opinion-empresa,
#client-opinion .t-inside .not-image .opinion-container .t-entry-cf-opinion-cargo,
#client-opinion .t-inside .not-image .opinion-container .t-entry-cf-opinion-empresa {
    color: var(--color-dark) !important;
    margin-top: 0.25rem;
}

#client-opinion .t-entry-visual .t-entry-visual-cont .t-entry-cf-opinion-cargo,
#client-opinion .t-inside .not-image .opinion-container .t-entry-cf-opinion-cargo {
    font-weight: 600;
}

#client-opinion .t-entry-text .t-entry-text-tc .t-entry {
    margin-top: 1rem;
}

#client-opinion .t-entry-text .t-entry-text-tc .t-entry p {
    line-height: 28px;
    margin-top: .625rem !important;
}

#client-opinion .t-entry-text .t-entry-text-tc .t-entry-cf-opinion-title {
    font-weight: 600;
}

#client-opinion .t-entry-visual .t-entry-visual-cont span {
    display: block;
    max-width: 70px;
    max-height: 70px;
    width: 70px;
}

#client-opinion .t-entry-visual .t-entry-visual-cont a.pushed {
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    position: unset;
    border-radius: 50%;
}

#client-opinion .t-entry-visual .t-entry-visual-cont a img {
    border-radius: 4px;
    max-width: 70px;
    height: 70px;
}

#client-opinion .loadmore-button {
    display: flex;
    justify-content: start;
}

#client-opinion .loadmore-button a {
    color: #000 !important
}

#client-opinion .loadmore-button a:hover {
    color: #fff !important;
}

@media (min-width: 960px) {

    .first-column-footer .uncol,
    .first-column-footer .uncont {
        height: 100% !important;
    }

    .first-column-footer .uncont {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 24px;
    }

    .first-column-footer .uncont .icon-media {
        width: auto !important;
    }
}

@media (max-width: 960px) {
    #index-207438 .single-gutter>div>.tmb {
        padding-right: 72px !important;
        padding-left: 36px !important;
    }

    .casos-exito .loadmore-button a {
        margin-left: 36px !important;
    }

    .casos-exito .isotope-container .tmb .t-inside {
        padding: .938rem 1.75rem 1.5rem 1.75rem !important;
    }

    .casos-exito .isotope-container .tmb .t-inside .dummy {
        min-height: 85px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .border-bottom-black {
        border-bottom: 1px solid #000;
    }

    .mmb-container {
        right: 30px !important;
    }

    #cln-btn-home-border-black .single-block-padding {
        padding-top: 60px;
    }

    #menu-information {
        text-align: left;
    }

    #menu-information li a {
        padding-left: 0;
    }

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item:first-child>a.mega-menu-link {
        margin-top: 0 !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #main-logo .navbar-brand img {
        margin-left: 0;
    }

    .distribuidor-logo {
        font-size: 16px;
    }

    .fontsize-60 {
        font-size: 50px;
    }

    .fontsize-50 {
        font-size: 40px;
    }

    .fontheight-35 {
        line-height: 45px;
    }

    /** Home **/
    #img-title-home {
        padding-left: 36px;
    }

    #subtitle-h1-home {
        margin-top: 0;
    }

    #column-img-waw-home .uncode-single-media,
    #img-waw,
    #img-title-home {
        text-align: left;
    }

    #column-img-waw-home .uncode-single-media {
        padding-left: 0;
    }

    .right-banner-waw {
        padding-left: 0 !important;
    }

    #accordion-home .panel-group .panel h3 {
        padding-left: 1em;
    }

    .secondary-accordion-ADA .panel-group .panel h3 {
        padding-left: 1em;
    }

    .img-admin-publ-home {
        width: 50%;
    }

    .columna-contacto span.btn-container {
        right: -22px;
    }

}



/* Media Querie Mobile*/

@media (max-width: 569px) {

    :root {
        --section-padding-x: 1rem;
        --section-padding-y: 2.5rem;
    }

    /* General */
    .columna-contacto span.btn-container {
        right: -22px;
    }

    #mega-menu-wrap-primary .mega-menu-toggle+#mega-menu-primary {
        width: 320px !important;
    }

    header .row-menu-inner .menu-horizontal-inner {
        display: block !important;
    }

    .header-title {
        line-height: 40px;
    }

    .fontsize-35 {
        font-size: 1.8em;
    }

    .fontheight-40 {
        line-height: 35px;
    }

    .fontheight-50 {
        line-height: 40px;
    }

    .fontheight-60 {
        line-height: 45px;
    }

    .fontsize-70 {
        font-size: 33px !important;
    }

    .fontheight-sm-40 h1 {
        line-height: 40px;
    }

    .pt-sm-0 {
        padding-top: 0 !important;
    }

    .pt-sm-20 {
        padding-top: 20px !important;
    }

    .pr-80 {
        padding-right: 0 !important;
    }

    .pr-sm-0 {
        padding-right: 0 !important;
    }

    .pl-sm-0 {
        padding-left: 0 !important;
    }

    .pb-sm-0 {
        padding-bottom: 0 !important;
    }

    .pb-sm-50 {
        padding-bottom: 50px !important;
    }

    .pt-sm-50 {
        padding-top: 50px !important;
    }

    .mt-sm-0 {
        margin-top: 0 !important;
    }

    .mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .mt-sm-20 {
        margin-top: 20px !important;
    }

    .mt-sm-50 {
        margin-top: 50px !important;
    }

    .mb-sm-50 {
        margin-bottom: 50px !important;
    }

    .mx-sm-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #form-quienes-somos {
        display: block;
    }

    .right-banner-waw {
        padding-left: 0 !important;
    }

    #img-waw {
        text-align: left;
    }

    .line-contacto hr {
        width: 65px !important;
    }

    #column-img-que-accesibilidad .uncol {
        margin-top: 25px;
    }

    .pb-sm-20 .row-parent {
        padding-bottom: 20px !important;
    }

    #space-que-es {
        display: none;
    }

    .text-ventajas-accs {
        padding-right: 0 !important;
    }

    #form-quienes-somos #btn-enviar input {
        padding: 14px 0px;
    }

    .text-contacto-quienes {
        padding-right: 0;
    }

    #text-footer {
        padding-right: 0;
    }

    .no-padding-mobile {
        padding: 0 !important;
    }

    #container-list-mapa-web {
        padding-left: 0 !important;
    }

    #text-accs-we-all-web {
        padding-right: 0 !important;
    }

    .header-wrapper .header-content-inner {
        padding: 54px 36px 0px 36px !important;
    }

    /* Consultoria */

    .list-purple,
    .list-purple-lh-25 {
        padding-left: 40px !important;
        padding-right: 0 !important;
    }

    #img-asesoramiento-personal span {
        width: 100% !important;
    }

    .icons-w15 {
        width: 100%;
    }

    #row-title-home h1 {
        font-size: 2.2em !important;
        line-height: 38px !important;
    }

    #subtitle-h1-home p {
        font-size: 27px !important;
        line-height: 27px !important;
    }

    #btn-home-border-black {
        font-size: 16px;
        padding: 10px 32px 10px 20px !important
    }

    #btn-home-border-black i {
        margin-left: 30px;
    }

    .px-36 {
        padding-left: 36px;
        padding-right: 36px;
    }

    #cln-btn-home-border-black .btn-container {
        margin-bottom: 0;
    }

    #column-img-waw-home .uncode-single-media {
        text-align: left;
    }

    #accordion-home .panel-group .panel h3 {
        font-size: 1.5em;
        line-height: 24px;
        padding-left: 1em;
        padding-right: 2.5em;
    }

    .secondary-accordion-ADA .panel-group .panel h3 {
        font-size: 1.5em;
        line-height: 24px;
        padding-left: 1em;
        padding-right: 2.5em;
    }

    #list-home li {
        font-size: 1.5em
    }

    #img-wcag-home {
        text-align: center;
    }

    #column-img-waw-home .uncode-single-media {
        padding-left: 0;
    }

    .btn-no-border-white {
        padding: 6px 14px 5px 14px !important;
        font-size: 20px;
    }

    .btn-no-border-black {
        padding: 6px 10px 5px 10px !important;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        transform: none !important;
        text-align: left;
    }

    .btn-no-border-black::after,
    .purple-button::after {
        margin-left: 15px !important;
    }

    #btn-home-border-black::after {
        margin-left: 25px;
    }

    #img-top-kit-digital .no-block-padding {
        padding-top: 20px !important;
    }

    #accordion-home .panel-group .panel-collapse p {
        padding-left: 0;
    }

    #accordion-home .panel-group .panel-collapse .panel-body,
    .secondary-accordion-ADA .panel-group .panel-collapse .panel-body {
        padding-left: 1.313rem;
    }

    #column-lenguajes-diseños .no-block-padding {
        padding-left: 0 !important;
    }

    #firts-row-diseño-accesible .row-parent {
        padding-bottom: 0 !important;
    }

    .cuadro-consultoria .double-block-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #img-herramienta-acc,
    .img-caracteristicas-waw {
        position: initial;
        width: 100%;
    }

    .beneficios-acc-web {
        padding: 10px 0 0 0 !important;
    }

    .elementos-beneficios:nth-child(3) .row {
        padding-top: 0 !important;
    }

    .titles-certificados .row {
        padding-bottom: 0 !important;
        padding-top: 45px !important;
    }

    .fila-herramienta {
        margin-bottom: 40px !important;
    }

    .img-inline {
        gap: 20px;
    }

    .lista-servicio-avanzado li {
        font-size: 25px;
        line-height: 30px;
    }

    .container-code {
        height: auto !important;
        padding: 20px !important;
    }

    #list-icon {
        gap: 2px !important;
    }

    .link-button {
        transform: inherit !important;
    }

    .container-buttons .btn-container {
        margin-top: 20px !important;
    }

    .container-code {
        font-size: 16px;
    }

    .row-switcher-metodos {
        padding-left: 42px !important;
    }

    .tabs-pers-waw .nav-tabs,
    .tabs-pers-waw .nav-tabs>li {
        display: block !important;
    }

    .tabs-pers-waw .switcher-cursor {
        background-color: transparent !important;
    }

    .tabs-pers-waw .nav-tabs.tab-switch li:first-of-type:before {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        left: 0px;
    }

    .tabs-pers-waw .nav-tabs.tab-switch li:last-of-type:before {
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        right: 0;
    }

    .tabs-pers-waw ul .active a {
        color: var(--color-primary) !important;
    }

    .tabnav-container-code p {
        word-wrap: break-word;
    }

    .cuadro-consultoria {
        padding: 50px;
    }

    .number-title span {
        font-size: 40px;
    }

    .cuadro-consultoria {
        padding: 0;
    }

    .text-sm-center {
        text-align: center !important;
    }

    .header-wrapper .header-content-inner {
        padding: 100px 36px 50px 36px !important;
    }

    .post #row-unique-0 .row-parent,
    .post #row-unique-1 .row-parent {
        padding: 0;
        padding-top: 30px;
    }

    .col-widgets-sidebar,
    .col-widgets-sidebar .double-bottom-padding {
        padding-top: 0 !important;
    }

    .section-contacto-blog {
        margin-top: 50px;
    }

    .section-contacto-blog .row-parent {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #mi-input,
    .wpcf7-form-control {
        width: 100%;
    }

    .tablet-stacked .tmb.tmb-table .t-inside {
        padding-top: 72px !important;
    }

    .post.type-post .row-container .single-h-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .post.type-post #row-unique-3 .row.limit-width.row-parent {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block {
        margin-right: 15px !important;
    }

    #menu-information li {
        text-align: left;
    }

    #menu-information li a {
        padding-left: 0;
    }

    footer #sub-footer .row .wpb_row {
        display: flex;
        flex-direction: column-reverse;
        gap: 14px;
    }

    footer #sub-footer .row .wpb_row .wpb_column:nth-child(1) {
        border-top: 1px solid #000;
        padding-top: 15px;
    }

    .first-row-criterios-oaw .row-parent {
        padding-bottom: 0 !important;
    }

    .second-row-criterios-oaw .row-parent {
        padding-top: 0 !important;
    }

    .row-oaw .row-button {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .row-oaw .wpcf7-submit {
        font-size: 3.5vw;
    }

    .tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs {
        gap: 1rem;
    }

    .tabs__clients .uncode-wrapper .vc_tta-tabs-container .nav.nav-tabs li a span {
        font-size: 1.125rem;
    }

    #client-opinion .t-entry-text .t-entry-text-tc {
        padding-top: 5px !important;
    }

    #client-opinion .isotope-wrapper .isotope-layout .tmb:not(:first-child) {
        margin-top: 30px !important;
    }
}


/* ==========================================================================
   NEW DESIGN SYSTEM — Component Classes (React Prototype v2.0)
   ========================================================================== */

/* ---------- Global Body Override ---------- */
body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* ---------- Typography — Serif Headings ---------- */
.font-serif,
.heading-serif {
    font-family: var(--font-serif);
}

.heading-serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
}

/* ---------- Color Utility Classes ---------- */
.text-corporate-primary {
    color: var(--color-primary) !important;
}

.bg-corporate-primary {
    background-color: var(--color-primary) !important;
}

.border-corporate-primary {
    border-color: var(--color-primary) !important;
}


/* Pricing CTA outline variant */
.twa-cta-outline-dark {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

.twa-cta-outline-dark:hover,
.twa-cta-outline-dark:focus {
    background: #000 !important;
    color: #fff !important;
}

.text-corporate-dark {
    color: var(--color-dark) !important;
}

.bg-corporate-dark {
    background-color: var(--color-dark) !important;
}

.bg-corporate-gray {
    background-color: var(--color-gray-100) !important;
}

/* ---------- Gradient Text ---------- */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-white {
    background: linear-gradient(to right, #fff, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Background Patterns ---------- */
.bg-grid-pattern {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

.bg-grid-pattern-dark {
    background-size: 60px 60px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.bg-grid-pattern-subtle {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

/* ---------- Blur Overlays ---------- */
.bg-blur-primary {}

.bg-blur-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: var(--color-primary);
    opacity: 0.1;
    filter: blur(120px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ---------- Container ---------- */
.twa-container {
    max-width: var(--container-max, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

/* ---------- Section Spacing ---------- */
.twa-section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.twa-section-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.twa-section-lg {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* ---------- NEW Hero — 3-Block Grid ---------- */
.twa-hero {
    overflow: hidden;
    background-color: var(--color-black);
    color: white;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.twa-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 85vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .twa-hero-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.twa-hero-main {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 640px) {
    .twa-hero-main {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .twa-hero-main {
        padding: 4rem;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.twa-hero-sidebar {
    display: flex;
    flex-direction: column;
}

.twa-hero-sidebar-block {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color var(--transition-base);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .twa-hero-sidebar-block {
        padding: 2.5rem;
    }
}

.twa-hero-sidebar-block:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.twa-hero-sidebar-block+.twa-hero-sidebar-block {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hero badge */
.twa-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    color: var(--color-gray-400);
    margin-bottom: 2rem;
}

.twa-badge-number {
    color: var(--color-primary-400);
}

.twa-badge-line {
    width: 2rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

/* Hero Title — React: text-5xl/sm:6xl/md:7xl/xl:8xl = 48/60/84/96px */
.twa-hero-title {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.9;
    padding-bottom: 0.15em;
}

.twa-hero-title .accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--color-primary);
}

.twa-hero-title .cursor {
    color: var(--color-primary);
    animation: blink 1s step-end infinite;
}

/* Hero Description — React: text-lg/md:xl, leading-relaxed, font-light */
.twa-hero-desc {
    font-size: 1.125rem;
    color: var(--color-gray-400);
    max-width: 36rem;
    margin-top: 2rem;
    line-height: 1.625;
    font-weight: 300;
}

@media (min-width: 768px) {
    .twa-hero-desc {
        font-size: 1.25rem;
    }
}

/* ---------- NEW Button System ---------- */
.twa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 0;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none !important;
    border: none;
    line-height: 1;
    font-family: var(--font-sans);
}

.twa-btn-primary {
    background-color: white;
    color: black !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.twa-btn-primary:hover,
.twa-btn-primary:focus {
    background-color: var(--color-primary);
    color: white !important;
    box-shadow: none;
}

.twa-btn-primary .twa-icon,
.twa-btn-outline .twa-icon {
    transition: transform var(--transition-base);
}

.twa-btn-outline {
    background: transparent;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.twa-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

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

.twa-btn-dark:hover {
    background-color: var(--color-primary);
}

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

.twa-btn-violet:hover {
    background-color: var(--color-primary-hover);
}

.twa-btn-ghost {
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-gray-200);
}

.twa-btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Small link CTA — React: text-xs font-bold uppercase tracking-wider */
.twa-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    transition: color var(--transition-base);
}

.twa-link-cta:hover {
    color: var(--color-primary-400);
}

/* ---------- NEW Bento Grid ---------- */
.twa-bento-grid {
    display: grid;
    gap: 1.5rem;
}

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

@media (min-width: 768px) {
    .twa-bento-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (min-width: 768px) {
    .twa-bento-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .twa-bento-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.twa-bento-grid-4 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
    .twa-bento-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .twa-bento-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Bento Card */
.twa-bento-card {
    padding: 2rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    overflow: hidden;
}

.twa-bento-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.twa-bento-card-dark {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.twa-bento-card-dark:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Span modifiers */
.twa-col-span-2 {
    grid-column: span 1;
}

@media (min-width: 768px) {
    .twa-col-span-2 {
        grid-column: span 2;
    }
}

.twa-row-span-2 {
    grid-row: span 2;
}

/* ---------- NEW Services Section (Tabbed) ---------- */
.twa-services-section {
    background-color: #050505;
    color: white;
    overflow: hidden;
}

.twa-services-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .twa-services-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

/* Tab Button */
.twa-tab-btn {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all var(--transition-base);
    overflow: hidden;
    background: transparent;
    cursor: pointer;
}

.twa-tab-btn.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.twa-tab-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.02);
    padding-left: 1.75rem;
}

.twa-tab-btn .indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 2px 2px 0;
}

/* Visualization panel */
.twa-viz-panel {
    min-height: 500px;
    background: #0A0A0A;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* ---------- NEW Sectors Marquee ---------- */
.twa-marquee-wrap {
    overflow: hidden;
    padding: 2rem 0;
}

.twa-marquee-track {
    display: flex;
    gap: 2rem;
    animation: marquee 40s linear infinite;
    width: fit-content;
}

.twa-marquee-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
}

.twa-marquee-item:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
}

/* ---------- NEW Normativas Timeline ---------- */
.twa-timeline {
    padding-left: 2rem;
}

.twa-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-gray-200);
}

.twa-timeline-item {
    padding-bottom: 2.5rem;
    padding-left: 2rem;
}

.twa-timeline-item::before {
    content: '';
    position: absolute;
    left: -2.35rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid white;
    z-index: 1;
}

.twa-timeline-item.urgent::before {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

/* ---------- NEW Section Headers ---------- */
.twa-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.twa-section-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.twa-section-title--sm {
    font-size: clamp(1.5rem, 3vw, 1.875rem) !important;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.twa-section-text {
    font-size: 1.25rem;
    line-height: 1.625;
    color: var(--color-gray-600);
}

.twa-section-title .accent {
    color: var(--color-gray-600);
}

.twa-section-title .accent em,
.twa-section-title .accent,
.twa-section-title--sm .accent em,
.twa-section-title--sm .accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 900;
}

.twa-section-title .accent-primary,
.twa-section-title--sm .accent-primary {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 900;
    color: var(--color-primary-700);
}

/* On dark backgrounds, use a lighter purple for WCAG AA contrast (>=3:1 for large text) */
[style*="background:var(--color-black)"] .twa-section-title .accent-primary,
[style*="background:var(--color-dark)"] .twa-section-title .accent-primary,
.twa-section[style*="background:var(--color-black)"] .accent-primary,
.twa-section[style*="background:var(--color-dark)"] .accent-primary,
.twa-section-lg[style*="background:var(--color-black)"] .accent-primary {
    color: var(--color-primary-400);
}

/* Underlined CTA link */
.twa-link-underline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    font-size: 1rem;
    color: var(--color-black);
    text-decoration: none;
    border-bottom: none;
    padding-bottom: 0.25rem;
    transition: color 0.3s ease;
}

/* Static underline (default state) */
.twa-link-underline::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-black);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: right;
}

/* Animated underline (hover — draws from left in purple) */
.twa-link-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.twa-link-underline:hover {
    color: var(--color-primary);
}

.twa-link-underline:hover::before {
    transform: scaleX(0);
}

.twa-link-underline:hover::after {
    transform: scaleX(1);
}


/* ---------- NEW Card Styles ---------- */
.twa-card {
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all var(--transition-base);
    overflow: hidden;
}

.twa-card:hover {
    border-color: var(--color-primary-300);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.twa-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary-lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.twa-card-tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-lighter);
    color: var(--color-primary);
}

.twa-card-tag-urgent {
    background: #fef2f2;
    color: #ef4444;
}

/* Dark card variant */
.twa-card-dark {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.twa-card-dark:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- NEW Solution Cards ---------- */
/* React: border border-gray-200 rounded-xl p-6 */
.twa-solution-card {
    border: 1px solid var(--color-gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all var(--transition-slow);
    overflow: hidden;
}

.twa-solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.twa-solution-card:hover::before {
    transform: scaleX(1);
}

.twa-solution-card:hover {
    border-color: var(--color-primary-200);
    box-shadow: 0 20px 60px -15px rgba(124, 58, 237, 0.15);
}

/* ---------- NEW Footer ---------- */
.twa-footer {
    background-color: var(--color-black);
    color: white;
    padding: 6rem 1.5rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
}

.twa-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
}

@media (min-width: 768px) {
    .twa-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .twa-footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.twa-footer-heading {
    color: white;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
    display: inline-block;
    margin-bottom: 2rem;
}

.twa-footer-link {
    color: var(--color-gray-400);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
    display: inline-block;
}

.twa-footer-link:hover {
    color: white;
    transform: translateX(4px);
}

.twa-footer-social-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: var(--radius-lg);
    transition: all var(--transition-slow);
    text-decoration: none;
    color: white;
}

.twa-footer-social-btn:hover {
    background: white;
    color: black;
}

.twa-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-gray-400);
}

@media (min-width: 768px) {
    .twa-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ---------- NEW Blog Section ---------- */
.twa-blog-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
}

.twa-blog-card:hover {
    border-color: var(--color-primary-200);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.twa-blog-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.twa-blog-card-body {
    padding: 1.5rem;
}

.twa-blog-card-category {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* ---------- NEW Client Logos Section ---------- */
.twa-clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

@media (min-width: 640px) {
    .twa-clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .twa-clients-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.twa-clients-cell {
    background: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
}

.twa-clients-cell:hover {
    background: var(--color-primary-lighter);
}

.twa-clients-cell img {
    max-height: 40px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all var(--transition-base);
}

.twa-clients-cell:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ---------- NEW Contact Section ---------- */
.twa-contact-section {
    background: var(--color-black);
    color: white;
    overflow: hidden;
}

.twa-contact-form input,
.twa-contact-form textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 1rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    transition: border-color var(--transition-base);
    border-radius: var(--radius-sm);
}

.twa-contact-form input:focus,
.twa-contact-form textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.twa-contact-form label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-400);
    margin-bottom: 0.5rem;
    display: block;
}

/* ---------- NEW Certification/Trust Badges ---------- */
.twa-cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem;
    border-radius: var(--radius-xl);
    transition: border-color var(--transition-base);
}

.twa-cert-badge:hover {
    border-color: var(--color-primary-400);
}

/* ---------- NEW Pricing Table ---------- */
.twa-pricing-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    overflow: hidden;
    transition: all var(--transition-base);
}

.twa-pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.twa-pricing-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
}

.twa-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ---------- NEW Made in EU Badge ---------- */
.twa-eu-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: var(--radius-lg);
}

/* ---------- Floating Box (WE/ALL/WEB logo) ---------- */
.twa-floating-box {
    animation: float 6s ease-in-out infinite;
    background: white;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
    transition: transform var(--transition-slow);
}

.twa-floating-box:hover {
    transform: scale(1.02);
}

/* ---------- Tag/Badge pills ---------- */
/* React: text-xs font-bold uppercase tracking-widest text-white/50 border border-white/30 px-3 py-1.5 rounded-full */
.twa-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
}

/* ---------- Status Indicators ---------- */
.twa-status-dot {
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
}

.twa-status-dot .ping {
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #22c55e;
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.twa-status-dot .dot {
    display: inline-flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #22c55e;
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ---------- Scroll Progress Bar ---------- */
.twa-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 99999;
    transition: width 50ms linear;
}

/* ---------- WPBakery Integration Helpers ---------- */
.vc_row.twa-dark-section {
    background-color: var(--color-black) !important;
    color: white !important;
}

.vc_row.twa-dark-section * {
    color: inherit;
}

.vc_row.twa-gray-section {
    background-color: var(--color-gray-100) !important;
}

.vc_row.twa-violet-section {
    background-color: var(--color-primary-lighter) !important;
}

/* ── Restore heading color after TWA-OFF of .style-light heading-colors ──
   style-custom.css rule ".style-light h1 { color: #212121 }" was removed
   because it overrides Tailwind .text-white on dark backgrounds.
   This replacement gives headings black color on light backgrounds,
   but does NOT apply inside .twa-block (Tailwind controls color there). */
.style-light h1,
.style-light h2,
.style-light h3,
.style-light h4,
.style-light h5,
.style-light h6 {
    color: #111 !important;
}

/* TWA blocks on dark backgrounds: undo the #111 above.
   Covers: Tailwind bg-black class, inline style background:var(--color-black),
   twa-hero, dark cards, and any element with .text-white class. */
.twa-block .text-white,
.twa-block [class*="text-white"],
.twa-block .bg-black h1,
.twa-block .bg-black h2,
.twa-block .bg-black h3,
.twa-block .bg-black h4,
.twa-block .bg-black h5,
.twa-block .bg-black h6,
.twa-hero h1,
.twa-hero h2,
.twa-hero h3,
.twa-svc-card-dark h3,
.twa-bento-card-dark h3,
[style*="background:var(--color-black)"] h1,
[style*="background:var(--color-black)"] h2,
[style*="background:var(--color-black)"] h3,
[style*="background:#000"] h1,
[style*="background:#000"] h2,
[style*="background:#000"] h3,
section[style*="background:var(--color-black)"] h1,
section[style*="background:var(--color-black)"] h2,
section[style*="background:var(--color-black)"] h3,
header[style*="background:#000"] h1,
header[style*="background:var(--color-black)"] h1 {
    color: #fff !important;
}

/* TWA blocks: Tailwind .text-white etc. controls color via !important overrides
   in the Tailwind color utilities section below. No blanket rule needed here. */
/* (removed: .twa-block h1-h6 { color: inherit } — was inheriting #777 from .style-light) */


/* ── Override UNCODE default fonts ──
   UNCODE injects fonts dynamically from Theme Options.
   These rules ensure Inter + Playfair Display are always used,
   regardless of the UNCODE backend font configuration. ── */
body,
.style-font-alt,
.btn,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
.heading-text,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.t-entry-title,
.t-entry-title a,
.widget-title,
.post-title,
.menu-item a,
.mega-menu-link,
.panel-title,
.panel-title a,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
blockquote {
    font-family: var(--font-sans) !important;
}

/* Serif accent — used for italic emphasis in headings */
h1 .accent,
h2 .accent,
h3 .accent,
.heading-text .accent,
.twa-text-serif-accent,
.font-serif,
.heading-serif {
    font-family: var(--font-serif) !important;
    font-style: italic;
}

/* Preserve UNCODE icon font where it's needed */
[class*="fa-"]::before,
[class*="fa-"]::after,
.uncodeicon::before,
.uncodeicon::after {
    font-family: "uncodeicon" !important;
}

/* ---------- NEW Responsive additions ---------- */
@media (max-width: 639px) {
    .twa-hero {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    .twa-hero-grid {
        display: block;
    }

    .twa-hero-main {
        padding: 2rem 1rem;
    }

    .twa-hero-title {
        font-size: 3.25rem;
        line-height: 0.95;
        letter-spacing: -0.04em;
    }

    .twa-hero-desc {
        font-size: 1rem;
        line-height: 1.7;
        margin-top: 1.5rem;
    }

    .twa-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .twa-bento-card {
        padding: 1.5rem;
    }

    .twa-btn {
        width: 100%;
    }
}

/* React: sm:text-6xl = 3.75rem */
@media (min-width: 640px) and (max-width: 767px) {
    .twa-hero-title {
        font-size: 3.75rem;
    }
}

/* React: md:text-7xl = 4.5rem */
@media (min-width: 768px) and (max-width: 1279px) {
    .twa-hero-title {
        font-size: 4.5rem;
    }
}

/* React: xl:text-8xl = 6rem */
@media (min-width: 1280px) {
    .twa-hero-title {
        font-size: 6rem;
    }
}

/* ==========================================================================
   PHASE 3 — Homepage Section Styles
   ========================================================================== */

/* Grid pattern overlay for dark sections */
.twa-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Decorative glow */
.twa-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Sector card (dark bg) — React: p-5 rounded-xl = 20px padding, 12px radius */
.twa-sector-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-base);
    text-decoration: none;
    color: white;
}

.twa-sector-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(124, 58, 237, 0.3);
}

.twa-sector-card .icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background: rgba(124, 58, 237, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Icon circle (WCAG banner) */
.twa-icon-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-slow);
    color: white;
}

@media (min-width: 640px) {
    .twa-icon-circle {
        width: 6rem;
        height: 6rem;
    }
}

.twa-icon-circle:hover {
    border-color: white;
    background: white;
    color: black;
}

.twa-icon-circle svg {
    transition: transform var(--transition-base);
}

.twa-icon-circle:hover svg {
    transform: scale(1.1);
}

/* Metric display (other norms section) */
.twa-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .twa-metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.twa-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.twa-metric-scope {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-gray-400);
}

/* React: text-5xl md:text-6xl lg:text-7xl font-black italic = 48/60/72px */
.twa-metric-value {
    font-size: 3rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    color: white;
}

@media (min-width: 768px) {
    .twa-metric-value {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .twa-metric-value {
        font-size: 4.5rem;
    }
}

.twa-metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-400);
    font-weight: 700;
    line-height: 1.6;
}

.twa-metric-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #a78bfa;
    font-weight: 900;
    border: 1px solid rgba(167, 139, 250, 0.3);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-top: 0.25rem;
}

/* Horizontal timeline (desktop) */
.twa-h-timeline {
    position: relative;
    display: none;
}

@media (min-width: 1024px) {
    .twa-h-timeline {
        display: block;
    }
}

.twa-h-timeline-line {
    position: absolute;
    top: 10px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--color-gray-200);
}

.twa-h-timeline-line,
.twa-v-timeline-line {
    overflow: hidden;
}

.twa-h-timeline-line::after,
.twa-v-timeline-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transition: transform 3.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.twa-h-timeline-line::after {
    transform: scaleX(0);
    transform-origin: left center;
}

.twa-v-timeline-line::after {
    transform: scaleY(0);
    transform-origin: top center;
}

.twa-h-timeline.is-revealed .twa-h-timeline-line::after {
    transform: scaleX(1);
}

.twa-v-timeline.is-revealed .twa-v-timeline-line::after {
    transform: scaleY(1);
}

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

    .twa-h-timeline-line::after,
    .twa-v-timeline-line::after {
        transition: none;
    }
}

.twa-h-timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.twa-h-timeline-grid > div {
    opacity: 0.2;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.twa-h-timeline.is-revealed .twa-h-timeline-grid > div {
    opacity: 1;
    transform: translateY(0);
}

.twa-h-timeline.is-revealed .twa-h-timeline-grid > div:nth-child(1) { transition-delay: 0.10s; }
.twa-h-timeline.is-revealed .twa-h-timeline-grid > div:nth-child(2) { transition-delay: 0.24s; }
.twa-h-timeline.is-revealed .twa-h-timeline-grid > div:nth-child(3) { transition-delay: 0.38s; }
.twa-h-timeline.is-revealed .twa-h-timeline-grid > div:nth-child(4) { transition-delay: 0.52s; }

.twa-h-timeline-dot {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    position: relative;
    z-index: 10;
    margin: 0 auto 2.25rem;
}

.twa-h-timeline-dot.normal {
    background: white;
    border: 2px solid var(--color-gray-400);
}

.twa-h-timeline-dot.urgent {
    background: var(--color-primary);
    animation: sombraDesvanecida 2s ease-in-out infinite;
}

/* React: p-6 rounded-xl = 24px, 12px */
.twa-h-timeline-card {
    padding: 1.625rem 1.5rem;
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    text-align: left;
    text-decoration: none;
    display: block;
}

.twa-h-timeline-card.normal {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    color: inherit;
}

.twa-h-timeline-card.urgent {
    background: var(--color-black);
    color: white;
}

a.twa-h-timeline-card.urgent,
a.twa-h-timeline-card.urgent:hover,
a.twa-h-timeline-card.urgent:visited {
    color: white;
    text-decoration: none;
}

a.twa-h-timeline-card.normal,
a.twa-h-timeline-card.normal:hover,
a.twa-h-timeline-card.normal:visited {
    color: inherit;
    text-decoration: none;
}

.twa-h-timeline-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.twa-h-timeline-card.urgent:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

a.twa-h-timeline-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Mobile vertical timeline (hidden on desktop) */
.twa-v-timeline {
    display: block;
    position: relative;
    padding-left: 0;
}

.twa-v-timeline-content > a {
    opacity: 0.25;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.twa-v-timeline.is-revealed .twa-v-timeline-content > a {
    opacity: 1;
    transform: translateY(0);
}

.twa-v-timeline.is-revealed .twa-v-timeline-content > a:nth-child(1) { transition-delay: 0.08s; }
.twa-v-timeline.is-revealed .twa-v-timeline-content > a:nth-child(2) { transition-delay: 0.18s; }
.twa-v-timeline.is-revealed .twa-v-timeline-content > a:nth-child(3) { transition-delay: 0.28s; }
.twa-v-timeline.is-revealed .twa-v-timeline-content > a:nth-child(4) { transition-delay: 0.38s; }

.twa-v-timeline-content > a:focus-visible {
    outline: none;
}

.twa-v-timeline-content > a:focus-visible .twa-h-timeline-card {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

@media (min-width: 1024px) {
    .twa-v-timeline {
        display: none;
    }
}

/* Two column layout */
.twa-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .twa-two-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* What-is / Context layout: text + watermark side by side */
.twa-whatis-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.twa-whatis-content {
    flex: 1;
}

.twa-whatis-watermark {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .twa-whatis-layout {
        flex-direction: row;
        align-items: center;
        gap: 4rem;
    }

    .twa-whatis-content {
        flex: 1;
    }

    .twa-whatis-watermark {
        flex: 0 0 auto;
    }
}

/* Benefits layout: heading + grid */
.twa-benefits-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.twa-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .twa-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .twa-benefits-layout {
        flex-direction: row;
        gap: 4rem;
    }

    .twa-benefits-heading {
        flex: 0 0 25%;
        position: sticky;
        top: 8rem;
        align-self: flex-start;
    }

    .twa-benefits-grid {
        flex: 1;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Sticky sidebar */
@media (min-width: 1024px) {
    .twa-sticky {
        position: sticky;
        top: 8rem;
    }
}

/* Solutions 2x2 grid */
.twa-solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .twa-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Normativa in-force badge */
.twa-badge-in-force {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
}

/* Service bento 12-col grid */
.twa-services-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .twa-services-bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .twa-services-bento {
        grid-template-columns: repeat(12, 1fr);
    }

    .twa-services-bento .svc-featured {
        grid-column: span 6;
        grid-row: span 2;
    }

    .twa-services-bento .svc-medium {
        grid-column: span 6;
    }

    .twa-services-bento .svc-small {
        grid-column: span 3;
    }
}

/* React: rounded-2xl = 16px */
.twa-svc-card {
    border-radius: 1rem;
    padding: 2rem;
    transition: all var(--transition-base);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.twa-svc-card-white {
    background: white;
    border: 2px solid var(--color-gray-200);
    color: var(--color-black);
    transition: all 0.3s ease;
}

.twa-svc-card-white:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

.twa-svc-card-dark {
    background: var(--color-black);
    border: 3px solid var(--color-black);
    color: white;
    overflow: hidden;
}

.twa-svc-card-dark:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

.twa-svc-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-base);
}

.twa-svc-icon-dark {
    background: var(--color-black);
    color: white;
}

.twa-svc-card-white:hover .twa-svc-icon-dark {
    background: var(--color-primary);
}

.twa-svc-icon-light {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(8px);
}

/* VC Section full-width override */
.vc_section.twa-vc-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.twa-vc-full>.vc_row {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.twa-vc-full .vc_column_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.twa-vc-full .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.twa-vc-full .wpb_wrapper {
    margin: 0 !important;
}

.twa-vc-full .wpb_text_column {
    margin-bottom: 0 !important;
}

.twa-vc-full .vc_column_text_no_gap {
    margin-bottom: 0 !important;
}

/* WCAG banner layout */
.twa-wcag-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .twa-wcag-banner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Gradient text */
.twa-gradient-text {
    background: linear-gradient(to bottom right, white, #6b7280);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Contact section white bg variant */
.twa-contact-white .wpcf7 input[type="text"],
.twa-contact-white .wpcf7 input[type="email"],
.twa-contact-white .wpcf7 input[type="tel"],
.twa-contact-white .wpcf7 textarea {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    width: 100%;
    transition: border-color var(--transition-base);
}

.twa-contact-white .wpcf7 input:focus,
.twa-contact-white .wpcf7 textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.twa-contact-white .wpcf7 input[type="submit"] {
    background: var(--color-black);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base);
    font-family: var(--font-sans);
}

.twa-contact-white .wpcf7 input[type="submit"]:hover {
    background: var(--color-primary);
}

/* Contact section — new layout matching React prototype */
.twa-contact-layout {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.twa-contact-layout .twa-contact-form-wrap .wpb_row.row-inner:not(:last-child) .wpb_column{
    margin-bottom: 1rem;
}

@media (min-width: 1024px) {
    .twa-contact-layout {
        flex-direction: row;
        gap: 6rem;
    }

    .twa-contact-info {
        width: 33.333%;
        flex-shrink: 0;
    }

    .twa-contact-form-wrap {
        width: 66.666%;
    }
}

.twa-contact-item:hover div:first-child {
    background: var(--color-black) !important;
    color: white !important;
    border-color: var(--color-black) !important;
}

.twa-contact-map:hover {
    filter: grayscale(0) !important;
}

/* CF7 form inside contact section — border-bottom inputs matching React */
.twa-contact-form-wrap .wpcf7 {
    background: var(--color-gray-50);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-gray-100);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
    .twa-contact-form-wrap .wpcf7 {
        padding: 3rem;
    }
}

.twa-contact-form-wrap .wpcf7 input[type="text"],
.twa-contact-form-wrap .wpcf7 input[type="email"],
.twa-contact-form-wrap .wpcf7 input[type="tel"],
.twa-contact-form-wrap .wpcf7 textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-gray-500);
    border-radius: 0;
    padding: 1rem 0;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    width: 100%;
    transition: border-color var(--transition-base);
}

.twa-contact-form-wrap .wpcf7 input:focus,
.twa-contact-form-wrap .wpcf7 textarea:focus {
    border-color: var(--color-black);
    outline: none;
}

.twa-contact-form-wrap .wpcf7 label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}

.twa-contact-form-wrap .wpcf7 input[type="submit"] {
    background: var(--color-black);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    padding: 1.25rem 3rem;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-sans);
    box-shadow: var(--shadow-xl);
}

.twa-contact-form-wrap .wpcf7 input[type="submit"]:hover {
    background: var(--color-primary);
    box-shadow: var(--shadow-2xl);
    transform: translateY(-2px);
}

/* Acceptance checkbox — legible custom style */
.twa-contact-form-wrap .wpcf7 label:has(.wpcf7-acceptance) {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 1.5rem 0;
}

.twa-contact-form-wrap .wpcf7-acceptance input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 2px solid var(--color-gray-400, #9ca3af);
    border-radius: 0.25rem;
    background: white;
    cursor: pointer;
    margin-top: 0.1rem;
    transition: all 0.2s;
    position: relative;
}

.twa-contact-form-wrap .wpcf7-acceptance input[type="checkbox"]:hover {
    border-color: var(--color-primary, #7c3aed);
}

.twa-contact-form-wrap .wpcf7-acceptance input[type="checkbox"]:focus {
    outline: 2px solid var(--color-primary, #7c3aed);
    outline-offset: 2px;
    box-shadow: none;
}

.twa-contact-form-wrap .wpcf7-acceptance input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none;
}

.twa-contact-form-wrap .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--color-primary, #7c3aed);
    border-color: var(--color-primary, #7c3aed);
}

.twa-contact-form-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.twa-contact-form-wrap .acepto {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4b5563);
}

.twa-contact-form-wrap .acepto a {
    color: var(--color-primary, #7c3aed);
    font-weight: 600;
    text-decoration: none;
}

.twa-contact-form-wrap .acepto a:hover {
    text-decoration: underline;
}

/* ── Observatory form (CF7 light theme) ── */
.twa-obs-form-wrap .wpcf7 input[type="text"],
.twa-obs-form-wrap .wpcf7 input[type="email"],
.twa-obs-form-wrap .wpcf7 input[type="url"] {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    color: #111 !important;
    background: #fff !important;
    font-family: var(--font-sans) !important;
    box-sizing: border-box;
}

.twa-obs-form-wrap .wpcf7 input:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
}

.twa-obs-form-wrap .wpcf7 label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    font-family: var(--font-sans) !important;
}

.twa-obs-form-wrap .wpcf7 input[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-family: var(--font-sans) !important;
    transition: background 0.3s;
}

.twa-obs-form-wrap .wpcf7 input[type="submit"]:hover {
    background: var(--color-primary) !important;
}

.twa-obs-form-wrap .wpcf7 label:has(.wpcf7-acceptance) {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 1.5rem 0;
}

.twa-obs-form-wrap .wpcf7-acceptance input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
}

.twa-obs-form-wrap .wpcf7-acceptance input[type="checkbox"]:hover {
    border-color: var(--color-primary, #7c3aed);
}

.twa-obs-form-wrap .wpcf7-acceptance input[type="checkbox"]:focus {
    outline: 2px solid var(--color-primary, #7c3aed);
    outline-offset: 2px;
    box-shadow: none;
}

.twa-obs-form-wrap .wpcf7-acceptance input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none;
}

.twa-obs-form-wrap .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--color-primary, #7c3aed);
    border-color: var(--color-primary, #7c3aed);
}

.twa-obs-form-wrap .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.twa-obs-form-wrap .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.4;
}

.twa-obs-form-wrap .wpcf7-acceptance .wpcf7-list-item-label a {
    color: var(--color-primary, #7c3aed) !important;
    text-decoration: underline;
}

/* ── Trial form (CF7 dark theme inside solution pages) ── */

/* Mobile-first: tighter padding on small screens */
.twa-trial-form {
    padding: 1.5rem !important;
}
@media (min-width: 768px) {
    .twa-trial-form {
        padding: 2rem !important;
    }
}
@media (min-width: 1024px) {
    .twa-trial-form {
        padding: 3rem !important;
    }
}

/* Reset legacy .form-prueba-gratis styles inside .twa-trial-form */
.twa-trial-form .form-prueba-gratis .input-name input,
.twa-trial-form .form-prueba-gratis .input-email input,
.twa-trial-form .form-prueba-gratis .input-tlfn input {
    border: none !important;
    margin-top: 0.375rem !important;
}
.twa-trial-form .form-prueba-gratis .input-name label,
.twa-trial-form .form-prueba-gratis .input-email label,
.twa-trial-form .form-prueba-gratis .input-tlfn label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}
.twa-trial-form .form-prueba-gratis .btn-enviar {
    margin-top: 0.5rem !important;
}
.twa-trial-form .form-prueba-gratis .btn-enviar input {
    background-color: transparent !important;
    padding: 0 !important;
    font-size: inherit !important;
}
.twa-trial-form .form-prueba-gratis .checkbox-terminos input {
    border: none !important;
}

/* Row spacing */
.twa-trial-form .form-prueba-gratis .row-inner {
    margin-bottom: 1.25rem;
}
.twa-trial-form .form-prueba-gratis .row-inner:last-child {
    margin-bottom: 0;
}
.twa-trial-form .form-prueba-gratis .row-inner p {
    margin-bottom: 0;
    margin-top: 0;
}

/* Inputs */
.twa-trial-form .wpcf7 input[type="text"],
.twa-trial-form .wpcf7 input[type="email"],
.twa-trial-form .wpcf7 input[type="tel"],
.twa-trial-form .wpcf7 input[type="url"],
.twa-trial-form .wpcf7 textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
    transition: border-color 0.3s, background 0.3s;
    font-family: var(--font-sans) !important;
    width: 100%;
    margin-top: 0.375rem;
}

.twa-trial-form .wpcf7 input::placeholder,
.twa-trial-form .wpcf7 textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.twa-trial-form .wpcf7 input:focus,
.twa-trial-form .wpcf7 textarea:focus {
    border-color: var(--color-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    outline: none !important;
}

/* Labels — WCAG AA: rgba 0.7 ≈ #b3b3b3 on dark bg ≥ 4.5:1 */
.twa-trial-form .wpcf7 label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: var(--font-sans) !important;
}

/* Submit */
.twa-trial-form .wpcf7 input[type="submit"] {
    background: #fff !important;
    color: #000 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 1.125rem 2rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-sans) !important;
    width: 100%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    margin-top: 0.5rem;
}

.twa-trial-form .wpcf7 input[type="submit"]:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.4);
}

/* Fieldset / checkbox area */
.twa-trial-form .checkbox-terminos fieldset {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 0;
}
.twa-trial-form .checkbox-terminos legend {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 0.5rem;
}

.twa-trial-form .wpcf7 label:has(.wpcf7-acceptance) {
    display: flex !important;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0.75rem 0 0.25rem;
}

/* Checkbox */
.twa-trial-form .wpcf7-acceptance input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer;
    margin-top: 0.1rem;
    transition: all 0.2s;
    position: relative;
}

.twa-trial-form .wpcf7-acceptance input[type="checkbox"]:hover {
    border-color: var(--color-primary) !important;
}

.twa-trial-form .wpcf7-acceptance input[type="checkbox"]:focus {
    outline: 2px solid var(--color-primary, #7c3aed);
    outline-offset: 2px;
    box-shadow: none;
}

.twa-trial-form .wpcf7-acceptance input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none;
}

.twa-trial-form .wpcf7-acceptance input[type="checkbox"]:checked {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.twa-trial-form .wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Acceptance text — WCAG AA contrast */
.twa-trial-form .wpcf7-acceptance .wpcf7-list-item-label,
.twa-trial-form .checkbox-terminos .acepto {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.5;
}
.twa-trial-form .checkbox-terminos .acepto a {
    color: var(--color-primary-300, #c4b5fd) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.twa-trial-form .checkbox-terminos .acepto a:hover {
    color: #fff !important;
}
.twa-trial-form .checkbox-terminos p:first-of-type {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.twa-trial-form .wpcf7-response-output {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    font-style: italic;
}

/* Validation errors */
.twa-trial-form .wpcf7-not-valid-tip {
    color: #fca5a5 !important;
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

/* Section title utilities */
.twa-text-serif-accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--color-primary);
}

.twa-text-serif-gray {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--color-gray-500);
}

/* Clients tabs */
.twa-clients-tabpanel {
    display: none;
}

.twa-clients-tabpanel.active {
    display: block;
}

.twa-clients-tablist {
    display: inline-flex;
    position: relative;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 5px;
    gap: 4px;
}

.twa-clients-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    background: #000;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.twa-clients-tab {
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border: none;
    cursor: pointer;
    border-radius: 9px;
    transition: color 0.25s ease;
    background: transparent;
    color: #6b7280;
    position: relative;
    z-index: 1;
}

.twa-clients-tab:hover:not(.active) {
    color: #111827;
}

.twa-clients-tab:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.twa-clients-tab.active {
    color: #fff;
}

@media (max-width: 640px) {
    .twa-clients-tablist {
        border-radius: 10px;
    }
    .twa-clients-tab {
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 7px;
    }
    .twa-clients-slider {
        border-radius: 7px;
    }

    .twa-contact-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

/* ==========================================================================
   Uncode Theme Override Fixes
   Fixes for Uncode's default CSS interfering with twa-* components
   ========================================================================== */

/* Hero title: ensure white text is visible on dark bg */
.twa-hero-title {
    color: #fff !important;
}

/* Outline button: Uncode overrides link colors */
.twa-btn.twa-btn-outline {
    color: #fff !important;
}

.twa-btn.twa-btn-outline:hover {
    color: #fff !important;
}

/* All headings inside twa-vc-full: reset Uncode's heading margins and colors */
.twa-vc-full h1,
.twa-vc-full h2,
.twa-vc-full h3 {
    margin-top: 0;
    margin-bottom: 0;
}

/* vc_raw_html wrapper: remove any default margins from Uncode */
.twa-vc-full .wpb_raw_code {
    margin-bottom: 0 !important;
}

.twa-vc-full .wpb_raw_code .wpb_wrapper {
    margin: 0 !important;
}

/* Ensure dark section text colors are not overridden by Uncode */
.twa-hero h1,
.twa-hero h2,
.twa-hero h3,
.twa-hero p,
.twa-hero div {
    color: inherit;
}

/* Badge number + accent: preserve their explicit colors */
.twa-hero .twa-badge-number {
    color: var(--color-primary-400) !important;
}

.twa-hero .twa-hero-title .accent {
    color: var(--color-primary) !important;
}

/* Solution card icon: ensure proper background */
.twa-solution-card .twa-card-icon {
    background: var(--color-primary-lighter, #f5f3ff);
}

/* Sector cards: ensure flex layout works, override any Uncode link styles */
a.twa-sector-card {
    display: flex !important;
    align-items: center !important;
    color: white !important;
}

a.twa-sector-card h3 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Service cards: override Uncode link color inheritance */
a.twa-svc-card {
    color: inherit !important;
}

a.twa-svc-card-white {
    color: #000 !important;
}

a.twa-svc-card-dark {
    color: #fff !important;
}

/* Solution cards: ensure hover colors work */
a.twa-solution-card {
    color: inherit !important;
}

a.twa-solution-card h3 {
    margin-top: 0 !important;
}

/* Timeline cards: heading reset */
.twa-h-timeline-card h3,
.twa-v-timeline h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Metrics: ensure white text on dark bg */
.twa-metric-value {
    color: #fff !important;
}

/* WCAG banner: ensure heading colors */
.twa-wcag-banner h2,
.twa-wcag-banner h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Contact section headings */
#contacto h2,
[el_id="contacto"] h2 {
    margin-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   CUSTOM NAVBAR — Replicates React prototype Navbar.tsx
   ═══════════════════════════════════════════════════════════════ */

/* ── UNCODE default header ──
   Removed from DOM via child theme header.php override.
   No CSS hiding needed — <header id="masthead"> is no longer rendered. ── */

/* Hide Max Mega Menu's mobile toggle if the plugin leaks markup */
.mega-menu-toggle {
    display: none !important;
}

/* ── Header (fixed, full-width) ── */
.twa-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: all 300ms ease;
}

/* ── Header Bar ── */
.twa-header-bar {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    /* gray-100 */
    padding: 0.75rem 0;
    /* py-3 = 12px — compact by default */
    transition: all 300ms ease;
}

@media (min-width: 1024px) {
    .twa-header-bar {
        padding: 1.25rem 0;
        /* py-5 = 20px — more spacious on desktop */
    }
}

.twa-header-bar.scrolled {
    padding: 0.5rem 0;
    /* py-2 = 8px — minimal on scroll */
    border-bottom-color: #e5e7eb;
    /* gray-200 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 1024px) {
    .twa-header-bar.scrolled {
        padding: 0.75rem 0;
        /* py-3 = 12px on desktop scroll */
    }
}

/* ── Header Inner (max-width container) ── */
.twa-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

@media (min-width: 640px) {
    .twa-header-inner {
        padding: 0 2rem;
    }
}

/* ── Logo ── */
.twa-logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 50;
    text-decoration: none !important;
    border-bottom: none !important;
}

.twa-logo-img {
    height: 1.75rem;
    /* h-7 */
    width: auto;
    transition: transform 300ms ease;
}

.twa-logo-link:hover .twa-logo-img {
    transform: scale(1.05);
}

/* ── Desktop Navigation ── */
.twa-nav-desktop {
    display: none;
    align-items: center;
    gap: 0.25rem;
    height: 100%;
}

@media (min-width: 1024px) {
    .twa-nav-desktop {
        display: flex;
    }
}

/* Nav item wrapper */
.twa-nav-item {
    height: 100%;
}

/* Nav button (mega menu trigger) */
.twa-nav-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    /* text-xs = 12px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* tracking-widest */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #000;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}

.twa-nav-btn:hover,
.twa-nav-btn.active {
    color: var(--primary, #7c3aed);
    background: #f9fafb;
    /* gray-50 */
}

/* Chevron rotation */
.twa-nav-chevron {
    display: inline-flex;
    transition: transform 300ms ease;
}

.twa-nav-btn.active .twa-nav-chevron {
    transform: rotate(180deg);
}

/* ── Header Right Side ── */
.twa-header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Divider between lang and toggle */
.twa-header-divider {
    height: 1rem;
    width: 1px;
    background: #e5e7eb;
    display: none;
}

@media (min-width: 1024px) {
    .twa-header-divider {
        display: block;
    }
}

/* ── Language Selector — Desktop ── */
.twa-lang-desktop {
    display: none;
    position: relative;
}

@media (min-width: 1024px) {
    .twa-lang-desktop {
        display: block;
    }
}

.twa-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    /* gray-500 */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 200ms ease;
    font-family: inherit;
}

.twa-lang-btn:hover {
    color: #000;
}

/* Lang dropdown panel */
.twa-lang-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10000;
    margin-top: 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 180px;
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition: all 200ms ease;
}

.twa-lang-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Lang option */
.twa-lang-option {
    display: flex;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    align-items: center;
    justify-content: space-between;
    transition: background-color 200ms ease;
    color: #374151;
    /* gray-700 */
    text-decoration: none !important;
    border-bottom: none !important;
}

.twa-lang-option:hover {
    background: #f9fafb;
    color: #374151;
}

.twa-lang-option.active {
    background: #f9fafb;
    color: var(--primary, #7c3aed);
    font-weight: 700;
}

.twa-lang-check {
    color: var(--primary, #7c3aed);
    display: inline-flex;
}

/* ── Mobile Toggle Button ── */
.twa-mobile-toggle {
    display: flex;
    color: #000;
    padding: 0.5rem;
    border: none;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 200ms ease;
    z-index: 50;
    font-family: inherit;
}

.twa-mobile-toggle:hover {
    background: #f3f4f6;
}

@media (min-width: 1024px) {
    .twa-mobile-toggle {
        display: none;
    }
}

/* Toggle icon switching */
.twa-mobile-toggle .twa-mobile-toggle-close {
    display: none;
}

.twa-mobile-toggle.is-open .twa-mobile-toggle-open {
    display: none;
}

.twa-mobile-toggle.is-open .twa-mobile-toggle-close {
    display: flex;
}

/* ── Reading Progress Bar ── */
.twa-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--primary, #7c3aed);
    width: 0%;
    transition: width 100ms ease-out;
    z-index: 50;
}

/* ── Desktop Mega Menu Dropdown Panel ── */
.twa-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

.twa-mega-panel.open {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Mega inner container */
.twa-mega-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem;
}

/* Mega section (12-col grid) */
.twa-mega-section {
    display: none;
    /* hidden by default, shown via JS */
    grid-template-columns: 3fr 6fr 3fr;
    gap: 3rem;
}

/* Fade-in animation */
.twa-fade-in {
    animation: twaFadeInUp 300ms ease forwards;
}

@keyframes twaFadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Mega Intro Column ── */
.twa-mega-intro {
    border-right: 1px solid #f3f4f6;
    padding-right: 2rem;
}

.twa-mega-icon {
    width: 3rem;
    height: 3rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #7c3aed);
    margin-bottom: 1rem;
}

.twa-mega-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    color: #000 !important;
    line-height: 1.3 !important;
}

.twa-mega-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.625;
    margin: 0;
}

/* ── Mega Link Columns ── */
.twa-mega-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.twa-mega-col-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280 !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0 !important;
}

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

.twa-mega-link-item {
    margin: 0;
    padding: 0;
}

.twa-mega-link {
    display: block;
    text-decoration: none !important;
    border-bottom: none !important;
}

.twa-mega-link-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: #000;
    transition: color 200ms ease;
}

.twa-mega-link:hover .twa-mega-link-label {
    color: var(--primary, #7c3aed);
}

.twa-mega-link-arrow {
    display: inline-flex;
    opacity: 0;
    transform: translateX(-0.5rem);
    transition: all 200ms ease;
}

.twa-mega-link:hover .twa-mega-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

.twa-mega-link-desc {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    transition: color 200ms ease;
}

.twa-mega-link:hover .twa-mega-link-desc {
    color: #374151;
}

/* ── Mega Featured Column ── */
.twa-mega-featured {
    height: 100%;
    padding: 2rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: all 500ms ease;
    border: 1px solid #f3f4f6;
    background: #f9fafb;
    color: #000;
}

.twa-mega-featured:hover {
    border-color: #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.twa-mega-featured.highlight {
    background: #000;
    color: #fff;
    border-color: #000;
}

.twa-mega-featured.highlight:hover {
    border-color: #000;
}

/* Glow effects for highlighted */
.twa-mega-featured-glow-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    background: rgba(124, 58, 237, 0.2);
    filter: blur(60px);
    border-radius: 9999px;
    pointer-events: none;
    margin-right: -4rem;
    margin-top: -4rem;
}

.twa-mega-featured-glow-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(40px);
    border-radius: 9999px;
    pointer-events: none;
    margin-left: -2.5rem;
    margin-bottom: -2.5rem;
}

/* Featured badge */
.twa-mega-featured-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.05);
    color: #6b7280;
}

.twa-mega-featured-badge.highlight {
    background: var(--color-primary-lighter);
    color: var(--primary, #7c3aed);
    backdrop-filter: blur(4px);
}

.twa-mega-featured-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--color-success-bright);
    animation: twaPulse 2s infinite;
}

.twa-mega-featured-dot.highlight {
    background: var(--color-success-bright);
    animation: twaPulse 2s infinite;
}

@keyframes twaPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.twa-mega-featured-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    margin-top: 0 !important;
    line-height: 1.25 !important;
    transition: transform 300ms ease;
    color: inherit !important;
}

.twa-mega-featured:hover .twa-mega-featured-title {
    transform: none;
}

.twa-mega-featured-desc {
    font-size: 0.875rem;
    line-height: 1.625;
    margin: 0;
}

.twa-mega-featured:not(.highlight) .twa-mega-featured-desc {
    color: #4b5563;
}

.twa-mega-featured.highlight .twa-mega-featured-desc {
    color: #d1d5db;
}

/* Featured action button */
.twa-mega-featured-action {
    padding-top: 2rem;
    margin-top: auto;
}

.twa-mega-featured-btn {
    display: flex;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    transition: all 300ms ease;
    text-decoration: none !important;
    border-bottom: none !important;
    background: #000;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.twa-mega-featured-btn:hover {
    background: var(--primary, #7c3aed);
    color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.twa-mega-featured-btn.highlight {
    background: #fff;
    color: #000;
    box-shadow: none;
}

.twa-mega-featured-btn.highlight:hover {
    background: var(--primary, #7c3aed);
    color: #fff;
    transform: none;
}

.twa-mega-featured-btn-arrow {
    display: inline-flex;
    transition: transform 300ms ease;
}

.twa-mega-featured:hover .twa-mega-featured-btn-arrow {
    transform: translateX(0.25rem);
}

/* ═══════════════════════════════════════════════════
   MOBILE MENU — slide-over
   ═══════════════════════════════════════════════════ */
.twa-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    /* below header */
    background: #fff;
    transform: translateX(100%);
    transition: transform 300ms ease, visibility 0s 300ms;
    overflow-y: auto;
    pointer-events: none;
    visibility: hidden;
}

.twa-mobile-menu.open {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 300ms ease, visibility 0s 0s;
}

@media (min-width: 1024px) {
    .twa-mobile-menu {
        display: none !important;
    }
}

.twa-mobile-menu-content {
    padding: 6rem 1.5rem 3rem;
}

/* Mobile menu items */
.twa-mobile-menu-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.twa-mobile-item {
    border-bottom: 1px solid #f3f4f6;
}

.twa-mobile-item:last-child {
    border-bottom: none;
}

.twa-mobile-item-btn {
    width: 100%;
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.twa-mobile-item-label {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #000;
    transition: color 200ms ease;
}

.twa-mobile-item-btn.expanded .twa-mobile-item-label {
    color: var(--primary, #7c3aed);
}

.twa-mobile-item-chevron {
    display: inline-flex;
    transition: transform 300ms ease;
    color: #d1d5db;
    margin-right: 15px;
}

.twa-mobile-item-btn.expanded .twa-mobile-item-chevron {
    transform: rotate(180deg);
    color: var(--primary, #7c3aed);
}

/* Mobile submenu (accordion) */
.twa-mobile-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms ease-in-out, opacity 300ms ease-in-out, padding-bottom 300ms ease-in-out;
}

.twa-mobile-submenu.open {
    max-height: 1000px;
    opacity: 1;
    padding-bottom: 1.5rem;
}

.twa-mobile-submenu-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-left: 1rem;
    border-left: 2px solid #f3f4f6;
    margin-left: 0.5rem;
}

.twa-mobile-col-title {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af !important;
    margin-bottom: 0.75rem !important;
    margin-top: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.twa-mobile-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.twa-mobile-col-list li {
    margin: 0;
    padding: 0;
}

.twa-mobile-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f2937 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: color 200ms ease;
}

.twa-mobile-link:hover {
    color: var(--primary, #7c3aed) !important;
}

/* Mobile featured card */
.twa-mobile-featured-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 1.25rem;
    border-radius: 0.75rem;
    margin-top: 1.25rem;
    border: 1px solid rgba(124, 58, 237, 0.3);
    text-decoration: none !important;
    display: block;
}

.twa-mobile-featured-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-primary-400, #a78bfa);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.375rem;
    display: block;
}

.twa-mobile-featured-title {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    color: #fff;
}

.twa-mobile-featured-card p,
.twa-mobile-featured-card .twa-mobile-featured-desc {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0.25rem 0 0;
    line-height: 1.4;
}

/* ── Mobile Footer ── */
.twa-mobile-footer {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile language button */
.twa-mobile-lang-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.twa-mobile-lang-btn-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.twa-mobile-lang-chevron {
    display: inline-flex;
    transition: transform 200ms ease;
}

.twa-mobile-lang-btn[aria-expanded="true"] .twa-mobile-lang-chevron {
    transform: rotate(180deg);
}

/* Mobile language dropdown */
.twa-mobile-lang-dropdown {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    display: none;
}

.twa-mobile-lang-dropdown.open {
    display: block;
}

.twa-mobile-lang-option {
    display: flex;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    align-items: center;
    justify-content: space-between;
    color: #374151;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background-color 200ms ease;
}

.twa-mobile-lang-option:hover {
    background: #f9fafb;
    color: #374151;
}

.twa-mobile-lang-option.active {
    background: #f9fafb;
    color: var(--primary, #7c3aed);
    font-weight: 700;
}

/* Mobile CTA */
.twa-mobile-cta {
    display: block;
    text-align: center;
    width: 100%;
    background: #000;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: background-color 200ms ease;
}

.twa-mobile-cta:hover {
    background: var(--primary, #7c3aed);
    color: #fff !important;
}

/* ── Body offset for fixed header ── */
.main-container {
    padding-top: var(--twa-header-height, 70px);
}


/* ==========================================================================
   SERVICE & SOLUTION PAGES — Block CSS for WPBakery
   ==========================================================================
   These classes are applied via WPBakery's "Extra class name" field on
   vc_section / vc_row / vc_column / inner elements. Content is rendered
   through native WPBakery elements (Text Block, Headings, etc.) for SEO.
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   0. WPBakery / UNCODE Reset for TWA blocks
   ──────────────────────────────────────────────────────────────────────────
   UNCODE DOM structure (different from standard WPBakery):
     vc_section → <section class="vc_section [el_class] row-container">
                    <div class="row full-width row-parent">          ← outer (section wrapper)
     vc_row    →      <div class="vc_row [el_class] row-container">
                        <div class="row limit-width row-parent">     ← inner (content container)
                          <div class="wpb_row row-inner">            ← flex/grid container
     vc_column →            <div class="wpb_column col-lg-X [el_class] column_parent">
                              <div class="uncol"><div class="uncoltable">
                                <div class="uncell"><div class="uncont"> content </div></div>
                              </div></div>
   ────────────────────────────────────────────────────────────────────────── */

/* --- Sticky heading: handled by JS (transform-based) ---
   UNCODE uses display:table/table-row for the page layout.
   position:sticky does NOT work in this context.
   Instead of overriding page layout (which breaks footer),
   we use JS transform:translateY() to simulate sticky. */

/* --- Section-level: full-width background wrapper --- */
.twa-block-full.vc_section,
.twa-block-full.row-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Outer row-parent (from vc_section): full-width pass-through ---
   DOM: section > div.row.full-width.row-parent > div.vc_row.row-container > div.row.limit-width.row-parent > div.row-inner */
.twa-block-full>.row-parent {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The vc_row.row-container wrapper also needs to pass through */
.twa-block-full .vc_row.row-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Inner row-parent (with .limit-width from vc_row): FULL pass-through ---
   Our blocks handle their own max-width via Tailwind (max-w-[1400px] mx-auto)
   so the UNCODE container must NOT constrain the width */
.twa-block .row-parent.limit-width {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* --- Row-inner → uncont: FULL-WIDTH pass-through chain ---
   Every UNCODE wrapper must be 100% width so our Tailwind blocks
   can control their own layout via max-w-[1400px] mx-auto */
.twa-block .row-inner {
    display: block !important;
    /* NOT flex — single column, no wrapping needed */
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.twa-block .wpb_column {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.twa-block .uncol,
.twa-block .uncoltable {
    display: block !important;
    table-layout: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.twa-block .uncell {
    display: block !important;
    width: 100% !important;
    vertical-align: top;
}

/* All UNCODE wrappers need overflow:visible for position:sticky to work */
.twa-block .uncont,
.twa-block .uncell,
.twa-block .uncoltable,
.twa-block .uncol,
.twa-block .row-inner,
.twa-block .wpb_column,
.twa-block .row-parent,
.twa-block .vc_row.row-container,
.twa-block-full.vc_section {
    overflow: visible !important;
}

.twa-block .uncont {
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove margin/padding between consecutive twa-block sections */
.twa-block-full.vc_section+.twa-block-full.vc_section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Override UNCODE internal gutter (36px margin-top on all content) */
.twa-block .single-internal-gutter .uncont>* {
    margin-top: 0 !important;
}

/* Text element resets */
.twa-block .wpb_text_column,
.twa-block .vc_custom_heading,
.twa-block .vc_custom_heading_wrap,
.twa-block .uncode_text_column {
    margin-bottom: 0 !important;
}

.twa-block .uncont>*:last-child {
    margin-bottom: 0;
}

/* ── UNCODE typography reset ──
   UNCODE sets h1-h6 { margin: 27px 0 0 } and p,li { margin: 18px 0 0 0 }.
   Also sets h3 ~22px, p ~16px etc.
   Reset margin-top WITHOUT !important so Tailwind mb-8, mb-3 etc. still work.
   Reset font-size to Tailwind base so explicit text-* classes control sizing. */
.twa-block h1,
.twa-block h2,
.twa-block h3,
.twa-block h4,
.twa-block h5,
.twa-block h6,
.twa-block p,
.twa-block li {
    margin-top: 0;
}

/* Font-size reset: let Tailwind text-* classes control sizes, not UNCODE defaults */
.twa-block h3 {
    font-size: 1rem;
}

.twa-block h4 {
    font-size: 1rem;
}

.twa-block p {
    font-size: 1rem;
}

.twa-block ul,
.twa-block ol {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

/* Remove any UNCODE divider lines or extra spacing */
.twa-block .vc_row,
.twa-block .vc_row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Column widths — UNCODE uses col-lg-* (not vc_col-sm-*) */
@media (min-width: 960px) {
    .twa-block .col-lg-12 {
        width: 100% !important;
    }

    .twa-block .col-lg-9 {
        width: 75% !important;
    }

    .twa-block .col-lg-8 {
        width: 66.666% !important;
    }

    .twa-block .col-lg-7 {
        width: 58.333% !important;
    }

    .twa-block .col-lg-6 {
        width: 50% !important;
    }

    .twa-block .col-lg-5 {
        width: 41.666% !important;
    }

    .twa-block .col-lg-4 {
        width: 33.333% !important;
    }

    .twa-block .col-lg-3 {
        width: 25% !important;
    }
}

/* Grid-based blocks: let grid-template-columns control column sizing */
.twa-svc-hero .wpb_column,
.twa-norm-hero .wpb_column,
.twa-sol-hero .wpb_column,
.twa-rec-hero .wpb_column,
.twa-process .wpb_column,
.twa-sectors-dark .wpb_column {
    width: auto !important;
}

/* Sector icon hover: solid purple bg + white icon */
.group:hover .twa-sector-icon {
    background: #7c3aed !important;
    color: #fff !important;
}

/* Mobile: all full-width */
@media (max-width: 959px) {
    .twa-block .wpb_column {
        width: 100% !important;
    }
}

/* Mobile: disable sticky on process/benefits heading */
@media (max-width: 1023px) {
    .twa-block [data-sticky-heading] {
        position: static !important;
        transform: none !important;
        will-change: auto !important;
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   0B. Common text utilities for WPBakery text blocks
   ────────────────────────────────────────────────────────────────────────── */
/* Serif italic accent (apply on <span> inside heading) */
.twa-accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--color-primary);
}

/* Label / eyebrow text above headings */
.twa-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.twa-label-light {
    color: var(--color-primary-400);
}

/* Section heading — large, tight tracking */
.twa-heading-xl {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.twa-heading-lg {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.twa-heading-md {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* Body text variants */
.twa-text-lead {
    font-size: 1.25rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}

.twa-text-lead-light {
    font-size: 1.25rem;
    color: var(--color-gray-300);
    line-height: 1.7;
}

.twa-text-subtle {
    font-size: 1.125rem;
    color: var(--color-gray-500);
    line-height: 1.7;
}

.twa-text-white-muted {
    color: var(--color-gray-400);
    line-height: 1.7;
}

/* Monospace number prefix */
.twa-mono-index {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.twa-mono-index-dark {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-gray-500);
    letter-spacing: 0.1em;
}



/* ──────────────────────────────────────────────────────────────────────────
   22. TWA BLOCKS — Tailwind Integration Helpers
   Only minimal overrides needed since blocks now use Tailwind CDN classes.
   UNCODE reset (Section 0 above) handles the WPBakery DOM neutralization.
   ────────────────────────────────────────────────────────────────────────── */

/* Ensure Tailwind classes work inside UNCODE's box model */
.twa-block *,
.twa-block *::before,
.twa-block *::after {
    box-sizing: border-box;
}

/* Force UNCODE section backgrounds to transparent for twa-blocks
   (the block's own <section>/<header> handles its own background) */
.twa-block.vc_section {
    background: transparent !important;
}

.twa-block .row-parent,
.twa-block .vc_row.row-container,
.twa-block .row-inner,
.twa-block .wpb_column,
.twa-block .uncol,
.twa-block .uncoltable,
.twa-block .uncell,
.twa-block .uncont {
    background: transparent !important;
}

/* line-clamp utility (not in Tailwind base without plugin) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tailwind typography overrides — beat UNCODE heading selectors ────────
   UNCODE sets font-size on h1-h6 via high-specificity selectors like
   .post-body h2, .sections-container h3 etc. These override Tailwind's
   class-based text-* utilities. Fix by scoping to .twa-block with !important.
   ────────────────────────────────────────────────────────────────────────── */
/* font-size uses !important to beat UNCODE; line-height does NOT so
   explicit leading-* classes (leading-none, leading-[0.9]) can override */
.twa-block .text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem;
}

.twa-block .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem;
}

.twa-block .text-base {
    font-size: 1rem !important;
    line-height: 1.5rem;
}

.twa-block .text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem;
}

.twa-block .text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem;
}

.twa-block .text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem;
}

.twa-block .text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem;
}

.twa-block .text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem;
}

.twa-block .text-5xl {
    font-size: 3rem !important;
    line-height: 1;
}

.twa-block .text-6xl {
    font-size: 3.75rem !important;
    line-height: 1;
}

/* Font weight overrides */
.twa-block .font-light {
    font-weight: 300 !important;
}

.twa-block .font-normal {
    font-weight: 400 !important;
}

.twa-block .font-medium {
    font-weight: 500 !important;
}

.twa-block .font-semibold {
    font-weight: 600 !important;
}

.twa-block .font-bold {
    font-weight: 700 !important;
}

.twa-block .font-black {
    font-weight: 900 !important;
}

/* Tracking (letter-spacing) */
.twa-block .tracking-tighter {
    letter-spacing: -0.02em !important;
}

.twa-block .tracking-tight {
    letter-spacing: -0.01em !important;
}

.twa-block .tracking-widest {
    letter-spacing: 0.1em !important;
}

/* Leading (line-height) — override when explicitly set */
.twa-block .leading-none {
    line-height: 1 !important;
}

.twa-block .leading-tight {
    line-height: 1.25 !important;
}

.twa-block .leading-relaxed {
    line-height: 1.625 !important;
}

/* ── Tailwind color utilities — beat UNCODE .style-light h1 { color: #212121 } ──
   UNCODE applies .style-light to every WPBakery column, which sets heading
   colors to #212121. Tailwind .text-white etc. lose because class < class+element.
   Fix: scope to .twa-block + use !important to override the skin color. */
.twa-block .text-white {
    color: #fff !important;
}

.twa-block .text-black {
    color: #000 !important;
}

.twa-block .text-gray-50 {
    color: #f9fafb !important;
}

.twa-block .text-gray-100 {
    color: #f5f5f5 !important;
}

.twa-block .text-gray-200 {
    color: #e5e7eb !important;
}

.twa-block .text-gray-300 {
    color: #d1d5db !important;
}

.twa-block .text-gray-400 {
    color: #9ca3af !important;
}

.twa-block .text-gray-500 {
    color: #6b7280 !important;
}

.twa-block .text-gray-600 {
    color: #4b5563 !important;
}

.twa-block .text-gray-700 {
    color: #374151 !important;
}

.twa-block .text-gray-800 {
    color: #1f2937 !important;
}

.twa-block .text-gray-900 {
    color: #111827 !important;
}

/* Purple palette */
.twa-block .text-purple-400 {
    color: #a78bfa !important;
}

.twa-block .text-purple-500 {
    color: #8b5cf6 !important;
}

.twa-block .text-purple-600 {
    color: #7c3aed !important;
}

/* Opacity variants (used in hero descriptions) */
.style-light .twa-block [class*="text-white"] {
    color: #fff !important;
}

.style-light .twa-block [class*="text-gray-"] {
    color: inherit;
}

/* ── Tailwind display utilities — override UNCODE conflicts ──────────────
   UNCODE's .hidden sets BOTH display:none AND visibility:hidden with !important.
   We must undo BOTH when toggling visibility at responsive breakpoints.
   ────────────────────────────────────────────────────────────────────────── */

/* Base display utilities */
.twa-block .hidden {
    display: none !important;
    visibility: hidden !important;
}

.twa-block .grid {
    display: grid !important;
}

/* Grid columns — base (Tailwind CDN handles these but ensure !important override) */
.twa-block .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.twa-block .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.twa-block .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Gap overrides */
.twa-block .gap-4 {
    gap: 1rem !important;
}

.twa-block .gap-6 {
    gap: 1.5rem !important;
}

.twa-block .gap-8 {
    gap: 2rem !important;
}

.twa-block .gap-12 {
    gap: 3rem !important;
}

.twa-block .gap-16 {
    gap: 4rem !important;
}

.twa-block .gap-24 {
    gap: 6rem !important;
}

/* Directional gap overrides (gap-x / gap-y) */
.twa-block .gap-x-4 {
    column-gap: 1rem !important;
}

.twa-block .gap-x-6 {
    column-gap: 1.5rem !important;
}

.twa-block .gap-x-8 {
    column-gap: 2rem !important;
}

.twa-block .gap-x-12 {
    column-gap: 3rem !important;
}

.twa-block .gap-y-4 {
    row-gap: 1rem !important;
}

.twa-block .gap-y-6 {
    row-gap: 1.5rem !important;
}

.twa-block .gap-y-8 {
    row-gap: 2rem !important;
}

.twa-block .gap-y-14 {
    row-gap: 3.5rem !important;
}

/* Space-y overrides */
.twa-block .space-y-0>*+* {
    margin-top: 0 !important;
}

.twa-block .space-y-3>*+* {
    margin-top: 0.75rem !important;
}

.twa-block .space-y-4>*+* {
    margin-top: 1rem !important;
}

/* Border overrides */
.twa-block .border-2 {
    border-width: 2px !important;
    border-style: solid !important;
}

.twa-block .border-t-2 {
    border-top-width: 2px !important;
    border-top-style: solid !important;
}

.twa-block .border-t {
    border-top-width: 1px !important;
    border-top-style: solid !important;
}

.twa-block .border-b {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

.twa-block .rounded-2xl {
    border-radius: 1rem !important;
}

.twa-block .rounded-3xl {
    border-radius: 1.5rem !important;
}

.twa-block .rounded-full {
    border-radius: 9999px !important;
}

.twa-block .flex {
    display: flex !important;
}

.twa-block .block {
    display: block !important;
}

.twa-block .inline-flex {
    display: inline-flex !important;
}

.twa-block .items-center {
    align-items: center !important;
}

.twa-block .items-start {
    align-items: flex-start !important;
}

.twa-block .justify-between {
    justify-content: space-between !important;
}

/* ── sm (640px) breakpoint ── */
@media (min-width: 640px) {
    .twa-block .sm\:block {
        display: block !important;
        visibility: visible !important;
    }

    .twa-block .sm\:flex {
        display: flex !important;
        visibility: visible !important;
    }

    .twa-block .sm\:flex-row {
        flex-direction: row !important;
    }

    .twa-block .sm\:px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ── md (768px) breakpoint ── */
@media (min-width: 768px) {
    .twa-block .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .twa-block .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .twa-block .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .twa-block .md\:flex-row {
        flex-direction: row !important;
    }

    .twa-block .md\:text-5xl {
        font-size: 3rem !important;
        line-height: 1;
    }

    .twa-block .md\:text-6xl {
        font-size: 3.75rem !important;
        line-height: 1;
    }

    .twa-block .md\:text-7xl {
        font-size: 4.5rem !important;
        line-height: 1;
    }

    .twa-block .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .twa-block .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ── lg (1024px) breakpoint ── */
@media (min-width: 1024px) {

    /* KEY FIX: undo BOTH display:none AND visibility:hidden from .hidden */
    .twa-block .lg\:block {
        display: block !important;
        visibility: visible !important;
    }

    .twa-block .lg\:flex {
        display: flex !important;
        visibility: visible !important;
    }

    .twa-block .lg\:grid {
        display: grid !important;
        visibility: visible !important;
    }

    .twa-block .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .twa-block .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .twa-block .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .twa-block .lg\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }

    .twa-block .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .twa-block .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .twa-block .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }

    .twa-block .lg\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }

    .twa-block .lg\:col-span-6 {
        grid-column: span 6 / span 6 !important;
    }

    .twa-block .lg\:gap-8 {
        gap: 2rem !important;
    }

    .twa-block .lg\:flex-row {
        flex-direction: row !important;
    }

    .twa-block .lg\:w-1\/4 {
        width: 25% !important;
    }

    .twa-block .lg\:w-3\/4 {
        width: 75% !important;
    }

    .twa-block .lg\:w-1\/2 {
        width: 50% !important;
    }

    .twa-block .lg\:sticky {
        position: sticky !important;
    }

    .twa-block .lg\:top-24 {
        top: 6rem !important;
    }

    .twa-block .lg\:top-32 {
        top: 8rem !important;
    }

    .twa-block .lg\:self-start {
        align-self: start !important;
    }

    .twa-block .lg\:text-left {
        text-align: left !important;
    }

    .twa-block .lg\:items-center {
        align-items: center !important;
    }
}

/* ── xl (1280px) breakpoint ── */
@media (min-width: 1280px) {
    .twa-block .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .twa-block .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* Prose overrides — paragraph spacing inside descriptive text blocks */
.twa-block .prose p {
    margin-bottom: 1em;
    line-height: 1.75;
}

.twa-block .prose ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.twa-block .prose ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.twa-block .prose strong {
    font-weight: 700;
}

.twa-block .prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--twa-gray-300, #d1d5db);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.twa-block .prose a:hover {
    text-decoration-color: currentColor;
}

/* Hero CTA button — use dedicated class instead of fighting Tailwind vs UNCODE */
.twa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    border-radius: 0.45rem;
    text-decoration: none !important;
    transition: all 0.3s;
    font-family: var(--font-sans);
}

.twa-cta-white {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.twa-cta-white:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: none;
}

.twa-cta-dark {
    background: #000 !important;
    color: #fff !important;
    box-shadow: var(--shadow-xl);
}

.twa-cta-dark:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.twa-cta-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.twa-cta-primary:hover {
    background: #fff !important;
    color: #000 !important;
}

.twa-cta-outline {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.twa-cta-outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Section 23: Solution Page Layout Fixes (UNCODE overrides)
   ═══════════════════════════════════════════════════════════════ */

/* Hero 2-column grid */
@media (min-width: 1024px) {
    [data-twa-hero-grid] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Solution blocks — force grid/flex despite UNCODE overrides */
.twa-sol-sector .lg\:flex,
.twa-sol-whyus .lg\:flex,
.twa-sol-trial .lg\:flex {
    flex-wrap: nowrap;
}

/* Responsive: stack on mobile */
@media (max-width: 639px) {
    .twa-sol-sector [style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    .twa-sol-whyus [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .twa-sol-whyus [style*="grid-column:span 6"],
    .twa-sol-whyus [style*="grid-column:span 3"] {
        grid-column: span 1 !important;
    }

    .twa-sol-features [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .twa-sol-pricing [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    .twa-sol-whyus [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 1023px) {
    .twa-sol-sector [style*="display:flex"] {
        flex-direction: column !important;
    }

    .twa-sol-sector [style*="width:41"] {
        width: 100% !important;
    }

    .twa-sol-pricing [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    [data-twa-hero-grid] {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Section: TWA Blog Templates — UNCODE Reset + Article Typography
   ═══════════════════════════════════════════════════════════════════ */

/* Full-width pass-through for blog page wrappers */
.twa-blog-page,
.twa-blog-article {
    width: 100% !important;
    max-width: 100% !important;
}

/* UNCODE sets display:table on .sections-container and display:table-row
   on .page-wrapper. This creates anonymous table-cell wrappers around our
   content that break CSS Grid layout. Override to block ONLY on blog pages.
   The footer is OUTSIDE these containers (it's a sibling of .page-wrapper
   inside .main-container) so this is safe. */
body.single-post .sections-container,
body.blog .sections-container {
    display: block !important;
    table-layout: auto !important;
}

body.single-post .page-wrapper,
body.blog .page-wrapper {
    display: block !important;
}

/* Blog grid responsive */
@media (max-width: 767px) {
    .twa-blog-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .twa-blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Article content typography */
.twa-article-content {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    line-height: 1.75;
    color: #4b5563;
}

/* Remove UNCODE wrapper padding/margins inside article content */
.twa-article-content .wpb-content-wrapper,
.twa-article-content .vc_row,
.twa-article-content .row-container,
.twa-article-content .row.limit-width,
.twa-article-content .row-parent,
.twa-article-content .wpb_row,
.twa-article-content .uncol,
.twa-article-content .uncoltable,
.twa-article-content .uncell,
.twa-article-content .uncont {
    padding: 0 !important;
    margin: 0 !important;
}

.twa-article-content .single-internal-gutter>.uncol>.uncoltable>.uncell>.uncont>*:first-child {
    margin-top: 0 !important;
}

.twa-article-content h2 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #111;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    scroll-margin-top: 7rem;
}

.twa-article-content h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #111;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    scroll-margin-top: 7rem;
}

.twa-article-content p {
    margin-bottom: 1.25rem;
}

.twa-article-content strong {
    color: #111;
    font-weight: 700;
}

.twa-article-content a {
    color: #7c3aed;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.twa-article-content a:hover {
    color: #7c3aed;
}

.twa-article-content ul,
.twa-article-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.twa-article-content li {
    margin-bottom: 0.5rem;
    color: #4b5563;
}

.twa-article-content blockquote {
    border-left: 4px solid #7c3aed;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #374151;
}

.twa-article-content img {
    border-radius: 1rem;
    margin: 2rem 0;
    max-width: 100%;
    height: auto;
}

.twa-article-content figure {
    margin: 2rem 0;
}

.twa-article-content figcaption {
    font-size: 0.875rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 0.5rem;
}

.twa-article-content pre,
.twa-article-content code {
    background: #f3f4f6;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.twa-article-content code {
    padding: 0.125rem 0.375rem;
}

.twa-article-content pre {
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

/* WordPress audio player — React-style design */
.twa-article-content .uncode-single-media,
.twa-article-content .self-audio,
.twa-article-content .fluid-object {
    padding-top: 0 !important;
    height: auto !important;
}

.twa-article-content .uncode-single-media {
    margin: 2rem 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    padding: 20px 24px !important;
    max-width: 100% !important;
}

.twa-article-content .uncode-single-media .single-wrapper,
.twa-article-content .uncode-single-media .tmb,
.twa-article-content .uncode-single-media .t-inside,
.twa-article-content .uncode-single-media .t-entry-visual,
.twa-article-content .uncode-single-media .t-entry-visual-tc,
.twa-article-content .uncode-single-media .uncode-single-media-wrapper,
.twa-article-content .uncode-single-media .self-audio {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
    overflow: visible !important;
}

/* MediaElement.js player overrides */
.twa-article-content .mejs-container {
    background: #fff !important;
    border-radius: 0.5rem !important;
    height: auto !important;
    min-height: 40px !important;
}

.twa-article-content .mejs-controls {
    background: transparent !important;
    padding: 8px 0 !important;
}

.twa-article-content .mejs-time-rail .mejs-time-total {
    background: #e5e7eb !important;
    border-radius: 999px !important;
    height: 6px !important;
    margin-top: 0 !important;
}

.twa-article-content .mejs-time-rail .mejs-time-current {
    background: #7c3aed !important;
    border-radius: 999px !important;
}

.twa-article-content .mejs-time-rail .mejs-time-loaded {
    background: rgba(124, 58, 237, 0.15) !important;
    border-radius: 999px !important;
}

.twa-article-content .mejs-button>button {
    color: #7c3aed !important;
}

.twa-article-content .mejs-time span {
    color: #9ca3af !important;
    font-family: monospace !important;
    font-size: 12px !important;
}

.twa-article-content .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: #e5e7eb !important;
    border-radius: 999px !important;
}

.twa-article-content .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #7c3aed !important;
    border-radius: 999px !important;
}

/* iVoox iframe styling */
.twa-article-content iframe[src*="ivoox"] {
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    margin: 2rem 0 !important;
    max-width: 100% !important;
}

/* Blog listing — pagination link resets */
.twa-blog-page .page-numbers {
    text-decoration: none !important;
    color: #374151;
}

.twa-blog-page .page-numbers.current {
    color: #fff !important;
}

/* ── Blog article two-column grid (force over UNCODE) ── */
[data-twa-article-wrapper] {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 2rem 4rem !important;
    box-sizing: border-box !important;
}

[data-twa-article-grid] {
    display: grid !important;
    gap: 3rem !important;
    grid-template-columns: 1fr !important;
}

[data-twa-article-main] {
    min-width: 0 !important;
}

@media (min-width: 1024px) {
    [data-twa-article-grid] {
        grid-template-columns: 2fr 1fr !important;
        gap: 4rem !important;
    }

    [data-twa-article-sidebar] {
        align-self: start !important;
    }
}

/* Featured card: stack on mobile */
@media (max-width: 767px) {
    .twa-blog-page .group>[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   LEGACY PAGE NORMALIZATION
   CSS-only visual alignment of old WPBakery pages with the TWA design
   system (Inter + Playfair Display, purple/BW palette).

   SCOPING: .row-container:not([class*="twa-"]) ensures these rules
   NEVER touch new TWA blocks. .header-wrapper is self-scoping
   (only exists when _uncode_header_type != 'none').
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Page Header Banner — blog-style (black + grid pattern) ── */
.header-wrapper {
    background-color: #000 !important;
    /* Grid pattern identical to blog hero */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    border-bottom: none;
    /* Override UNCODE inline height:265px — let content dictate height */
    height: auto !important;
    min-height: 0 !important;
}

.header-wrapper .header-content-inner {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
}

/* Left-align the header content (UNCODE centers it) */
.header-wrapper .header-content {
    text-align: left !important;
}

h1.header-title {
    font-family: var(--font-sans) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 0.95 !important;
    color: var(--color-white) !important;
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    max-width: 56rem;
}

h1.header-title span {
    font-family: var(--font-sans) !important;
    color: var(--color-white) !important;
}

/* Hide UNCODE's own breadcrumb bar on pages that use TWA hero blocks
   (TWA renders its own breadcrumbs inside the hero section) */
.row-breadcrumb,
.header-wrapper .uncode_breadcrumbs_wrap {
    display: none !important;
}

/* Breadcrumb — white on black (UNCODE fallback, in case shown on non-TWA pages) */
.header-wrapper .breadcrumb,
.header-wrapper .breadcrumbs-separator {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.header-wrapper .breadcrumb a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.header-wrapper .breadcrumb a:hover {
    color: var(--color-white) !important;
}

/* TWA Breadcrumbs — accessible contrast on dark backgrounds */
.twa-breadcrumbs {
    margin-bottom: 1.5rem;
}

.twa-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-sans);
}

.twa-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.twa-breadcrumbs a,
.twa-breadcrumbs a:link,
.twa-breadcrumbs a:visited {
    color: rgba(196, 181, 253, 1) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.twa-breadcrumbs a:hover,
.twa-breadcrumbs a:focus {
    color: #fff !important;
}

.twa-breadcrumbs-sep {
    color: rgba(255, 255, 255, 0.4) !important;
    display: flex;
    align-items: center;
    margin: 0 0.15rem;
}

.twa-breadcrumbs [aria-current="page"] {
    color: #fff !important;
    font-weight: 700;
}

/* ── 2. Section Backgrounds — map UNCODE colors to TWA palette ── */
.vc_section.row-container:not([class*="twa-"])[class*="style-color-light-lavender"] {
    background-color: var(--color-gray-50) !important;
}

.vc_section.row-container:not([class*="twa-"])[class*="style-color-white-Four"] {
    background-color: var(--color-gray-50) !important;
}

.vc_section.row-container:not([class*="twa-"])[class*="style-color-white-Six"] {
    background-color: var(--color-white) !important;
}

/* ── 3. Typography — force Inter + normalize sizes ── */
.row-container:not([class*="twa-"]) .heading-text h1,
.row-container:not([class*="twa-"]) .heading-text h2,
.row-container:not([class*="twa-"]) .heading-text h3,
.row-container:not([class*="twa-"]) .heading-text h4,
.row-container:not([class*="twa-"]) .heading-text p,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h1,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h2,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h3,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h4,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap p {
    font-family: var(--font-sans) !important;
    letter-spacing: -0.02em;
}

.row-container:not([class*="twa-"]) .heading-text h1 span,
.row-container:not([class*="twa-"]) .heading-text h2 span,
.row-container:not([class*="twa-"]) .heading-text h3 span,
.row-container:not([class*="twa-"]) .heading-text p span,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h1 span,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h2 span,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h3 span,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap p span {
    font-family: var(--font-sans) !important;
}

/* Heading weight & size normalization — beat UNCODE fontsize-* dynamic classes */
.row-container:not([class*="twa-"]) .heading-text h2,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h2,
.row-container:not([class*="twa-"]) h2[class*="fontsize-"] {
    font-weight: 900 !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
}

.row-container:not([class*="twa-"]) .heading-text h3,
.row-container:not([class*="twa-"]) .vc_custom_heading_wrap h3,
.row-container:not([class*="twa-"]) h3[class*="fontsize-"] {
    font-weight: 700 !important;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
}

/* Body text */
.row-container:not([class*="twa-"]) .uncode_text_column {
    font-family: var(--font-sans) !important;
}

.row-container:not([class*="twa-"]) .uncode_text_column p {
    font-family: var(--font-sans) !important;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-gray-600);
}

.row-container:not([class*="twa-"]) .uncode_text_column li {
    font-family: var(--font-sans) !important;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-gray-600);
}

/* ── 4. Links — purple, clean underline ── */
.row-container:not([class*="twa-"]) .uncont a:not(.btn):not([class*="btn-"]):not(.no-color-url),
.row-container:not([class*="twa-"]) .uncont a:not(.btn):not([class*="btn-"]):not(.no-color-url) strong {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary-300);
    text-underline-offset: 3px;
    transition: all 0.5s, text-decoration-color 0.2s;
}

.row-container:not([class*="twa-"]) .uncont a:not(.btn):not([class*="btn-"]):not(.no-color-url):hover {
    color: var(--color-primary-hover);
    text-decoration-color: var(--color-primary);
}

/* ── 5. Buttons — modern rounded, consistent hover ── */
.row-container:not([class*="twa-"]) .btn-container .btn {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.row-container:not([class*="twa-"]) .btn-no-border-black,
.row-container:not([class*="twa-"]) .btn-color-black-Three {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    border-color: var(--color-black) !important;
}

.row-container:not([class*="twa-"]) .btn-no-border-black:hover,
.row-container:not([class*="twa-"]) .btn-no-border-black:focus,
.row-container:not([class*="twa-"]) .btn-color-black-Three:hover,
.row-container:not([class*="twa-"]) .btn-color-black-Three:focus {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* ── 6. Lists — purple markers, consistent text ── */
.row-container:not([class*="twa-"]) ul.list-purple li::marker,
.row-container:not([class*="twa-"]) ul.list-purple-lh-25 li::marker {
    color: var(--color-primary);
}

.row-container:not([class*="twa-"]) ul.list-purple li,
.row-container:not([class*="twa-"]) ul.list-purple-lh-25 li {
    font-family: var(--font-sans);
    line-height: 1.75;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

/* ── 7. Section spacing normalization ── */
.vc_section.row-container:not([class*="twa-"])>.row-parent>.row-container>.row-parent.limit-width {
    max-width: var(--container-std);
}

/* ── 8. Dark sections — text color fixes ── */
.row-container:not([class*="twa-"])[class*="style-color-black"] .uncont,
.row-container:not([class*="twa-"])[class*="style-color-black"] .uncode_text_column p {
    color: var(--color-gray-300);
}

.row-container:not([class*="twa-"])[class*="style-color-black"] .heading-text h2,
.row-container:not([class*="twa-"])[class*="style-color-black"] .heading-text h2 span,
.row-container:not([class*="twa-"])[class*="style-color-black"] .heading-text h3,
.row-container:not([class*="twa-"])[class*="style-color-black"] .heading-text h3 span {
    color: var(--color-white) !important;
}

/* ── 9. Contact form on legacy pages ── */
.row-container:not([class*="twa-"]) .wpcf7 input[type="text"],
.row-container:not([class*="twa-"]) .wpcf7 input[type="email"],
.row-container:not([class*="twa-"]) .wpcf7 input[type="tel"],
.row-container:not([class*="twa-"]) .wpcf7 textarea {
    font-family: var(--font-sans) !important;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    transition: border-color 0.3s;
}

.row-container:not([class*="twa-"]) .wpcf7 input:focus,
.row-container:not([class*="twa-"]) .wpcf7 textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.row-container:not([class*="twa-"]) .wpcf7 input[type="submit"] {
    font-family: var(--font-sans) !important;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.row-container:not([class*="twa-"]) .wpcf7 input[type="submit"]:hover {
    background: var(--color-primary);
}

/* ── 10. Images — subtle border radius ── */
.row-container:not([class*="twa-"]) .uncode-single-media img:not(.icon-media img) {
    border-radius: 8px;
}

/* ── 11. Icon + Text Sections — clean modern layout ── */
/* Icon images: keep original size, remove border-radius from icon PNGs */
.row-container:not([class*="twa-"]) .uncode-single-media .single-wrapper img {
    border-radius: 0 !important;
}

/* Icon media SVGs (.fluid-svg) */
.row-container:not([class*="twa-"]) .fluid-svg .icon-media img {
    border-radius: 0 !important;
}

/* Heading next to icon: tighter */
.row-container:not([class*="twa-"]) .row-child .col-lg-9 .heading-text h3,
.row-container:not([class*="twa-"]) .row-child .col-lg-10 .heading-text h3 {
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
    margin-bottom: 0.5rem !important;
    color: var(--color-black) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. FAQ/Accordion — Replicate TWA service-page FAQ design
   Matches twa_faq block: gray cards, numbered, chevron, gray-50 bg
   ══════════════════════════════════════════════════════════════════════════ */

/* Fix: UNCODE .uncol overflow:hidden clips expanded accordion */
.row-container:not([class*="twa-"]) .uncol:has(.uncode-accordion),
.row-container:not([class*="twa-"]) .uncoltable:has(.uncode-accordion),
.row-container:not([class*="twa-"]) .uncell:has(.uncode-accordion) {
    overflow: visible !important;
}

/* Section containing the accordion — gray-50 background like twa_faq */
.vc_section.row-container:not([class*="twa-"]):has(.uncode-accordion) {
    background-color: #f9fafb !important;
}

/* Accordion wrapper reset */
.row-container:not([class*="twa-"]) .uncode-accordion.wpb_accordion,
#accordion-home.uncode-accordion.wpb_accordion {
    border: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 1000px;
}

/* Panel group — flex column with gap + CSS counter for numbering */
.row-container:not([class*="twa-"]) .wpb_accordion_wrapper.panel-group,
#accordion-home .wpb_accordion_wrapper.panel-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    counter-reset: faq-counter !important;
}

/* ── Each FAQ card ── */
.row-container:not([class*="twa-"]) .panel-group .panel.panel-default,
.row-container:not([class*="twa-"]) .panel-group .panel+.panel,
#accordion-home .panel-group .panel {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    overflow: visible !important;
    margin: 0 0 0 56px !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
    counter-increment: faq-counter !important;
    position: relative !important;
}

/* Active card — purple border */
.row-container:not([class*="twa-"]) .panel-group .panel.active-group,
#accordion-home .panel-group .panel.active-group {
    border-color: #7c3aed !important;
}

/* Numbered circle — positioned in the margin-left space */
.row-container:not([class*="twa-"]) .panel-group .panel::before,
#accordion-home .panel-group .panel::before {
    content: counter(faq-counter, decimal-leading-zero) !important;
    position: absolute !important;
    left: -52px !important;
    top: 14px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #9ca3af !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

/* Remove UNCODE separator lines */
.row-container:not([class*="twa-"]) .panel-heading+.panel-collapse::before,
.row-container:not([class*="twa-"]) .panel-collapse::before {
    display: none !important;
    content: none !important;
}

/* Override .w-border top/bottom borders */
.row-container:not([class*="twa-"]) .uncode-accordion.w-border .panel,
.row-container:not([class*="twa-"]) .uncode-accordion.w-border .panel:last-child,
#accordion-home.w-border .panel,
#accordion-home.w-border .panel:last-child {
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
}

.row-container:not([class*="twa-"]) .uncode-accordion.w-border .panel.active-group,
#accordion-home.w-border .panel.active-group {
    border-color: #7c3aed !important;
}

/* ── Question header ── */
.row-container:not([class*="twa-"]) .panel-heading.wpb_accordion_header,
#accordion-home .panel-heading.wpb_accordion_header {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.row-container:not([class*="twa-"]) p.panel-title,
#accordion-home p.panel-title {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.row-container:not([class*="twa-"]) p.panel-title a,
#accordion-home p.panel-title a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    width: 100% !important;
}

.row-container:not([class*="twa-"]) p.panel-title a:hover,
#accordion-home p.panel-title a:hover {
    background: #f9fafb !important;
    border-radius: 0 0.75rem 0.75rem 0 !important;
}

/* Target both <span> and <h3> (js-taller.js replaces span→h3) */
.row-container:not([class*="twa-"]) p.panel-title a>span,
.row-container:not([class*="twa-"]) p.panel-title a>h3,
#accordion-home p.panel-title a>span,
#accordion-home p.panel-title a>h3 {
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    flex: 1 !important;
    padding-right: 40px !important;
}

/* h3-based titles (some legacy pages use h3 inside panels) */
#accordion-home .panel-group .panel h3 {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    color: #111827 !important;
}

#accordion-home .panel-group .panel h3::after {
    display: none !important;
}

#accordion-home .panel-group .panel h3 a {
    display: flex !important;
    align-items: center !important;
    padding: 20px 24px !important;
    text-decoration: none !important;
    color: #111827 !important;
}

/* ── SVG chevron icon ── */
/* Chevron — target both span::after and h3::after (js-taller.js replaces span→h3) */
.row-container:not([class*="twa-"]) .panel-title>a>span::after,
.row-container:not([class*="twa-"]) .panel-title>a>h3::after,
#accordion-home .panel-title>a>span::after,
#accordion-home .panel-title>a>h3::after {
    content: '' !important;
    font-family: initial !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: transform 0.3s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
}

.row-container:not([class*="twa-"]) .panel.active-group .panel-title>a>span::after,
.row-container:not([class*="twa-"]) .panel.active-group .panel-title>a>h3::after,
#accordion-home .panel.active-group .panel-title>a>span::after,
#accordion-home .panel.active-group .panel-title>a>h3::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Hide old UNCODE +/× icons */
.row-container:not([class*="twa-"]) .panel-title a>span+span,
.row-container:not([class*="twa-"]) .panel-title a>.uncodeicon,
#accordion-home .panel-title a>span+span,
#accordion-home .panel-title a>.uncodeicon {
    display: none !important;
}

/* ── Collapse states ── */
/* initLegacyFaq() JS strips Bootstrap classes and controls display
   via inline styles. These are fallbacks before JS initializes. */
.row-container:not([class*="twa-"]) .panel-collapse.collapse {
    display: none;
}

.row-container:not([class*="twa-"]) .panel-collapse.collapse.in {
    display: block !important;
}

/* ── Answer body ── */
.row-container:not([class*="twa-"]) .panel-collapse .panel-body,
.row-container:not([class*="twa-"]) .panel-body.single-block-padding,
#accordion-home .panel-collapse .panel-body,
#accordion-home .panel-body.single-block-padding {
    padding: 0 24px 20px 24px !important;
    background: transparent !important;
    border: none !important;
}

#accordion-home .panel-group .panel-collapse p {
    padding: 0 24px 20px 24px !important;
    color: #6b7280 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.row-container:not([class*="twa-"]) .panel-body .uncode_text_column {
    color: #6b7280 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.row-container:not([class*="twa-"]) .panel-body .uncode_text_column p {
    color: #6b7280 !important;
    margin-bottom: 0.75rem !important;
}

.row-container:not([class*="twa-"]) .panel-body .uncode_text_column p:last-child {
    margin-bottom: 0 !important;
}

.row-container:not([class*="twa-"]) .panel-body .uncode_text_column strong {
    color: #374151 !important;
}

.row-container:not([class*="twa-"]) .panel-body.half-internal-gutter .uncont>* {
    margin-top: 0 !important;
}

/* ── FAQ section heading — match twa_faq size and spacing ── */
/* Bare h2 (not wrapped in heading-text/vc_custom_heading_wrap) before accordion */
.row-container:not([class*="twa-"]) .uncont>h2[class*="fontsize-"] {
    font-family: var(--font-sans) !important;
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    color: var(--color-black) !important;
    margin-bottom: 2.5rem !important;
}

/* Also spacing when heading wrapper precedes accordion */
.row-container:not([class*="twa-"]) .uncont>.vc_custom_heading_wrap+.uncode-accordion,
.row-container:not([class*="twa-"]) .uncont>.heading-text+.uncode-accordion,
.row-container:not([class*="twa-"]) .uncont>h2+.uncode-accordion {
    margin-top: 2.5rem !important;
}

/* ── 13. Mobile adjustments ── */
@media (max-width: 639px) {

    /* Hide FAQ numbered circles on mobile (matches twa_faq hidden sm:flex) */
    /* .row-container:not([class*="twa-"]) .panel-group .panel::before,
    #accordion-home .panel-group .panel::before {
        display: none !important;
    } */

    .row-container:not([class*="twa-"]) .panel-group .panel,
    #accordion-home .panel-group .panel {
        margin-left: 0 !important;
    }
}

@media (max-width: 767px) {
    .header-wrapper .header-content-inner {
        padding-top: 5.5rem !important;
        padding-bottom: 2rem !important;
    }

    h1.header-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }

    .row-container:not([class*="twa-"]) .heading-text h2,
    .row-container:not([class*="twa-"]) .vc_custom_heading_wrap h2 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* FAQ cards: tighter padding on mobile */
    .row-container:not([class*="twa-"]) p.panel-title a,
    #accordion-home p.panel-title a,
    #accordion-home h3 a {
        padding: 16px 18px !important;
    }

    .row-container:not([class*="twa-"]) .panel-collapse .panel-body,
    #accordion-home .panel-collapse .panel-body,
    #accordion-home .panel-collapse p {
        padding: 0 18px 16px 18px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Override inline grid styles
   ═══════════════════════════════════════════════════════════════ */

/* ── 2-column tool layouts (contrast checker, docaudit, observatorio) ── */
[data-contrast-checker]>div>div,
[data-res-docaudit]>div>div:first-child,
[data-obs-form]>div>div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

@media (min-width: 768px) {

    [data-contrast-checker]>div>div,
    [data-res-docaudit]>div>div:first-child,
    [data-obs-form]>div>div {
        grid-template-columns: 1fr 1fr !important;
        gap: 48px !important;
    }
}

/* ── 3-column feature grids (docaudit features) ── */
[data-res-docaudit]>div>div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

@media (min-width: 640px) {
    [data-res-docaudit]>div>div:last-child {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    [data-res-docaudit]>div>div:last-child {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── Observatorio feature cards (2x2 grid) ── */
[data-obs-form] div[style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
    [data-obs-form] div[style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Pricing cards (4-column) ── */
.twa-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

@media (min-width: 640px) {
    .twa-pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .twa-pricing-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }
}

.twa-pricing-grid>div {
    height: auto !important;
    min-height: 400px;
}

@media (max-width: 639px) {
    .twa-pricing-grid>div {
        transform: none !important;
    }

    .twa-pricing-grid .text-5xl {
        font-size: 2.5rem;
    }
}

/* ── Breadcrumbs responsive ── */
.twa-breadcrumbs {
    font-size: 0.8125rem;
    flex-wrap: wrap;
    gap: 0.25rem;
    line-height: 1.6;
    overflow: visible !important;
    max-height: none !important;
}

.twa-breadcrumbs ol {
    flex-wrap: wrap !important;
    overflow: visible !important;
}

.twa-breadcrumbs li {
    white-space: normal !important;
    overflow: visible !important;
}

.twa-breadcrumbs [aria-current="page"] {
    word-break: break-word;
}

/* On narrow screens, ensure breadcrumbs are always fully visible */
@media (max-width: 639px) {
    .twa-breadcrumbs {
        position: relative;
        z-index: 20;
        margin-top: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .twa-breadcrumbs ol {
        font-size: 0.75rem;
        display: flex !important;
        flex-wrap: wrap !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .twa-breadcrumbs li {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        position: static !important;
        clip: auto !important;
        clip-path: none !important;
    }

    .twa-breadcrumbs a,
    .twa-breadcrumbs a:link,
    .twa-breadcrumbs a:visited {
        color: rgba(167, 139, 250, 1) !important;
        font-size: inherit !important;
        display: inline-flex !important;
        visibility: visible !important;
    }
}

/* ── Hero section grid responsive ── */
[data-twa-hero-grid] {
    grid-template-columns: 1fr !important;
}

@media (min-width: 1024px) {
    [data-twa-hero-grid] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Blog cards grid — 1 col on mobile, 2 on tablet, 3 on desktop ── */
.twa-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
}

@media (min-width: 768px) {
    .twa-blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .twa-blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ── Featured blog card grid (image + text side-by-side on desktop) ── */
    .twa-featured-card-grid {
        grid-template-columns: 1fr !important;
    }

    @media (min-width: 768px) {
        .twa-featured-card-grid {
            grid-template-columns: 1fr 1fr !important;
        }
    }

    /* ── Tracker wizard options grid — responsive ── */
    .twa-tracker-options {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 768px) {
        .twa-tracker-options {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* ── Header sections: more top padding so content doesn't overlap navbar ── */
    header[class*="bg-black"][class*="pt-24"],
    header[class*="bg-black"][class*="py-32"] {
        padding-top: 8rem !important;
        /* 128px */
    }

    section[style*="background:#000"][style*="padding:96px"] {
        padding-top: 7rem !important;
    }

    /* ── Watermark: hide on mobile, show only on desktop ── */
    @media (max-width: 767px) {

        .twa-section>img[aria-hidden="true"],
        section>img[aria-hidden="true"][style*="position:absolute"] {
            display: none !important;
        }
    }

    /* ── Grid pattern (cuadrícula): more visible on mobile ── */
    @media (max-width: 767px) {

        div[style*="background-size:40px 40px"],
        div[style*="background-size:32px 32px"],
        div[style*="background-size:60px 60px"] {
            background-size: 24px 24px !important;
            opacity: 1;
        }

        div[class*="bg-[size:40px_40px]"],
        div[class*="bg-[size:32px_32px]"],
        div[class*="bg-[size:60px_60px]"] {
            background-size: 24px 24px !important;
        }
    }

    /* ── "Te llamamos" floating CTA — smaller on mobile ── */
    @media (max-width: 767px) {

        .uncode-scroll-to-link,
        .uncode-extra-link,
        div[class*="te-llamamos"],
        .twa-floating-cta {
            font-size: 0.65rem !important;
            padding: 6px 10px !important;
            max-width: 120px !important;
        }
    }

    /* ── GDPR cookie widget — compact on mobile ── */
    @media (max-width: 767px) {
        #moove_gdpr_cookie_info_bar {
            font-size: 13px !important;
            padding: 12px !important;
        }

        #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
            flex-direction: column !important;
            gap: 8px !important;
        }

        #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content {
            text-align: center !important;
            font-size: 12px !important;
            line-height: 1.4 !important;
        }

        #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder {
            justify-content: center !important;
        }

        #moove_gdpr_cookie_info_bar button {
            font-size: 11px !important;
            padding: 8px 14px !important;
        }
    }

    /* ── Mobile-only overrides ── */
    @media (max-width: 767px) {

        /* Stack flex containers with sidebar (benefits sections in res pages) */
        div[style*="flex:0 0 25%"] {
            flex: 1 1 100% !important;
            max-width: 100% !important;
        }

        /* Benefits 3-col cards in res sections */
        div[style*="flex:0 0 25%"]+div {
            grid-template-columns: 1fr !important;
        }

        /* Reduce section padding on mobile */
        section[style*="padding:96px"] {
            padding-top: 48px !important;
            padding-bottom: 48px !important;
        }

        /* Reduce gap in flex containers */
        div[style*="gap:64px"] {
            gap: 32px !important;
        }

        div[style*="gap:48px"] {
            gap: 24px !important;
        }

        /* 2-col feature grids in tools */
        [data-obs-form] div[style*="repeat(2,1fr)"],
        [data-twa-tools] div[style*="repeat(2,1fr)"] {
            grid-template-columns: 1fr !important;
        }
    }

    @media (min-width: 640px) and (max-width: 767px) {

        /* Benefits 3-col cards at sm */
        div[style*="flex:0 0 25%"]+div {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media (min-width: 1024px) {
        div[style*="flex:0 0 25%"]+div {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    /* ── WeAllWeb feature grid (4-col inline) ── */
    div[style*="grid-template-columns:repeat(4,1fr)"][style*="grid-column:1/-1"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    @media (min-width: 768px) {
        div[style*="grid-template-columns:repeat(4,1fr)"][style*="grid-column:1/-1"] {
            grid-template-columns: repeat(4, 1fr) !important;
        }
    }
}

/* ====================================================================================================== */

/* ===== Home ===== */

/* --- Cards --- */

.twa-svc-card .twa-svc-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

/* Dark version */

.twa-svc-card.twa-svc-card-dark .twa-svc-card__title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.twa-svc-card.twa-svc-card-dark .twa-svc-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}

/* End Dark version */

/* Medium cards */

.twa-svc-card .svc-medium .twa-svc-card__content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.twa-svc-card .twa-svc-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-black);
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* End Medium cards */

/* Small cards */

.twa-svc-card.svc-small .twa-svc-card__title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.twa-svc-card.svc-small .twa-svc-card__desc {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-gray-500);
}

/* Timeline */

.twa-v-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 2.75rem;
}

.twa-v-timeline-line {
    position: absolute;
    left: calc(1.25rem - 1px);
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--color-gray-200);
}

/* End Timeline */

.twa-section-lg.wcag-banner-home p.twa-subheading {
    font-size: clamp(1.25rem, 2vw, 1.875rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 2rem;
}

.twa-section-lg.wcag-banner-home p {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-gray-400);
    margin-bottom: 2rem;
    max-width: 32rem;
}

/* Sectores TWA Home */

.twa-section.twa-home-sectores {
    background: var(--color-black);
    color: white;
    position: relative;
    overflow: hidden;
}

.twa-section.twa-home-sectores .twa-section-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    letter-spacing: -0.05em;
    line-height: 0.9;
    margin-bottom: 2rem;
    color: white !important;
}

.twa-section.twa-home-sectores .twa-two-col {
    gap: 4rem;
}

.twa-section-lg .twa-cta-container {
    flex-shrink: 0;
}

@media (max-width: 639px) {

    /* ── Cabecera ── */
    .twa-container.twa-cabecera-home{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .twa-container:not(.twa-cabecera-home) .twa-hero-grid{
        padding-top: 3rem;
    }

    #header-home .twa-hero {
        padding-bottom: 0 !important;
    }

    /* ── Servicios ── */
    .twa-home__services>div {
        margin-bottom: 1.75rem !important;
    }

    .twa-svc-card .svc-medium .twa-svc-card__content {
        flex-direction: column;
    }

    /* ── Legal Accesibility ── */
    .twa-section-lg.twa-legal-standards {
        padding: 3rem 0;
    }


    /* Metric display (other norms section) */
    .twa-metrics-grid {
        column-gap: .75rem;
        row-gap: 1.5rem;
    }

    /* React: text-5xl md:text-6xl lg:text-7xl font-black italic = 48/60/72px */
    .twa-metric-value {
        font-size: 2rem;
    }

    .twa-metric {
        gap: .35rem;
    }

    /* Mobile vertical timeline */
    .twa-v-timeline {
        padding-top: 1rem;
        margin-top: 1rem;
    }

    .twa-v-timeline-content {
        gap: 2.5rem;
    }

    .twa-v-timeline .twa-h-timeline-card {
        padding: 1.25rem 1.125rem;
    }

    .twa-v-timeline .twa-h-timeline-card p {
        line-height: 1.75 !important;
    }

    .twa-section-lg.wcag-banner-home {
        padding: 4rem 0;
    }

    .twa-section-lg.wcag-banner-home p {
        margin-bottom: 0;
    }

    .twa-section-lg.wcag-banner-home .twa-wcag-banner {
        gap: 2rem;
    }

    .twa-section-lg .twa-cta-container {
        width: 100%;
    }

    /* Sectores TWA Home */

    .twa-section.twa-home-sectores {
        background: var(--color-black);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .twa-section.twa-home-sectores .twa-two-col {
        gap: 1.5rem;
    }
}

/* ── Standard compliance badge (SOL intro) ── */
.twa-std-badge {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #14532d;
}
.group:hover .twa-std-badge {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   TWA BLOCKS — Mobile Responsive: reduce excessive padding/margin
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

    /* ── 1. Hero ── py-32 (128px) → reduced on mobile */
    header.bg-black.py-32 {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }

    /* Hero grid gap-16 (64px) → 32px */
    header.bg-black .grid.gap-16 {
        gap: 2rem !important;
    }

    /* Hero title: md:text-7xl fallback */
    header.bg-black h1 {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
    }

    /* Hero subtitle */
    header.bg-black h1 + p.text-2xl {
        font-size: 1.125rem !important;
    }

    /* Hero description margin */
    header.bg-black .mb-10 {
        margin-bottom: 2rem !important;
    }

    /* ── 3. Activos ── py-20 (80px) → 48px */
    section.py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── 4. Process, Benefits, FAQ, CTA, Related, Certs ── py-24 (96px) → 48px */
    section.py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Normativa/Sol heroes with py-24 ── */
    header.py-24 {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Solution page hero (section, not header) ── */
    section.twa-sol-hero {
        padding-top: 6.5rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── 9. Sectors ── py-32 (128px) → 56px */
    section.py-32 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* Sectors gap-24 (96px) → 40px */
    section.py-32 .grid.gap-24,
    section.py-32 .gap-24 {
        gap: 2.5rem !important;
    }

    /* General large gaps inside sections */
    section .gap-16 {
        gap: 2rem !important;
    }

    section .gap-12 {
        gap: 1.5rem !important;
    }

    /* ── Header margins mb-16 (64px), mb-14, mb-12 (48px) → 24-32px ── */
    section .mb-16 {
        margin-bottom: 2rem !important;
    }

    section .mb-14 {
        margin-bottom: 1.5rem !important;
    }

    section .mb-12 {
        margin-bottom: 1.5rem !important;
    }

    /* ── EAA card: reduce fixed height + padding ── */
    .relative.h-\[450px\] {
        height: 300px !important;
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
    }

    .relative.h-\[450px\] h3 {
        font-size: 1.5rem !important;
    }

    .relative.h-\[450px\] .text-\[10rem\],
    .relative.h-\[450px\] [style*="font-size"] {
        font-size: 6rem !important;
    }

    .relative.h-\[450px\] .mt-10 {
        margin-top: 1.5rem !important;
    }

    /* ── Benefits cards: p-8 (32px) → 20px ── */
    section.bg-black article.p-8 {
        padding: 1.25rem !important;
    }

    /* ── Sector links: p-6 (24px) → 16px ── */
    section.bg-black a.p-6 {
        padding: 1rem !important;
    }

    /* ── Related services cards: p-8/lg:p-10 → 24px ── */
    section.bg-white .grid a[class*="p-8"] {
        padding: 1.5rem !important;
    }

    /* ── CTA flex gap → tighter ── */
    section .flex.gap-12 {
        gap: 1.5rem !important;
    }

    /* ── Blog header mb-16 ── */
    section.bg-gray-50 .mb-16 {
        margin-bottom: 1.5rem !important;
    }

    /* ── Certifications: seal size ── */
    .w-72 {
        width: 14rem !important;
        height: 14rem !important;
    }

    /* ── Sector Hero ── py-28 (112px) → reduced on mobile */
    .py-28 {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Related services: header mb-16 text-center ── */
    section.bg-white .text-center.mb-16 {
        margin-bottom: 1.5rem !important;
    }

    /* ── Clients: logo grid gap ── */
    .grid.gap-x-12 {
        gap: 1.5rem !important;
    }

    /* ── Card grids: 2-col → 1-col on mobile ── */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* ── twa-section-lg (128px → 48px) ── */
    .twa-section-lg {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Inline-styled sections (twa-res-blocks): padding:96px → 48px ── */
    section[style*="padding:96px"],
    section[style*="padding: 96px"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Inline-styled margin-bottom:64px → 32px ── */
    [style*="margin-bottom:64px"],
    [style*="margin-bottom: 64px"] {
        margin-bottom: 2rem !important;
    }

    /* ── Inline gap:48px → 24px (res-blocks grids) ── */
    [style*="gap:48px"],
    [style*="gap: 48px"] {
        gap: 1.5rem !important;
    }

    /* ── Index page cards: p-8 / lg:p-10 → 20px ── */
    .rounded-2xl.p-8,
    [class*="rounded-2xl"][class*="p-8"] {
        padding: 1.25rem !important;
    }

    .rounded-2xl.p-10,
    [class*="rounded-2xl"][class*="p-10"] {
        padding: 1.5rem !important;
    }

    /* ── Solution hero mb-12 (icons row) ── */
    .mb-10 {
        margin-bottom: 1.5rem !important;
    }

    /* ── Sol hero: mb-12 (subtitle) ── */
    p.mb-12 {
        margin-bottom: 2rem !important;
    }

    /* ── About hero ── */
    .twa-about-hero-header.py-24 {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ── Tablet adjustments (640px–1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {

    header.bg-black.py-32 {
        padding-top: 5rem !important;
        padding-bottom: 4rem !important;
    }

    section.py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    section.py-24 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    section .gap-24 {
        gap: 3rem !important;
    }

    section .gap-16 {
        gap: 2.5rem !important;
    }

    .relative.h-\[450px\] {
        height: 350px !important;
        padding: 2rem !important;
    }

    /* ── twa-section-lg (128px → 64px) ── */
    .twa-section-lg {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* ── Inline-styled sections ── */
    section[style*="padding:96px"],
    section[style*="padding: 96px"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    [style*="margin-bottom:64px"],
    [style*="margin-bottom: 64px"] {
        margin-bottom: 2.5rem !important;
    }

    [style*="gap:48px"],
    [style*="gap: 48px"] {
        gap: 2rem !important;
    }
}