/* TecniCoelho CSS bundle - generated, do not edit */
/* === assets/css/tokens.css === */
/* ==========================================================================
   TÉCNICOELHO 6.0 — CORPORATE PRODUCT & ENGINEERING DESIGN TOKENS
   Version: 6.0.0
   Design Line: Corporate SaaS (Propuesta 1)
   WCAG 2.1 AAA Compliant | Figtree Typography | Precise Engineering Scale
   ========================================================================== */
/* ──────────────────────────────────────────────────────────────────────────
   CAPA 0 · NÚCLEO (COMPARTIDO) | Alcance: GLOBAL | Enqueue: dt-base (bundle)
   Fuente única de verdad de design tokens (--tc-*).
   PROHIBIDO duplicar estos valores en page-*.css: usa var(--tc-*) o un alias.
   Estilos de una sola página van en page-*.css scopeados bajo su raíz.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── TYPOGRAPHY FAMILIES ── */
    --tc-font-display: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tc-font-body: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--tc-font-display);
    --font-body: var(--tc-font-body);

    /* ── AUTHENTIC V1.1 + LUXURY DARK TECH COLOR PALETTE ── */
    --tc-color-bg: #081120;
    --tc-color-deep-navy: #050B14;
    --tc-color-navy: #07152B;
    --tc-color-primary: #07152B;
    
    /* Apple / Material 3 Tonal Surfaces & Glassmorphism 2.0 */
    --tc-color-surface: rgba(12, 24, 44, 0.72);
    --tc-color-surface-elevated: rgba(16, 32, 58, 0.85);
    --tc-color-surface-subtle: rgba(255, 255, 255, 0.04);
    
    /* Radiant Electric Accent (v1.1 Signature) */
    --tc-color-cyan: #25C8FF;
    --tc-color-cyan-bright: #14C5FF;
    --tc-color-cyan-dark: #0099CC;
    --tc-color-cyan-glow: rgba(37, 200, 255, 0.35);
    --tc-color-blue: #25C8FF;
    --tc-color-blue-dark: #14C5FF;

    /* High Contrast Accessible Text (WCAG 2.1 AAA) */
    --tc-color-text: #FFFFFF;
    --tc-color-text-secondary: #CBD5E1;
    --tc-color-muted: #94A3B8;
    --tc-color-border: rgba(255, 255, 255, 0.09);
    --tc-color-border-subtle: rgba(255, 255, 255, 0.05);
    --tc-color-border-hover: rgba(37, 200, 255, 0.45);

    /* Semantic Status Colors */
    --tc-color-success: #10B981;
    --tc-color-warning: #F59E0B;
    --tc-color-error: #EF4444;

    /* Semantic aliases for backwards compatibility */
    --bg-main: var(--tc-color-bg);
    --bg-surface: var(--tc-color-surface);
    --bg-gradient: linear-gradient(135deg, #07152B 0%, #081120 100%);
    --text-main: var(--tc-color-text);
    --text-body: var(--tc-color-text-secondary);
    --text-muted: var(--tc-color-muted);
    --text-dim: var(--tc-color-muted);
    --accent: var(--tc-color-cyan);
    --accent-alt: var(--tc-color-cyan-bright);
    --accent-hover: var(--tc-color-cyan-dark);
    --accent-cyan: var(--tc-color-cyan);
    --accent-glow: var(--tc-color-cyan-glow);

    --card-bg: var(--tc-color-surface);
    --card-border: var(--tc-color-border);
    --card-hover: var(--tc-color-surface-elevated);
    --card-sheen: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
    --card-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(37, 200, 255, 0.05);

    --navbar-bg: rgba(8, 17, 32, 0.88);
    --navbar-text: #F1F5F9;
    --navbar-accent: #25C8FF;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --section-alt: rgba(12, 24, 44, 0.5);

    /* ── TYPOGRAPHY SCALE (FIGTREE CORPORATE HIERARCHY) ── */
    --tc-text-xs: 0.75rem;       /* 12px */
    --tc-text-sm: 0.875rem;      /* 14px */
    --tc-text-base: 1rem;        /* 16px */
    --tc-text-lg: 1.125rem;      /* 18px */
    --tc-text-xl: 1.375rem;      /* 22px */
    --tc-text-2xl: 1.75rem;      /* 28px */
    --tc-text-3xl: 2.25rem;      /* 36px */
    --tc-text-4xl: 2.75rem;      /* 44px */
    --tc-text-hero: clamp(2.25rem, 4vw + 0.8rem, 3.75rem); /* 36px -> 60px */

    /* Fluid Heading Scale (Adaptive mobile-to-desktop, zero important needed) */
    --tc-text-h1: clamp(1.75rem, 3.2vw + 0.8rem, 2.75rem); /* 28px -> 44px */
    --tc-text-h2: clamp(1.4rem, 2.4vw + 0.6rem, 2.25rem);  /* 22px -> 36px */
    --tc-text-h3: clamp(1.15rem, 1.6vw + 0.5rem, 1.75rem); /* 18px -> 28px */
    --tc-text-h4: clamp(1.05rem, 1vw + 0.4rem, 1.375rem);  /* 16px -> 22px */

    /* Legacy mapping */
    --text-xs: var(--tc-text-xs);
    --text-sm: var(--tc-text-sm);
    --text-base: var(--tc-text-base);
    --text-lg: var(--tc-text-lg);
    --text-xl: var(--tc-text-xl);
    --text-2xl: var(--tc-text-2xl);
    --text-3xl: var(--tc-text-3xl);
    --text-4xl: var(--tc-text-4xl);
    --text-hero: var(--tc-text-hero);

    /* Line Heights */
    --tc-leading-tight: 1.15;
    --tc-leading-snug: 1.3;
    --tc-leading-normal: 1.6;
    --tc-leading-relaxed: 1.75;

    --leading-tight: var(--tc-leading-tight);
    --leading-snug: var(--tc-leading-snug);
    --leading-normal: var(--tc-leading-normal);
    --leading-relaxed: var(--tc-leading-relaxed);

    /* ── SPACING TOKENS (8PT GRID) ── */
    --tc-space-1: 4px;
    --tc-space-2: 8px;
    --tc-space-3: 12px;
    --tc-space-4: 16px;
    --tc-space-5: 20px;
    --tc-space-6: 24px;
    --tc-space-8: 32px;
    --tc-space-10: 40px;
    --tc-space-12: 48px;
    --tc-space-16: 64px;
    --tc-space-20: 80px;
    --tc-space-24: 96px;

    --space-1: var(--tc-space-1);
    --space-2: var(--tc-space-2);
    --space-3: var(--tc-space-3);
    --space-4: var(--tc-space-4);
    --space-5: var(--tc-space-5);
    --space-6: var(--tc-space-6);
    --space-8: var(--tc-space-8);
    --space-10: var(--tc-space-10);
    --space-12: var(--tc-space-12);
    --space-16: var(--tc-space-16);
    --space-20: var(--tc-space-20);

    /* ── RESPONSIVE SECTION GUTTERS ── */
    --tc-section-spacing: clamp(40px, 5vw, 80px);
    --tc-section-spacing-sm: clamp(24px, 3.5vw, 48px);

    /* ── TOUCH TARGET TOKENS (WCAG 2.1 AA / AAA) ── */
    --tc-touch-target: 44px;

    /* ── RADIUS TOKENS ── */
    --tc-radius-sm: 4px;
    --tc-radius-md: 4px;
    --tc-radius-lg: 8px;
    --tc-radius-xl: 20px;
    --tc-radius-pill: 9999px;

    --radius-xs: var(--tc-radius-sm);
    --radius-sm: var(--tc-radius-sm);
    --radius-md: var(--tc-radius-md);
    --radius-lg: var(--tc-radius-lg);
    --radius-xl: var(--tc-radius-xl);
    --radius-pill: var(--tc-radius-pill);

    /* ── SHADOW TOKENS (CLEAN SAAS SUBTLE ELEVATION) ── */
    --tc-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --tc-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --tc-shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.04);
    --tc-shadow-xl: 0 20px 35px -5px rgba(15, 23, 42, 0.1), 0 8px 16px -6px rgba(15, 23, 42, 0.05);

    /* ── TIMING & TRANSITION TOKENS (MICROINTERACTION 150-250ms) ── */
    --tc-duration-fast: 150ms;
    --tc-duration-normal: 220ms;
    --tc-duration-smooth: 300ms;
    --tc-ease: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-fast: var(--tc-duration-fast);
    --duration-normal: var(--tc-duration-normal);
    --duration-smooth: var(--tc-duration-smooth);
    --ease-standard: var(--tc-ease);
    --ease-spring: var(--tc-ease);

    /* ── CONTAINER TOKENS (RESPONSIVE FLUID GUTTER: 14px on 320px -> 48px on 1440px) ── */
    --tc-container-max: 1480px;
    --tc-container-padding: clamp(14px, 3.5vw, 48px);

    /* ── ACCESSIBLE FOCUS RING ── */
    --focus-ring: 2px solid var(--tc-color-blue);
    --focus-offset: 2px;
}
/* === assets/css/base.css === */
/* ==========================================================================
   TÉCNICOELHO 6.0 BASE ARCHITECTURE & RESET
   Version: 6.0.0
   Design Line: Corporate SaaS (Propuesta 1)
   ========================================================================== */
/* ──────────────────────────────────────────────────────────────────────────
   CAPA 0 · NÚCLEO (COMPARTIDO) | Alcance: GLOBAL | Enqueue: dt-base (bundle)
   Reset, shell oscuro de página y PRIMITIVAS compartidas:
   .tc-container · .btn-* · .tc-card/.glass-panel · shell · utilidades · tablas.
   Aquí SOLO lo que sirve a 2+ páginas. PROHIBIDO estilos de una sola página.
   ────────────────────────────────────────────────────────────────────────── */

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

html, body {
    width: 100%;
    min-height: 100%;
    height: auto;
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 16px;
    line-height: var(--tc-leading-normal, 1.6);
    background-color: var(--tc-color-bg, #F8FAFC);
    color: var(--tc-color-text-secondary, #475569);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    overflow-wrap: break-word;
}

/* Dark page shell — fuente única de verdad (consolidado desde home.css).
   Cubre web, seo, baloa, faq y sus apps standalone/SPA. */
html:has(body.page-template-page-web),
html:has(body.tc-page-web),
html:has(body.page-template-page-seo),
html:has(body.tc-page-seo),
html:has(body.page-template-page-baloa),
html:has(body.tc-page-baloa),
html:has(body.page-template-page-faq),
html:has(body.tc-page-faq),
html:has(.tc-standalone-web-app),
html:has(.tc-standalone-seo-app),
html:has(.tc-standalone-baloa-app),
html:has(.tc-standalone-faq-app),
html:has(.tc-view-seo-page-root),
html:has(.tc-view-baloa-root),
body.page-template-page-web,
body.tc-page-web,
body.page-template-page-seo,
body.tc-page-seo,
body.page-template-page-baloa,
body.tc-page-baloa,
body.page-template-page-faq,
body.tc-page-faq,
body:has(.tc-standalone-web-app),
body:has(.tc-standalone-seo-app),
body:has(.tc-standalone-baloa-app),
body:has(.tc-standalone-faq-app),
body:has(.tc-faq-page-wrapper),
body:has(.view-web.tc-view-active),
body:has(.view-seo.tc-view-active),
body:has(.view-baloa.tc-view-active),
body:has(.tc-view-seo-page-root),
body:has(.tc-view-baloa-root) {
    background-color: #081120 !important;
    background-image: linear-gradient(135deg, #07152B 0%, #081120 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #FFFFFF !important;
}

body.page-template-page-web #app,
body.tc-page-web #app,
body.page-template-page-seo #app,
body.tc-page-seo #app,
body.page-template-page-baloa #app,
body.tc-page-baloa #app,
body.page-template-page-faq #app,
body.tc-page-faq #app,
body:has(.tc-standalone-web-app) #app,
body:has(.tc-standalone-seo-app) #app,
body:has(.tc-standalone-baloa-app) #app,
body:has(.tc-standalone-faq-app) #app {
    background: transparent !important;
    background-color: transparent !important;
}

/* Garantia de flujo y scroll vertical para TODAS las plantillas standalone/SPA.
   Evita que un ancestro con altura fija recorte el viewport (regresión "sin scroll"). */
html:has(.tc-standalone-web-app),
html:has(.tc-standalone-seo-app),
html:has(.tc-standalone-baloa-app),
html:has(.tc-standalone-faq-app),
body:has(.tc-standalone-web-app),
body:has(.tc-standalone-seo-app),
body:has(.tc-standalone-baloa-app),
body:has(.tc-standalone-faq-app),
#app.tc-standalone-web-app,
#app.tc-standalone-seo-app,
#app.tc-standalone-baloa-app,
#app.tc-standalone-faq-app,
.tc-page-web .tc-screen-specialized,
.tc-page-seo .tc-screen-specialized,
.tc-page-baloa .tc-screen-specialized,
.tc-page-faq .tc-screen-specialized {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
}

/* Universal Accessible Focus Ring (WCAG AA compliant) */
:focus-visible {
    outline: var(--focus-ring, 2px solid #2563EB) !important;
    outline-offset: var(--focus-offset, 2px) !important;
    border-radius: var(--tc-radius-sm, 6px);
}

/* WordPress Standard Accessible Screen Reader Text & Skip Link */
.screen-reader-text,
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
    background-color: #FFFFFF !important;
    border: 2px solid #2563EB !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    clip: auto !important;
    clip-path: none !important;
    color: #2563EB !important;
    display: block !important;
    font-family: var(--tc-font-body, 'Figtree', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    height: auto !important;
    left: 8px !important;
    line-height: normal !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    top: 8px !important;
    width: auto !important;
    z-index: 100000 !important;
}

/* Alpine.js — oculta componentes NO inicializados (drawer móvil y overlay de
   transición) hasta que Alpine los gestione. Se excluye #app para no ocultar
   el contenido en caso de que un script no llegue a cargar. */
[x-cloak]:not(#app) {
    display: none !important;
}

/* Overlay de transición SPA: sin estilos se renderizaba como un elemento en
   flujo (canvas 300x150) que generaba un hueco superior y un segundo fondo. */
.transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--tc-duration-smooth, 300ms) ease, visibility var(--tc-duration-smooth, 300ms) ease;
}

.transition-overlay.active {
    opacity: 1;
    visibility: visible;
}

.transition-overlay canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Garantía de flujo y scroll vertical en plantillas estándar
   (blog, artículo, archivos, categorías, búsqueda y 404). */
html:has(#app[data-spa="false"]),
body:has(#app[data-spa="false"]) {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Master Application Container: Standard Document Flow */
#app, #dynamic-themes-app {
    width: 100%;
    min-height: 100vh;
    height: auto !important;
    position: relative;
    overflow: visible !important;
    background: var(--tc-color-bg, #F8FAFC);
}

/* Main Content Spacing */
#main-content,
.main-content,
.tc-main-content {
    margin-top: 20px;
}

/* Standard pages, WooCommerce, single, archive natural scrolling */
body,
body.standard-page,
body.woocommerce,
body.woocommerce-page,
body.single,
body.page,
body.archive,
body.search {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    background-color: var(--tc-color-bg, #F8FAFC) !important;
}

/* Headings Base Hierarchy (High Contrast White & Radiant Accents) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    color: #FFFFFF;
    line-height: var(--tc-leading-tight, 1.15);
    font-weight: 700;
    letter-spacing: -0.025em;
}

h1 { font-size: var(--tc-text-h1, var(--tc-text-4xl, 2.75rem)); font-weight: 800; }
h2 { font-size: var(--tc-text-h2, var(--tc-text-3xl, 2.25rem)); font-weight: 700; }
h3 { font-size: var(--tc-text-h3, var(--tc-text-2xl, 1.75rem)); font-weight: 600; }
h4 { font-size: var(--tc-text-h4, var(--tc-text-xl, 1.375rem)); font-weight: 600; }
h5 { font-size: var(--tc-text-lg, 1.125rem); font-weight: 600; }
h6 { font-size: var(--tc-text-base, 1rem); font-weight: 600; }

p {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: var(--tc-text-base, 1rem);
    line-height: var(--tc-leading-relaxed, 1.75);
}

a {
    color: var(--tc-color-cyan, #25C8FF);
    text-decoration: none;
    transition: all var(--tc-duration-fast, 150ms) var(--tc-ease, ease);
}

a:hover {
    color: var(--tc-color-cyan-bright, #14C5FF);
}

img, svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Utility Containers */
.tc-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tc-container-padding, 24px);
    padding-right: var(--tc-container-padding, 24px);
    box-sizing: border-box;
}

/* Background Kinetic Canvas */
#bgCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}

/* Alpine Multi-Screen Container & Transitions */
.tc-screen-hub,
.tc-screen-specialized {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
}

.view-enter {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.view-enter-start {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
}
.view-enter-end {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.view-leave {
    transition: all 0.25s ease;
}
.view-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.view-leave-end {
    opacity: 0;
    transform: translateY(-15px);
}

/* Apple HIG Glassmorphism 2.0 Cards */
.tc-card,
.glass-panel {
    background: var(--tc-color-surface, rgba(12, 24, 44, 0.72));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--tc-color-border, rgba(255, 255, 255, 0.09));
    border-radius: var(--tc-radius-lg, 14px);
    box-shadow: var(--tc-card-sheen), var(--tc-card-shadow);
    transition: all var(--tc-duration-normal, 220ms) var(--tc-ease, ease);
}

.tc-card:hover,
.glass-panel:hover {
    border-color: var(--tc-color-border-hover, rgba(37, 200, 255, 0.45));
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 24px 50px -15px rgba(0, 0, 0, 0.7), 0 0 25px rgba(37, 200, 255, 0.12);
    transform: translateY(-3px);
}

/* Neutral dark subtle scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #081120;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--tc-radius-pill, 9999px);
    border: 2px solid #081120;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 200, 255, 0.4);
}

/* Buttons with Radiant Electric Glow (v1.1 Signature) */
.btn-primary,
.btn-exec-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--tc-color-cyan-bright, #14C5FF);
    color: #FFFFFF !important;
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--tc-radius-md, 10px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 0 24px rgba(0, 191, 255, 0.35);
    transition: all var(--tc-duration-fast, 150ms) var(--tc-ease, ease);
}

.btn-primary:hover,
.btn-exec-primary:hover {
    background-color: var(--tc-color-cyan, #25C8FF);
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(0, 191, 255, 0.55);
}

.btn-secondary,
.btn-exec-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    color: #FFFFFF !important;
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--tc-radius-md, 10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--tc-duration-fast, 150ms) var(--tc-ease, ease);
}

.btn-secondary:hover,
.btn-exec-secondary:hover {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(37, 200, 255, 0.4);
    color: var(--tc-color-cyan, #25C8FF) !important;
    transform: translateY(-1px);
}

/* Return Bar for Specialized Views (Hidden in favor of sticky Navbar Return Button) */
.tc-back-bar-wrapper {
    display: none !important;
}

.tc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--tc-color-cyan, #25C8FF);
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--tc-radius-pill, 9999px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tc-back-btn:hover {
    background: rgba(37, 200, 255, 0.1);
    border-color: var(--tc-color-cyan, #25C8FF);
    transform: translateX(-3px);
    box-shadow: 0 0 18px rgba(37, 200, 255, 0.2);
}

/* ==========================================================================
   UNIVERSAL RESPONSIVE TABLES & MOBILE POLISH (Point 5 & Point 7)
   ========================================================================== */
.tc-table-responsive,
.tc-docs-table-wrap,
.tc-decision-table-wrap,
.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    table {
        max-width: 100%;
    }
    
    /* Global Mobile Headings Rhythm (Fluid scale without destructive !important) */
    :where(h1, .h1) {
        font-size: var(--tc-text-h1, clamp(1.65rem, 5.5vw, 2.1rem));
        line-height: 1.22;
        letter-spacing: -0.02em;
    }
    :where(h2, .h2) {
        font-size: var(--tc-text-h2, clamp(1.35rem, 4.5vw, 1.65rem));
        line-height: 1.25;
        letter-spacing: -0.015em;
    }
    :where(h3, .h3) {
        font-size: var(--tc-text-h3, clamp(1.1rem, 3.8vw, 1.3rem));
        line-height: 1.3;
    }
    
    /* Decision Table Mobile Card Adaptation */
    .tc-decision-table-wrap .tc-decision-table {
        display: block !important;
        width: 100% !important;
    }
    .tc-decision-table thead {
        display: none !important;
    }
    .tc-decision-table tbody,
    .tc-decision-table tr,
    .tc-decision-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .tc-decision-table tr {
        background: rgba(15, 28, 48, 0.85);
        border: 1px solid rgba(37, 200, 255, 0.2);
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 16px;
    }
    .tc-decision-table td {
        padding: 6px 0 !important;
        border: none !important;
    }
    .tc-decision-table td.tc-col-action {
        margin-top: 10px;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .tc-decision-plan-link {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Responsive Text Utilities (Point 7) */
.tc-mobile-text {
    display: none;
}
.tc-desktop-text {
    display: inline;
}

@media (max-width: 640px) {
    .tc-desktop-text {
        display: none !important;
    }
    .tc-mobile-text {
        display: inline !important;
    }
    .tc-hide-mobile {
        display: none !important;
    }
    .tc-section-subtitle-fluid {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
    }
}

/* iOS Safari Auto-Zoom Prevention on Touch Devices (WCAG AA) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}
/* === assets/css/components/navbar.css === */
/* ==========================================================================
   TÉCNICOELHO 6.0 — NAVBAR & MOBILE NAVIGATION
   Version: 6.0.0
   Design Line: Corporate SaaS (Propuesta 1)
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base
   Reutilizable por varias plantillas. Lo específico de una página va scopeado
   en page-*.css (Capa 2). */

.tc-navbar {
    position: sticky;
    top: var(--tc-adminbar-height, 0px);
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    z-index: 1000;
    margin: 0 !important;
    background: var(--navbar-bg, #0B172A);
    background-color: var(--navbar-bg, #0B172A);
    border-bottom: 1px solid var(--navbar-border, rgba(255, 255, 255, 0.08));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    transition: all var(--tc-duration-fast, 150ms) ease;
}

/* Keep the SPA navbar visible while the active view changes below the hero. */
#app[data-spa="true"] {
    padding-top: 72px;
    box-sizing: border-box;
}

#app[data-spa="true"] > .tc-navbar {
    position: fixed;
    top: var(--tc-adminbar-height, 0px);
    left: 0;
    right: 0;
}

body.admin-bar .tc-navbar {
    top: var(--tc-adminbar-height, 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar .tc-navbar {
        top: var(--tc-adminbar-height, 46px);
    }
}
@media screen and (max-width: 600px) {
    body.admin-bar .tc-navbar {
        top: 0;
    }

    #app[data-spa="true"] > .tc-navbar {
        top: 0;
    }
}

.tc-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(18px, 4vw, 56px) !important;
    padding-right: clamp(18px, 4vw, 56px) !important;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Vistas dedicadas (Desarrollo Web, SEO y Baloa): el contenido del navbar
   comparte ancho y gutter con el hero de la página, de modo que nunca se
   "pase" de él en pantallas anchas. El fondo del navbar sigue a ancho completo.
   -------------------------------------------------------------------------- */
body.page-template-page-web .tc-navbar-inner,
body.page-template-page-seo .tc-navbar-inner,
body:has(.tc-standalone-web-app) .tc-navbar-inner,
body:has(.tc-standalone-seo-app) .tc-navbar-inner {
    max-width: min(96vw, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-template-page-baloa .tc-navbar-inner,
body:has(.tc-standalone-baloa-app) .tc-navbar-inner {
    max-width: min(94vw, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(20px, 4vw, 48px) !important;
    padding-right: clamp(20px, 4vw, 48px) !important;
}

@media (max-width: 768px) {
    body.page-template-page-web .tc-navbar-inner,
    body.page-template-page-seo .tc-navbar-inner,
    body.page-template-page-baloa .tc-navbar-inner,
    body:has(.tc-standalone-web-app) .tc-navbar-inner,
    body:has(.tc-standalone-seo-app) .tc-navbar-inner,
    body:has(.tc-standalone-baloa-app) .tc-navbar-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Brand Logo */
.tc-brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tc-brand-logo .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #FFFFFF;
}

.tc-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-logo-text {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.tc-logo-img {
    max-height: 42px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
    transition: opacity var(--tc-duration-fast, 150ms) ease;
}

.tc-brand-logo .brand-link:hover .tc-logo-img {
    opacity: 0.92;
}

@media (max-width: 640px) {
    .tc-logo-img {
        max-height: 34px;
        max-width: 180px;
    }
}

/* Desktop Navigation Menu */
.tc-desktop-nav,
.nav-container {
    display: none !important;
}

@media (min-width: 1024px) {
    .tc-desktop-nav,
    .nav-container {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
}

.tc-menu-items {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-menu-items li a {
    color: #F1F5F9 !important;
    text-decoration: none;
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color var(--tc-duration-fast, 150ms) ease;
    padding: 6px 0;
}

.tc-menu-items li a:hover,
.tc-menu-items li.current-menu-item a {
    color: #38BDF8 !important;
}

/* Light mode adaptation if .navbar-light is explicitly used */
.tc-navbar.navbar-light {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
.tc-navbar.navbar-light .tc-brand-logo .brand-link,
.tc-navbar.navbar-light .tc-logo-text {
    color: #0B172A !important;
}
.tc-navbar.navbar-light .tc-menu-items li a {
    color: #475569 !important;
}
.tc-navbar.navbar-light .tc-menu-items li a:hover,
.tc-navbar.navbar-light .tc-menu-items li.current-menu-item a {
    color: #2563EB !important;
}

/* Right Actions / CTA */
.tc-navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Nav Back Button */
.tc-nav-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.3);
    color: var(--tc-color-cyan, #25C8FF);
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 7px 14px;
    min-height: var(--tc-touch-target, 44px);
    border-radius: var(--tc-radius-pill, 9999px);
    cursor: pointer;
    transition: all var(--tc-duration-fast, 150ms) ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.tc-nav-back-btn:hover {
    background: rgba(37, 200, 255, 0.18);
    border-color: var(--tc-color-cyan, #25C8FF);
    color: #FFFFFF;
    transform: translateX(-2px);
    box-shadow: 0 0 16px rgba(37, 200, 255, 0.25);
}

.tc-nav-back-btn svg {
    transition: transform var(--tc-duration-fast, 150ms) ease;
    flex-shrink: 0;
}

.tc-nav-back-btn:hover svg {
    transform: translateX(-2px);
}

@media (max-width: 768px) {
    .tc-nav-back-btn span {
        display: none;
    }
    .tc-nav-back-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
    }
}

.tc-nav-cta {
    font-size: 0.875rem !important;
    padding: 8px 18px !important;
    border-radius: var(--tc-radius-md, 10px) !important;
    display: none !important;
}

@media (min-width: 640px) {
    .tc-nav-cta {
        display: inline-flex !important;
    }
}

/* Mobile Toggle Hamburger */
.tc-mobile-toggle,
.mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--tc-radius-sm, 8px);
    color: #FFFFFF !important;
    cursor: pointer;
    padding: 8px;
    min-width: var(--tc-touch-target, 44px);
    min-height: var(--tc-touch-target, 44px);
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    transition: all var(--tc-duration-fast, 150ms) ease;
}

@media (min-width: 1024px) {
    .tc-mobile-toggle,
    .mobile-menu-btn {
        display: none !important;
    }
}

.tc-mobile-toggle:hover,
.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--tc-color-cyan, #25C8FF);
    color: #38BDF8 !important;
}

@media (max-width: 1023px) {
    #app[data-spa="true"] {
        padding-top: 64px;
    }

    .tc-navbar {
        height: 64px;
    }
    .tc-navbar-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
        justify-content: space-between !important;
    }
    .tc-brand-logo {
        flex: 0 1 auto !important;
        max-width: calc(100% - 104px) !important;
    }
    .tc-logo-img {
        max-height: 30px !important;
        max-width: 170px !important;
        width: auto !important;
    }
    .tc-navbar-actions {
        flex-shrink: 0 !important;
        gap: 8px !important;
    }
    .tc-nav-cta {
        display: none !important;
    }
    .tc-nav-back-btn {
        display: inline-flex !important;
    }
}

/* ==========================================================================
   MOBILE MENU FULLSCREEN OVERLAY (Restored to exact original design)
   ========================================================================== */

.mobile-menu-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  height: 100dvh;
  background: rgba(8, 17, 32, 0.95); 
  backdrop-filter: blur(24px); 
  -webkit-backdrop-filter: blur(24px); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  z-index: 999999; 
  padding: 64px 20px 48px; 
  box-sizing: border-box; 
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-content { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%; 
  max-width: 440px; 
  position: relative; 
  text-align: center; 
  margin: auto;
  box-sizing: border-box;
}

.mobile-menu-close { 
  position: absolute; 
  top: -48px; 
  right: 0; 
  background: rgba(255, 255, 255, 0.08); 
  border: 1px solid rgba(255, 255, 255, 0.15); 
  color: #ffffff; 
  border-radius: 50%; 
  min-width: var(--tc-touch-target, 44px);
  min-height: var(--tc-touch-target, 44px);
  width: 44px; 
  height: 44px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: all 0.25s ease; 
  z-index: 10;
}

.mobile-menu-close:hover { 
  background: rgba(255, 255, 255, 0.2); 
  transform: rotate(90deg) scale(1.08); 
}

.nav-mobile {
  width: 100%;
}

.nav-mobile ul,
.menu-items-mobile { 
  list-style: none; 
  text-align: center; 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
  padding: 0; 
  margin: 0; 
  width: 100%;
}

.nav-mobile a,
.menu-items-mobile a { 
  color: #ffffff !important; 
  font-size: clamp(1.15rem, 4.5vw, 1.4rem); 
  font-weight: 700; 
  text-decoration: none; 
  opacity: 0.9; 
  font-family: var(--tc-font-display, 'Figtree', sans-serif); 
  letter-spacing: -0.02em; 
  transition: all 0.2s ease; 
  display: inline-block; 
  padding: 6px 16px;
  border-radius: 8px;
}

.nav-mobile a:hover,
.menu-items-mobile a:hover { 
  color: #25c8ff !important; 
  opacity: 1; 
  transform: translateY(-2px); 
}

.mobile-menu-divider { 
  width: 100%; 
  height: 1px; 
  background: linear-gradient(90deg, transparent, rgba(37, 200, 255, 0.35), transparent); 
  margin: 24px 0 20px 0; 
}

.mobile-menu-extras { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  width: 100%; 
  align-items: center; 
}

.mobile-btn-plugin { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  width: 100%; 
  max-width: 290px; 
  background: linear-gradient(135deg, rgba(37, 200, 255, 0.15), rgba(14, 165, 233, 0.25)); 
  border: 1px solid rgba(37, 200, 255, 0.4); 
  color: #25c8ff !important; 
  font-weight: 600; 
  font-size: 0.95rem; 
  font-family: var(--tc-font-display, 'Figtree', sans-serif); 
  padding: 12px 20px; 
  border-radius: 12px; 
  text-decoration: none; 
  transition: all 0.3s ease; 
  box-sizing: border-box;
}

.mobile-btn-plugin:hover { 
  background: linear-gradient(135deg, #25c8ff, #0ea5e9); 
  color: #081120 !important; 
  box-shadow: 0 0 20px rgba(37, 200, 255, 0.4); 
  transform: translateY(-2px); 
}

.mobile-btn-whatsapp { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  width: 100%; 
  max-width: 290px; 
  background: rgba(37, 211, 102, 0.12); 
  border: 1px solid rgba(37, 211, 102, 0.35); 
  color: #25d366 !important; 
  font-weight: 600; 
  font-size: 0.95rem; 
  font-family: var(--tc-font-display, 'Figtree', sans-serif); 
  padding: 12px 20px; 
  border-radius: 12px; 
  text-decoration: none; 
  transition: all 0.3s ease; 
  box-sizing: border-box;
}

.mobile-btn-whatsapp:hover { 
  background: #25d366; 
  color: #081120 !important; 
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4); 
  transform: translateY(-2px); 
}

.mobile-social-icons { 
  display: flex; 
  gap: 14px; 
  justify-content: center; 
  align-items: center; 
  margin-top: 6px; 
}

.mobile-social-icon { 
  width: 44px; 
  height: 44px; 
  border-radius: 50%; 
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  color: #ffffff !important; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-decoration: none; 
  transition: all 0.25s ease; 
}

.mobile-social-icon:hover { 
  background: rgba(37, 200, 255, 0.2); 
  border-color: #25c8ff; 
  color: #25c8ff !important; 
  transform: translateY(-3px); 
  box-shadow: 0 4px 15px rgba(37, 200, 255, 0.3); 
}

/* ==========================================================================
   MOBILE/TABLET NAVBAR REFINEMENTS (Fase 2)
   - Reduce altura del header en touch para ganar viewport.
   - Refina tipografía y targets táctiles del drawer para pantallas pequeñas.
   - Aumenta especificidad con ancestro .tc-navbar para prevalecer sobre
     reglas heredadas de style.css sin tocar el escritorio.
   ========================================================================== */
@media (max-width: 1023px) {
    .tc-navbar .mobile-menu-overlay {
        padding: 72px 20px 48px;
    }
    .tc-navbar .mobile-menu-content {
        max-width: 420px;
    }
    .tc-navbar .mobile-menu-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        top: -56px;
    }
    .tc-navbar .mobile-menu-close svg {
        width: 24px;
        height: 24px;
    }
    .tc-navbar .nav-mobile ul,
    .tc-navbar .menu-items-mobile {
        gap: 10px;
    }
    .tc-navbar .nav-mobile a,
    .tc-navbar .menu-items-mobile a {
        font-size: clamp(1.05rem, 4vw, 1.25rem);
        padding: 10px 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tc-navbar .mobile-menu-divider {
        margin: 20px 0 16px 0;
    }
    .tc-navbar .mobile-menu-extras {
        gap: 10px;
    }
    .tc-navbar .mobile-btn-plugin,
    .tc-navbar .mobile-btn-whatsapp {
        padding: 11px 18px;
        font-size: 0.9rem;
    }
    .tc-navbar .mobile-social-icon {
        width: 44px;
        height: 44px;
    }
}

/* Móvil pequeño: logo y acciones más compactos sin perder targets táctiles */
@media (max-width: 374px) {
    .tc-navbar .tc-navbar-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .tc-brand-logo {
        max-width: calc(100% - 96px) !important;
    }
}
/* === assets/css/components/hero.css === */
/* ==========================================================================
   TÉCNICOELHO 6.0 — HERO SECTION (CORPORATE SAAS)
   Version: 6.0.0
   Design Line: Corporate SaaS (Propuesta 1)
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base
   Hero del hub + primitivas del hero. El hero de página (.hero-development)
   vive en page-web.css / page-seo.css (Capa 2). */
/* Utility Containers: Expansión Fluida de Pantalla */
.tc-hero-container {
    width: 100% !important;
    max-width: min(94vw, 1720px) !important;
    padding-left: clamp(20px, 3.5vw, 48px) !important;
    padding-right: clamp(20px, 3.5vw, 48px) !important;
}

.tc-hero-section {
    width: 100%;
    min-height: calc(100vh - 75px);
    display: flex;
    align-items: center;
    padding: clamp(30px, 4vw, 60px) 0;
    background: transparent;
    position: relative;
    box-sizing: border-box;
}
.tc-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    width: 100%;
}
.tc-hero-grid.tc-hero-single-col {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
}
.tc-hero-grid.tc-hero-single-col .tc-hero-content {
    align-items: center;
    text-align: center;
}
.tc-hero-grid.tc-hero-single-col .tc-hero-actions {
    justify-content: center;
}
.tc-hero-grid.tc-hero-single-col .tc-hero-metrics {
    justify-content: center;
}
.tc-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}
.tc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.25);
    border-radius: var(--tc-radius-pill, 9999px);
    margin-bottom: 24px;
}
.tc-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tc-color-cyan, #25C8FF);
    box-shadow: 0 0 10px #25C8FF;
}
.tc-eyebrow-text {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tc-color-cyan, #25C8FF);
    text-transform: uppercase;
}
.tc-hero-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: var(--tc-text-hero, clamp(2.6rem, 3.8vw + 0.8rem, 4.2rem));
    font-weight: 800;
    background: linear-gradient(90deg, #FFFFFF 25%, #25C8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 22px 0;
    max-width: 820px;
}
.tc-hero-description {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: clamp(1.0625rem, 1vw + 0.45rem, 1.25rem);
    line-height: 1.65;
    color: var(--tc-color-text-secondary, #CBD5E1);
    margin: 0 0 36px 0;
    max-width: 760px;
}
.tc-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
    width: 100%;
}
.tc-hero-btn-primary {
    font-size: 1rem !important;
    padding: 14px 30px !important;
}
.tc-hero-btn-secondary {
    font-size: 1rem !important;
    padding: 14px 30px !important;
}
.tc-hero-metrics {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 32px);
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 760px;
}
.tc-metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-metric-value {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.02em;
}
.tc-metric-label {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.8125rem;
    color: var(--tc-color-cyan, #25C8FF);
}
.tc-metric-separator {
    width: 1px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.08);
}

/* ── V1.1 SERVICE GATEWAY CARDS (STACK DERECHA) ── */
.tc-service-gateway-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.tc-service-gateway-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: rgba(12, 24, 44, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--tc-radius-lg, 16px);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.tc-service-gateway-card:hover {
    border-color: var(--tc-color-cyan, #25C8FF);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 20px 45px -12px rgba(0, 0, 0, 0.7), 0 0 25px rgba(37, 200, 255, 0.22);
    transform: translateX(8px) translateY(-2px);
}
.tc-gateway-canvas-wrap {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #071224;
    border: 1px solid rgba(37, 200, 255, 0.2);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}
.tc-gateway-canvas-wrap canvas {
    width: 72px;
    height: 72px;
    display: block;
}
.tc-gateway-info {
    flex: 1;
    min-width: 0;
}
.tc-gateway-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tc-color-cyan, #25C8FF);
    margin-bottom: 3px;
    display: block;
}
.tc-gateway-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px 0;
}
.tc-gateway-desc {
    font-size: 0.85rem;
    color: #CBD5E1;
    line-height: 1.45;
    margin: 0 0 8px 0;
}
.tc-gateway-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.tc-gateway-pill {
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.2);
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--tc-radius-pill, 9999px);
}
.tc-gateway-link {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tc-color-cyan, #25C8FF);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.tc-service-gateway-card:hover .tc-gateway-link {
    transform: translateX(4px);
    color: #FFFFFF;
}
.tc-window-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tc-window-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot-close { background-color: #EF4444; }
.dot-minimize { background-color: #F59E0B; }
.dot-expand { background-color: #10B981; }
.tc-check-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    flex-shrink: 0;
}
@media screen and (max-width: 1023px) {
    .tc-screen-hub .tc-main-content {
        margin-top: 18px;
    }
    .tc-hero-section {
        min-height: auto;
        padding: 36px 0 48px 0;
    }
    .tc-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .tc-hero-content {
        align-items: center;
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
    }
    .tc-hero-actions {
        justify-content: center;
    }
    .tc-hero-metrics {
        justify-content: center;
    }
}

@media screen and (max-width: 639px) {
    /* Primer viewport: reducir espacio decorativo sin comprimir legibilidad */
    .tc-screen-hub .tc-main-content {
        margin-top: 12px;
    }
    .tc-hero-section {
        padding: 20px 0 28px 0;
        margin-top: 0;
    }
    .tc-hero-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .tc-hero-eyebrow {
        margin-bottom: 12px;
        padding: 5px 12px;
    }
    .tc-eyebrow-text {
        font-size: 0.7rem;
    }
    .tc-hero-title {
        font-size: clamp(1.65rem, 5.5vw, 2.05rem) !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 12px !important;
    }
    .tc-hero-description {
        font-size: clamp(0.92rem, 3.6vw, 1.02rem) !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
    }
    .tc-hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-bottom: 20px;
    }
    .tc-hero-btn-primary,
    .tc-hero-btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 12px 18px !important;
        font-size: 0.92rem !important;
    }
    .tc-hero-metrics {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        margin-top: 16px;
        padding-top: 12px;
        width: 100%;
    }
    .tc-metric-value {
        font-size: 1rem;
    }
    .tc-metric-label {
        font-size: 0.75rem;
    }
    .tc-metric-separator {
        display: none;
    }

    /* Canvas de fondo más subordinado en mobile */
    #bgCanvas {
        opacity: 0.45;
    }

    /* Gateway Cards como filas de servicio compactas (Option B) */
    .tc-service-gateway-stack {
        gap: 10px;
        width: 100%;
    }
    .tc-service-gateway-card {
        flex-direction: row;
        align-items: center;
        padding: 12px 14px;
        gap: 12px;
        position: relative;
    }
    .tc-gateway-canvas-wrap {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .tc-gateway-canvas-wrap canvas {
        width: 44px;
        height: 44px;
    }
    .tc-gateway-info {
        flex: 1;
        min-width: 0;
        text-align: left;
    }
    .tc-gateway-tag {
        font-size: 0.65rem;
        margin-bottom: 2px;
    }
    .tc-gateway-title {
        font-size: 1rem;
        margin-bottom: 2px;
    }
    .tc-gateway-desc {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0;
    }
    /* Pills: información secundaria, oculta en mobile para reducir densidad */
    .tc-gateway-pills {
        display: none;
    }
    .tc-gateway-link {
        position: static;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1rem;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(37, 200, 255, 0.08);
        border: 1px solid rgba(37, 200, 255, 0.2);
        margin-left: auto;
        flex-shrink: 0;
    }
    .tc-window-body {
        grid-template-columns: 1fr;
    }
    .tc-saas-sidebar {
        display: none;
    }
}

/* ==========================================================================
   TABLET (640px - 1023px) — composición intermedia, sin parecer mobile grande
   ========================================================================== */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .tc-hero-section {
        padding: 32px 0 40px 0;
    }
    .tc-hero-grid {
        gap: 28px;
    }
    .tc-hero-title {
        font-size: clamp(2rem, 5vw, 2.75rem);
        line-height: 1.15;
        margin-bottom: 14px;
    }
    .tc-hero-description {
        font-size: clamp(1rem, 2.4vw, 1.125rem);
        line-height: 1.6;
        margin-bottom: 26px;
    }
    .tc-hero-actions {
        margin-bottom: 28px;
        gap: 14px;
    }
    .tc-hero-btn-primary,
    .tc-hero-btn-secondary {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }
    .tc-hero-metrics {
        flex-direction: row;
        flex-wrap: wrap;
        gap: clamp(16px, 3vw, 28px);
        justify-content: center;
        padding-top: 16px;
        margin-top: 0;
    }
    .tc-metric-separator {
        display: block;
        height: 28px;
    }

    /* Gateway Cards: grid flexible de 2 columnas; la 3ª card ocupa todo el ancho */
    .tc-service-gateway-stack {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
    }
    .tc-service-gateway-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 260px;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 56px 16px 16px;
        gap: 10px;
    }
    .tc-service-gateway-card:last-child {
        flex: 1 1 100%;
    }
    .tc-gateway-canvas-wrap {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        flex-shrink: 0;
    }
    .tc-gateway-canvas-wrap canvas {
        width: 52px;
        height: 52px;
    }
    .tc-gateway-info {
        width: 100%;
        text-align: left;
    }
    .tc-gateway-tag {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }
    .tc-gateway-title {
        font-size: 1.05rem;
        margin-bottom: 4px;
    }
    .tc-gateway-desc {
        font-size: 0.85rem;
        line-height: 1.45;
        margin-bottom: 8px;
    }
    .tc-gateway-pills {
        gap: 5px;
    }
    .tc-gateway-pill {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    .tc-gateway-link {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(37, 200, 255, 0.08);
        border: 1px solid rgba(37, 200, 255, 0.2);
    }
}

/* Sub-rango tablet landscape: aprovechar el ancho real con layout de 2 columnas */
@media screen and (min-width: 900px) and (max-width: 1023px) {
    .tc-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }
    .tc-hero-content {
        align-items: flex-start;
        text-align: left;
        max-width: none;
        margin: 0;
    }
    .tc-hero-actions {
        justify-content: flex-start;
    }
    .tc-hero-metrics {
        justify-content: flex-start;
    }
    .tc-service-gateway-stack {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .tc-service-gateway-card,
    .tc-service-gateway-card:last-child {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
}



/* ==========================================================================
   HERO SLIDER (image carousel via CSS scroll-snap + conditional JS)
   ========================================================================== */
.tc-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.tc-hero-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tc-hero-slider-track::-webkit-scrollbar {
    display: none;
}
.tc-hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tc-hero-slide img {
    max-width: 100%;
    height: auto;
}

/* Real Product Image inside Window Frame */
/* === assets/css/components/home.css === */
/* ==========================================================================
   TECNICOELHO 6.1 - HOME SECTIONS (SaaS v6)
   Section headers, Solutions, Baloa showcase, Process, Resources, Final CTA
   Extracted from the former footer.css v6 home bundle.
   ========================================================================== */
/* ──────────────────────────────────────────────────────────────────────────
   CAPA 2 · HUB (LANDING + PRIMITIVAS DE SECCIÓN) | Enqueue: dt-base
   PROPÓSITO OBJETIVO TRAS EL REFACTOR: solo secciones del landing (hub).
   Migración planificada (pixel-perfect primero):
     · 38-128 Solutions, 366-420 Process, 528-593 Final CTA → hub
     · 129-365 y 5620-5987 Baloa showcase → page-baloa.css
     · 421-527 Resources/blog → components/blog.css
     · 594-1423 Specialized views → page-web.css / page-seo.css / page-baloa.css
     · 1424-5282 Web/SEO (hero, portfolio, social, filosofía, pricing) → page-web.css
     · 5283-5619 Formulario de contacto → components/forms.css
     · 5988-6271 Instagram feed/player → page-web.css
   Mientras se migra, mantener pixel-perfect; NO añadir secciones de una sola
   página a este archivo: van scopeadas en su page-*.css.
   ────────────────────────────────────────────────────────────────────────── */
/* ── 1. SECTION HEADERS ── */
.tc-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 52px auto;
}
.tc-section-eyebrow {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tc-color-blue, #2563EB);
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}
.tc-section-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2rem, 2.8vw, 2.75rem);
    font-weight: 800;
    color: var(--tc-color-navy, #0B172A);
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0 0 16px 0;
}
.tc-section-subtitle {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 1.125rem;
    color: var(--tc-color-text-secondary, #475569);
    line-height: 1.6;
    margin: 0;
}
/* ── 2. SOLUTIONS SECTION ── */
.tc-solutions-section {
    padding: clamp(70px, 9vw, 110px) 0;
    background-color: var(--tc-color-surface, #FFFFFF);
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}
.tc-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.tc-solutions-grid.tc-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.tc-solutions-grid.tc-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.tc-solution-card {
    background: var(--tc-color-surface, #FFFFFF);
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 14px);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--tc-shadow-sm);
    transition: all var(--tc-duration-normal, 220ms) ease;
}
.tc-solution-card:hover {
    border-color: #CBD5E1;
    box-shadow: var(--tc-shadow-md);
    transform: translateY(-2px);
}
.tc-solution-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.tc-solution-num {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--tc-color-blue, #2563EB);
    opacity: 0.9;
}
.tc-solution-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--tc-color-surface-subtle, #F1F5F9);
    color: var(--tc-color-navy, #0B172A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tc-solution-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    margin: 0 0 12px 0;
}
.tc-solution-desc {
    font-size: 0.9375rem;
    color: var(--tc-color-text-secondary, #475569);
    line-height: 1.6;
    margin: 0 0 28px 0;
    flex: 1;
}
.tc-solution-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tc-color-blue, #2563EB);
    text-decoration: none;
    transition: gap var(--tc-duration-fast, 150ms) ease;
}
.tc-solution-link:hover {
    color: var(--tc-color-blue-dark, #1D4ED8);
    gap: 12px;
}
.tc-card-highlight {
    background: #FAFCFF;
    border-color: rgba(37, 99, 235, 0.25);
}
.tc-icon-highlight {
    background: rgba(37, 99, 235, 0.1);
    color: var(--tc-color-blue, #2563EB);
}
/* ── 3. BALOA SHOWCASE SECTION ── */
.tc-baloa-section {
    padding: clamp(70px, 9vw, 110px) 0;
    background-color: var(--tc-color-deep-navy, #07111F);
    color: #FFFFFF;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tc-baloa-header .tc-eyebrow-accent {
    color: var(--tc-color-cyan, #06B6D4);
}
.tc-title-light {
    color: #FFFFFF !important;
}
.tc-section-subtitle-product {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tc-color-cyan, #06B6D4);
    margin: 0 0 16px 0;
}
.tc-section-description-lead {
    font-size: 1.125rem;
    color: #94A3B8;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 680px;
}
.tc-baloa-stage {
    max-width: 960px;
    margin: 0 auto;
}
.tc-baloa-demo-card {
    background: #0B172A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--tc-radius-lg, 14px);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    margin-bottom: 32px;
}
.tc-demo-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 16px;
}
.tc-stat-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-stat-num {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}
.tc-stat-lbl {
    font-size: 0.8125rem;
    color: #94A3B8;
}
.tc-stat-danger .tc-stat-num { color: #F87171; }
.tc-stat-warning .tc-stat-num { color: #FBBF24; }
.tc-stat-info .tc-stat-num { color: #38BDF8; }
.tc-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
}
.tc-demo-btn {
    font-size: 0.875rem !important;
    padding: 9px 20px !important;
}
.tc-demo-tabs-nav {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}
.tc-demo-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 14px 20px;
    color: #94A3B8;
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms ease;
}
.tc-demo-tab-btn:hover {
    color: #FFFFFF;
}
.tc-demo-tab-btn.active {
    color: #FFFFFF;
    border-bottom-color: var(--tc-color-blue, #2563EB);
    background: rgba(255, 255, 255, 0.03);
}
.tc-demo-tabs-body {
    padding: 28px;
}
.tc-pane-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: center;
}
.tc-pane-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.tc-pane-radial {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #10B981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 12px;
}
.tc-pane-score strong {
    font-size: 0.9375rem;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.tc-pane-score span {
    font-size: 0.75rem;
    color: #94A3B8;
}
.tc-pane-findings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tc-finding-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #E2E8F0;
}
.tc-finding-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.tc-finding-badge.danger { background: rgba(239, 68, 68, 0.2); color: #F87171; }
.tc-finding-badge.warning { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }
.tc-finding-badge.success { background: rgba(16, 185, 129, 0.2); color: #34D399; }
.tc-code-audit-view {
    background: #07111F;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    font-family: monospace;
    font-size: 0.8125rem;
}
.tc-code-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #94A3B8;
}
.tc-code-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tc-code-line.ok { color: #34D399; }
.tc-code-line.warn { color: #FBBF24; }
.tc-baloa-areas {
    margin-top: 24px;
    text-align: center;
}
.tc-areas-label {
    font-size: 0.875rem;
    color: #94A3B8;
    display: block;
    margin-bottom: 14px;
}
.tc-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.tc-tag {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 14px;
    border-radius: 9999px;
}
.tc-baloa-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.tc-baloa-cta-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.tc-baloa-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* ── 4. PROCESS SECTION (TIMELINE) ── */
.tc-process-section {
    padding: clamp(70px, 9vw, 110px) 0;
    background-color: var(--tc-color-surface, #FFFFFF);
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}
.tc-process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
}
.tc-process-step {
    display: flex;
    flex-direction: column;
}
.tc-step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.tc-step-num {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--tc-color-blue, #2563EB);
    margin-right: 12px;
}
.tc-step-line {
    flex: 1;
    height: 1px;
    background: var(--tc-color-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.tc-step-arrow {
    color: var(--tc-color-blue, #2563EB);
    font-size: 0.875rem;
    background: #FFFFFF;
    padding-left: 6px;
}
.tc-step-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    margin: 0 0 8px 0;
}
.tc-step-desc {
    font-size: 0.9375rem;
    color: var(--tc-color-text-secondary, #475569);
    line-height: 1.6;
    margin: 0;
}
/* ── 5. RESOURCES / BLOG SECTION ── */
.tc-resources-section {
    padding: clamp(70px, 9vw, 110px) 0;
    background-color: var(--tc-color-bg, #F8FAFC);
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}
.tc-resources-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    max-width: 100%;
    margin-bottom: 40px;
}
.tc-view-all-link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tc-color-blue, #2563EB);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--tc-duration-fast, 150ms) ease;
}
.tc-view-all-link:hover {
    gap: 10px;
    color: var(--tc-color-blue-dark, #1D4ED8);
}
.tc-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.tc-post-card {
    background: #FFFFFF;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 14px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--tc-shadow-sm);
    transition: all var(--tc-duration-normal, 220ms) ease;
}
.tc-post-card:hover {
    border-color: #CBD5E1;
    box-shadow: var(--tc-shadow-md);
    transform: translateY(-3px);
}
.tc-post-thumb-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    background: #E2E8F0;
}
.tc-post-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.tc-post-card:hover .tc-post-thumb {
    transform: scale(1.03);
}
.tc-post-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    color: #94A3B8;
}
.tc-post-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tc-post-cat-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tc-color-blue, #2563EB);
    background: rgba(37, 99, 235, 0.08);
    padding: 3px 10px;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 12px;
}
.tc-post-card-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 16px 0;
}
.tc-post-card-title a {
    color: var(--tc-color-navy, #0B172A);
    text-decoration: none;
    transition: color 150ms ease;
}
.tc-post-card-title a:hover {
    color: var(--tc-color-blue, #2563EB);
}
.tc-post-card-footer {
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--tc-color-muted, #64748B);
}
/* ── 6. FINAL CTA BANNER ── */
.tc-final-cta-section {
    padding: 70px 0;
    background: var(--tc-color-surface, #FFFFFF);
}
.tc-final-cta-banner {
    background-color: var(--tc-color-navy, #0B172A);
    border-radius: var(--tc-radius-xl, 20px);
    padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    box-shadow: 0 20px 40px -15px rgba(11, 23, 42, 0.2);
}
.tc-final-cta-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(1.75rem, 2.5vw, 2.375rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 8px 0;
}
.tc-final-cta-desc {
    font-size: 1.0625rem;
    color: var(--tc-color-muted, #64748B);
    margin: 0;
}
.tc-final-btn {
    font-size: 1rem !important;
    padding: 13px 28px !important;
}

@media screen and (max-width: 1023px) {.tc-solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.tc-process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 768px) {.tc-solutions-grid {
        grid-template-columns: 1fr;
    }
.tc-process-timeline {
        grid-template-columns: 1fr;
    }
.tc-step-line {
        display: none;
    }
.tc-posts-grid {
        grid-template-columns: 1fr;
    }
.tc-pane-grid {
        grid-template-columns: 1fr;
    }
.tc-resources-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
.tc-final-cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   TECNICOELHO 1.1 + 5.7 SPECIALIZED VIEWS (Apple HIG & Material 3 Refinement)
   Web, Ads & SEO, Baloa Monolith Plugin
   ========================================================================== */
.tc-view-content {
    position: relative;
    width: 100%;
}

.tc-subview-hero {
    padding: clamp(36px, 5vw, 64px) 0;
}
.tc-subview-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}
.tc-subview-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2.25rem, 3.2vw + 1rem, 3.25rem);
    font-weight: 800;
    background: linear-gradient(90deg, #FFFFFF 20%, #25C8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 18px 0;
}
.tc-subview-desc {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0 0 32px 0;
    max-width: 600px;
}
.tc-canvas-card {
    background: rgba(12, 24, 44, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
    position: relative;
}
.tc-canvas-card canvas {
    width: 100%;
    height: auto;
    display: block;
    max-height: 380px;
}
.tc-canvas-overlay-badge {
    position: absolute;
    top: 14px;
    left: 16px;
    background: rgba(8, 17, 32, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(37, 200, 255, 0.3);
    border-radius: var(--tc-radius-pill, 9999px);
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tc-color-cyan, #25C8FF);
    display: flex;
    align-items: center;
    gap: 6px;
}
.tc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
}

/* 4 Pilares Bento Section */
.tc-pillars-section {
    padding: clamp(50px, 6vw, 80px) 0;
}
.tc-pillars-grid {
    display: grid;
}
.tc-pillar-card {
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.tc-pillar-card:hover {
    border-color: var(--tc-color-cyan, #25C8FF);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 20px 45px -12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(37, 200, 255, 0.15);
    transform: translateY(-4px);
}
.tc-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.tc-pillar-title {
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.tc-pillar-desc {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 16px 0;
    flex: 1;
}
.tc-pillar-badge {
    align-self: flex-start;
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.2);
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--tc-radius-pill, 9999px);
}

/* Proceso v5.7 Section */
.tc-proceso-v57-section {
    padding: clamp(60px, 7vw, 90px) 0;
    background: rgba(255, 255, 255, 0.01);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tc-proceso-v57-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tc-proceso-v57-card {
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 28px 22px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tc-proceso-v57-card:hover {
    border-color: var(--tc-color-cyan, #25C8FF);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 20px 45px -12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(37, 200, 255, 0.15);
    transform: translateY(-4px);
}
.tc-proceso-step-num {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    color: var(--tc-color-cyan, #25C8FF);
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 0 18px rgba(37, 200, 255, 0.4);
}
.tc-proceso-badge {
    display: inline-block;
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.2);
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--tc-radius-pill, 9999px);
    margin-bottom: 12px;
    text-transform: uppercase;
}
.tc-proceso-card-title {
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.tc-proceso-card-desc {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
}

/* Portfolio Section */
.tc-portfolio-section {
    padding: clamp(60px, 7vw, 90px) 0;
}
.tc-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.tc-portfolio-card {
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 28px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tc-portfolio-card:hover {
    border-color: var(--tc-color-cyan, #25C8FF);
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 20px 45px -12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(37, 200, 255, 0.15);
}
.tc-portfolio-pill {
    font-size: 0.72rem;
    color: var(--tc-color-cyan, #25C8FF);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}
.tc-portfolio-name {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}
.tc-portfolio-desc {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.tc-portfolio-stats {
    display: flex;
    gap: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tc-portfolio-stats div strong {
    color: #FFFFFF;
    font-size: 1.1rem;
    display: block;
}
.tc-portfolio-stats div span {
    color: var(--tc-color-muted, #94A3B8);
    font-size: 0.75rem;
}

/* [purga refactor] Core Web Vitals Telemetry (tc-cwv-*, tc-gauge-*) eliminado:
   sin markup; la telemetria real usa .tc-telemetry-* (view-web). */

/* Quick Metrics Strip */
.tc-metrics-strip-section {
    width: 100%;
    max-width: min(94vw, 1300px);
    margin: 0 auto 50px auto;
    padding: 0 16px;
}
.tc-metrics-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 15px 30px -10px rgba(0, 0, 0, 0.5);
}
.tc-metric-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.tc-metric-val {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(1.8rem, 2.8vw, 2.5rem);
    font-weight: 800;
    color: var(--tc-color-cyan, #25c8ff);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.tc-metric-lbl {
    font-size: 0.8125rem;
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .tc-metrics-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* AEO / GEO Section */
.tc-aeo-section {
    padding: clamp(50px, 6vw, 80px) 0;
}
.tc-aeo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.tc-aeo-card {
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 28px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
}
.tc-aeo-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tc-color-cyan, #25C8FF);
    margin-bottom: 8px;
}
.tc-aeo-title {
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.tc-aeo-desc {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
}

/* FAQs Section */
.tc-faq-section {
    padding: clamp(50px, 6vw, 80px) 0;
}
.tc-faq-accordion {
    max-width: 1200px;
    margin: 0 auto;
}
.tc-faq-item {
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.tc-faq-item.open {
    border-color: var(--tc-color-cyan, #25C8FF);
}
.tc-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: none;
    border: none;
    color: #FFFFFF;
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.tc-faq-chevron {
    transition: transform 0.3s ease;
    color: var(--tc-color-cyan, #25C8FF);
    flex-shrink: 0;
    margin-left: 12px;
}
.tc-faq-item.open .tc-faq-chevron {
    transform: rotate(180deg);
}
.tc-faq-answer {
    padding: 0 22px 18px 22px;
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.tc-faq-answer p {
    margin: 0;
}

/* FAQ Hub Callout (DLG-EXEC) */
.tc-faq-more-wrap {
    max-width: 860px;
    margin: 28px auto 0;
}
.tc-faq-more-card {
    background: rgba(12, 24, 44, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px dashed rgba(37, 200, 255, 0.35);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.tc-faq-more-card:hover {
    border-color: var(--tc-color-cyan, #25C8FF);
    background: rgba(12, 24, 44, 0.85);
}
.tc-faq-more-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tc-faq-more-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tc-color-cyan, #25C8FF);
}
.tc-faq-more-info p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--tc-color-text-secondary, #CBD5E1);
    line-height: 1.5;
}
.tc-faq-more-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tc-faq-more-btn svg {
    transition: transform 0.2s ease;
}
.tc-faq-more-btn:hover {
    background: rgba(37, 200, 255, 0.15);
    border-color: var(--tc-color-cyan, #25C8FF);
    color: var(--tc-color-cyan, #25C8FF);
}
.tc-faq-more-btn:hover svg {
    transform: translateX(4px);
}
@media (max-width: 768px) {
    .tc-faq-more-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }
    .tc-faq-more-btn {
        width: 100%;
        justify-content: center;
    }
}

/* [purga refactor] Baloa Hero Score Card (.tc-baloa-hero-score-card/.tc-score-*)
   eliminado: sin markup. Se conserva .tc-pill-pass (usado por view-baloa). */
.tc-pill-pass {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #10B981;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--tc-radius-pill, 9999px);
}

/* [purga refactor] Baloa Monolith Console eliminado: sin markup. Se conserva
   .tc-window-dots (usado por view-web/view-seo). */
.tc-window-dots {
    display: flex;
    gap: 6px;
}
.tc-window-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.tc-window-dots .dot-close { background: #EF4444; }
.tc-window-dots .dot-minimize { background: #F59E0B; }
.tc-window-dots .dot-expand { background: #10B981; }
/* [purga refactor] .tc-window-title-tag, .tc-window-version-badge, tc-console-*, tc-tree-* eliminados: sin markup. */

/* Pricing Section */
.tc-baloa-plans-section {
    padding: clamp(50px, 6vw, 80px) 0;
}
/* [purga refactor] Pricing legacy (.tc-pricing-grid/.tc-pricing-card/-badge/-title/-cost/-features)
   eliminado: sin markup; el live usa .price-card y .tc-plan-* (view-web/view-seo). */

/* Call to Action Box */
.tc-view-cta-section {
    padding: clamp(40px, 5vw, 60px) 0;
}
.tc-view-cta-box {
    background: radial-gradient(circle at center, rgba(37, 200, 255, 0.12) 0%, rgba(12, 24, 44, 0.85) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(37, 200, 255, 0.3);
    border-radius: 20px;
    padding: 50px 36px;
    text-align: center;
    box-shadow: 0 0 35px rgba(37, 200, 255, 0.15);
}
.tc-cta-heading {
    color: #FFFFFF;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 800;
    margin: 0 0 12px 0;
}
.tc-cta-subheading {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 28px auto;
    line-height: 1.6;
}

/* Responsive adjustments for subviews */
@media screen and (max-width: 1023px) {
    .tc-subview-hero-grid {
        grid-template-columns: 1fr;
    }
    .tc-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tc-proceso-v57-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tc-portfolio-grid {
        grid-template-columns: 1fr;
    }
    .tc-aeo-grid {
        grid-template-columns: 1fr;
    }
    .tc-pricing-grid {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px) {
    .tc-pillars-grid {
        grid-template-columns: 1fr;
    }
    .tc-proceso-v57-grid {
        grid-template-columns: 1fr;
    }
    .tc-cwv-gauges-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DESARROLLO WEB & SEO AUTHENTIC SECTIONS (v1.1 + DLG-EXEC Dark Electric Luxury)
   Classes: .hero-development, .portfolio-section, .pt-wrapper, .philosophy-grid,
            .tech-grid, .pricing-grid, .final-cta
   ========================================================================== */
/* Shell oscuro de página consolidado en la Capa 0: assets/css/base.css */

.tc-view-web-root,
.tc-view-seo-page-root,
.tc-view-baloa-root {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 80px;
    color: #FFFFFF;
}

/* 1. Hero Development */
.hero-development {
    width: 100%;
    min-height: calc(85vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: clamp(40px, 6vw, 70px) 0;
}
.hero-container {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(32px, 4.5vw, 64px);
    width: 100%;
    max-width: min(96vw, 1680px);
    margin: 75px auto 0 auto !important;
    margin-top: 75px !important;
    align-items: center;
}
@media (min-width: 1440px) {
    .hero-container {
        grid-template-columns: 0.95fr 1.35fr;
    }
}
.hero-badge-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid rgba(37, 200, 255, 0.25);
    margin-bottom: 20px;
    box-sizing: border-box;
    width: fit-content;
}
.hero-badge {
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}
.hero-badge::before {
    display: none !important;
    content: none !important;
}
.hero-text-content h1 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(1.65rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 18px 0;
    background: linear-gradient(90deg, #FFFFFF 20%, #25C8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.025em;
}
.hero-text-content p {
    font-size: clamp(0.92rem, 3.6vw, 1.1rem);
    color: var(--tc-color-text-secondary, #CBD5E1);
    line-height: 1.6;
    margin: 0 0 28px 0;
    max-width: 580px;
}
@media (max-width: 768px) {
    .hero-development {
        min-height: auto;
        padding: 24px 0 36px 0 !important;
    }
    .hero-container {
        margin-top: 0 !important;
        padding: 0 16px !important;
        gap: 24px !important;
    }
    .hero-badge-wrap {
        padding: 5px 12px;
        margin-bottom: 12px !important;
    }
    .hero-text-content h1 {
        font-size: clamp(1.65rem, 5.5vw, 2.05rem) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 12px !important;
    }
    .hero-text-content p {
        font-size: clamp(0.92rem, 3.6vw, 1.02rem) !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
    }
    .hero-visual {
        min-height: clamp(260px, 68vw, 300px);
        height: auto;
    }
}
.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-cta-group .primary-btn {
    background: linear-gradient(135deg, #0284c7 0%, #25c8ff 100%);
    color: #050b14;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 200, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
}
.hero-cta-group .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 200, 255, 0.5);
    color: #050b14;
}
.hero-cta-group .btn-secondary-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.hero-cta-group .btn-secondary-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(37, 200, 255, 0.4);
    color: var(--tc-color-cyan, #25c8ff);
}
.hero-visual {
    position: relative;
    width: 100%;
    min-height: 480px;
    height: clamp(480px, 58vh, 680px);
    background: radial-gradient(circle at 50% 30%, rgba(18, 38, 70, 0.45) 0%, rgba(8, 18, 36, 0.75) 100%);
    border: 1px solid rgba(37, 200, 255, 0.18);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 30px 70px -15px rgba(0, 0, 0, 0.8),
                0 0 50px rgba(37, 200, 255, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-visual:hover {
    border-color: rgba(37, 200, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 35px 80px -15px rgba(0, 0, 0, 0.85),
                0 0 65px rgba(37, 200, 255, 0.12);
}
#heroCanvas,
#heroCanvasAds,
#seosiBrainCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 2. Portfolio Section */
.portfolio-section {
    width: 100%;
    padding: clamp(60px, 8vw, 100px) 0;
    position: relative;
}
.portfolio-section .section-title,
.philosophy-section .section-title,
.tech-section .section-title,
.pricing-section .section-title,
.tc-faq-section .section-title {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 50px auto;
}
.tc-faq-section .section-title {
    max-width: 1200px;
}
.portfolio-section .section-title h2,
.philosophy-section .section-title h2,
.philosophy-section .section-title h3,
.tech-section .section-title h2,
.tech-section .section-title h3,
.pricing-section .section-title h2,
.pricing-section .section-title h3,
.tc-faq-section .section-title h2,
.tc-faq-section .section-title h3 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 800;
    color: #FFFFFF;
    background: linear-gradient(90deg, #FFFFFF 20%, #25C8FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 14px 0;
}
.portfolio-section .section-title p,
.philosophy-section .section-title p,
.tech-section .section-title p,
.pricing-section .section-title p,
.tc-faq-section .section-title p {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
}
/* Portfolio Quick Tabs Navigation */
.tc-portfolio-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    padding: 0 16px;
}
.tc-portfolio-tabs {
    display: inline-flex;
    background: rgba(8, 17, 32, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--tc-radius-pill, 9999px);
    padding: 5px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.tc-p-tab-btn {
    background: transparent;
    border: none;
    color: var(--tc-color-text-secondary, #94A3B8);
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--tc-radius-pill, 9999px);
    cursor: pointer;
    transition: all var(--tc-duration-fast, 150ms) ease;
}
.tc-p-tab-btn:hover {
    color: #FFFFFF;
}
.tc-p-tab-btn.active {
    background: rgba(37, 200, 255, 0.18);
    color: var(--tc-color-cyan, #25C8FF);
    box-shadow: 0 0 12px rgba(37, 200, 255, 0.25);
}

/* Diagonal Interactive Showcase Container */
.diagonal-showcase-container {
    display: flex;
    width: 100%;
    max-width: min(96vw, 1680px);
    margin: 0 auto;
    height: 500px;
    gap: 0;
    position: relative;
    border-radius: 20px;
    padding: 6px;
    background: rgba(8, 17, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px -15px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    box-sizing: border-box;
}

/* Diagonal Card Slice */
.diagonal-card {
    position: relative;
    height: 100%;
    flex: 1;
    cursor: pointer;
    transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease, filter 0.4s ease;
    overflow: hidden;
    margin-left: -38px;
    clip-path: polygon(42px 0%, 100% 0%, calc(100% - 42px) 100%, 0% 100%);
    border-left: 2px solid rgba(37, 200, 255, 0.35);
    box-shadow: -15px 0 35px rgba(0,0,0,0.6);
}

.diagonal-card:first-child {
    margin-left: 0;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 42px) 100%, 0% 100%);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-left: none;
}

.diagonal-card:last-child {
    clip-path: polygon(42px 0%, 100% 0%, 100% 100%, 0% 100%);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Active Expanded State */
.diagonal-card.active {
    flex: 4;
    z-index: 20;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    border-radius: 16px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0 0 50px rgba(37, 200, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border: 1.5px solid var(--tc-color-cyan, #25C8FF);
}

.diagonal-card:not(.active):hover {
    flex: 1.35;
    filter: brightness(1.2);
}

.diagonal-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    filter: brightness(0.6) saturate(1.2);
}
.diagonal-card.active .diagonal-bg {
    filter: brightness(0.38) saturate(1.1);
    transform: scale(1.05);
}

.diagonal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 17, 32, 0.3) 0%, rgba(8, 17, 32, 0.94) 85%);
}

.diagonal-collapsed-label {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.diagonal-card.active .diagonal-collapsed-label {
    opacity: 0;
    pointer-events: none;
}

.diagonal-expanded-content {
    position: absolute;
    inset: 0;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    z-index: 10;
}
.diagonal-card.active .diagonal-expanded-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.diagonal-expanded-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.diagonal-badge-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tc-badge-sub {
    font-size: 0.8125rem;
    color: #94A3B8;
    font-family: var(--tc-font-mono, monospace);
}
.diagonal-index-tag {
    font-size: 0.8125rem;
    color: var(--tc-color-cyan, #25C8FF);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.diagonal-expanded-body h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 10px 0;
}
.diagonal-expanded-body p {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 0 16px 0;
}

.diagonal-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 620px;
}
.bento-mockup-frame {
    background: rgba(12, 24, 44, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    backdrop-filter: blur(12px);
}
.bento-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.bento-val {
    font-size: 1rem;
    font-weight: 800;
    color: #FFFFFF;
}

.diagonal-expanded-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.diagonal-status-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #94A3B8;
}
.diagonal-cta-btn {
    padding: 10px 22px !important;
    font-size: 0.875rem !important;
}

/* Fallback Responsive para Pantallas Pequeñas */
@media (max-width: 900px) {
    .diagonal-showcase-container {
        height: auto;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    .diagonal-card {
        clip-path: none !important;
        margin-left: 0 !important;
        border-radius: 14px !important;
        border-left: none !important;
        height: 80px;
        flex: none;
    }
    .diagonal-card.active {
        height: auto;
        min-height: 380px;
    }
    .diagonal-collapsed-label {
        transform: none;
        bottom: auto;
        top: 50%;
        left: 24px;
        transform: translateY(-50%);
    }
    .diagonal-expanded-content {
        position: relative;
    }
    .diagonal-bento-grid {
        grid-template-columns: 1fr;
    }
    .diagonal-expanded-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   SHOWCASE DE CUENTAS / REDES: CARD BLANCA & COLLAGE INTERACTIVO
   ========================================================================== */
.tc-social-showcase-container {
    height: 610px;
    min-height: 610px;
    background: rgba(8, 17, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tc-social-card.active {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
}

.tc-social-card.active .diagonal-bg,
.tc-social-card.active .diagonal-overlay {
    opacity: 0;
    pointer-events: none;
}

/* ── TELÉFONO EN 2DO PLANO (Visible sólo cuando la tarjeta está colapsada) ── */
.tc-social-peek-phone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.86;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.diagonal-card:not(.active):hover .tc-social-peek-phone {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.85);
}

.diagonal-card.active .tc-social-peek-phone {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(0.72) !important;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}

/* El label vertical de la tarjeta colapsada sobre el teléfono */
.tc-social-card:not(.active) .diagonal-collapsed-label {
    z-index: 6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.85);
}

/* ── TARJETA EXPANDIDA EN 1ER PLANO (El teléfono desaparece) ── */
.tc-social-expanded-card {
    position: absolute;
    inset: 0;
    padding: clamp(16px, 1.8vw, 24px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    color: #0F172A;
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
    z-index: 10;
    overflow-y: auto;
}

.tc-social-card.active .tc-social-expanded-card {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header superior de la card blanca */
.tc-social-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.tc-social-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #059669;
    background: #ECFDF5;
    border: 1px solid #D1FAE5;
    padding: 3px 10px;
    border-radius: 999px;
}

.tc-social-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    animation: tcSocialPulseDot 2s infinite ease-in-out;
}

@keyframes tcSocialPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.tc-social-top-sub {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 600;
}

.tc-social-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tc-social-preview-hint {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #0284C7;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 3px 8px;
    border-radius: 6px;
    display: none;
}
@media (min-width: 768px) {
    .tc-social-preview-hint {
        display: inline-block;
    }
}

.tc-social-index-tag {
    font-size: 0.8125rem;
    font-family: var(--tc-font-mono, monospace);
    font-weight: 700;
    color: #334155;
}

/* Grid Principal de 2 Columnas: Datos Reducidos + Collage Amplio */
.tc-social-card-grid {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: clamp(16px, 1.8vw, 24px);
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

/* Columna Izquierda: Perfil & Métricas (Compactada) */
.tc-social-profile-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 14px;
    border-right: 1px solid #F1F5F9;
}

.tc-social-profile-inner {
    display: flex;
    flex-direction: column;
}

.tc-social-profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-social-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
}

.tc-social-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tc-avatar-gh { background: linear-gradient(135deg, #0284c7, #2563eb); }
.tc-avatar-kp { background: linear-gradient(135deg, #059669, #0d9488); }
.tc-avatar-tc { background: linear-gradient(135deg, #4f46e5, #1d4ed8); }

.tc-social-profile-info h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.tc-verified-check {
    width: 15px;
    height: 15px;
    color: #0284c7;
    flex-shrink: 0;
}

.tc-social-handle {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0284c7;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}
.tc-social-handle:hover {
    text-decoration: underline;
    color: #0369a1;
}

.tc-social-desc {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.45;
    margin: 8px 0 10px 0;
}

/* Bento Stats Compactos */
.tc-social-bento-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.tc-social-bento-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
}

.tc-social-bento-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
}

.tc-social-bento-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0F172A;
    margin: 1px 0;
    line-height: 1.2;
}

.tc-social-bento-sub {
    display: block;
    font-size: 0.625rem;
    color: #64748B;
}

/* Chips de Servicios */
.tc-social-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.tc-social-tag-chip {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: #F1F5F9;
    color: #334155;
}
.tc-social-tag-chip.is-highlight {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #DBEAFE;
}

/* Botón de visita oficial */
.tc-social-visit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border-radius: 10px;
    background: #0F172A;
    color: #FFFFFF !important;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}
.tc-social-visit-btn:hover {
    background: #0284c7;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.tc-social-visit-btn svg {
    flex-shrink: 0;
}

/* ── DISPOSITIVO SMARTPHONE MOCKUP (PEEK EN 2DO PLANO) ── */
.tc-phone-device {
    width: 218px;
    height: 420px;
    background: #050B14;
    border: 7px solid #1E293B;
    border-radius: 34px;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.tc-phone-peek-device {
    width: 210px;
    height: 410px;
    border-color: #0F172A;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.tc-phone-device:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.55), 0 0 0 1.5px rgba(56, 189, 248, 0.35);
}

/* Dynamic Island & Cámara */
.tc-phone-island {
    width: 62px;
    height: 14px;
    background: #000000;
    border-radius: 10px;
    margin: 5px auto 2px auto;
    position: relative;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
}

.tc-phone-cam {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: #0F172A;
    border: 1px solid #1E293B;
    box-shadow: 0 0 2px #38BDF8;
}

/* Barra de Estado (iOS Style) */
.tc-phone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #FFFFFF;
    z-index: 20;
    margin-top: -14px;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.tc-phone-status-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #FFFFFF;
}

.tc-phone-battery {
    width: 14px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    padding: 1px;
    display: flex;
    align-items: center;
    position: relative;
}
.tc-phone-battery::after {
    content: '';
    position: absolute;
    right: -2.5px;
    top: 1.5px;
    width: 1.5px;
    height: 3px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0 1px 1px 0;
}
.tc-phone-battery-level {
    width: 75%;
    height: 100%;
    background: #10B981;
    border-radius: 1px;
}

/* Barra Instagram dentro del teléfono */
.tc-phone-ig-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px 5px 10px;
    z-index: 20;
    background: rgba(5, 11, 20, 0.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tc-phone-ig-user {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-phone-ig-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    padding: 1.5px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    flex-shrink: 0;
}
.tc-phone-ig-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.tc-phone-ig-meta {
    display: flex;
    align-items: center;
    gap: 3px;
}
.tc-phone-ig-name {
    font-size: 0.625rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
}
.tc-verified-check-mini {
    width: 10px;
    height: 10px;
    color: #38BDF8;
    flex-shrink: 0;
}

.tc-phone-follow-btn {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #FFFFFF !important;
    background: #0095F6;
    padding: 2px 7px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.tc-phone-follow-btn:hover {
    background: #1877F2;
}

/* Pantalla Interactiva del Teléfono */
.tc-phone-screen {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #000000;
}

.tc-phone-post-layer {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    overflow: hidden;
}

.tc-phone-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.tc-phone-post-layer:hover .tc-phone-media-bg {
    transform: scale(1.05);
}

.tc-phone-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.88) 100%);
}

.tc-phone-format-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    font-size: 0.5rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tc-phone-play-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    pointer-events: none;
}

.tc-phone-play-disc {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: transform 0.3s ease, background 0.3s ease;
}
.tc-phone-post-layer:hover .tc-phone-play-disc {
    transform: scale(1.15);
    background: #0284C7;
    border-color: #38BDF8;
}

.tc-phone-social-actions {
    position: absolute;
    right: 8px;
    bottom: 60px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.tc-phone-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 0.5rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.tc-phone-post-footer {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 36px;
    z-index: 10;
    text-align: left;
}

.tc-phone-footer-handle {
    font-size: 0.625rem;
    font-weight: 800;
    color: #FFFFFF;
    display: block;
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.tc-phone-footer-caption {
    font-size: 0.5625rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 3px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.tc-phone-audio-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Hover Overlay para abrir en Instagram */
.tc-phone-hover-open {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 15;
}
.tc-phone-post-layer:hover .tc-phone-hover-open {
    opacity: 1;
}

.tc-phone-open-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #0284C7, #2563EB);
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

/* Barrita Home de iPhone */
.tc-phone-home-bar {
    width: 72px;
    height: 3px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    margin: 4px auto 3px auto;
    position: relative;
    z-index: 20;
}

/* ==========================================================================
   COLUMNA DERECHA: COLLAGE DE PUBLICACIONES & REELS (PROTAGONISTA)
   ========================================================================== */
.tc-social-collage-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.tc-collage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.tc-collage-badge {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0284C7;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 2px;
}

.tc-collage-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.tc-collage-hint {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748B;
}

/* Grilla del collage: 3 columnas, 2 filas */
.tc-social-collage-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

/* Item base de la galería de publicaciones */
.tc-collage-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0F172A;
    display: block;
    text-decoration: none;
    color: #FFFFFF !important;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.tc-collage-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 0 0 1.5px rgba(2, 132, 199, 0.5);
    border-color: #38BDF8;
}

.tc-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-collage-item:hover img {
    transform: scale(1.05);
}

.tc-collage-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
    transition: background 0.3s ease;
}

.tc-collage-item:hover .tc-collage-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.94) 100%);
}

/* Badge de formato (Reel vs Post) */
.tc-collage-format-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tc-collage-format-badge.badge-reel {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.88), rgba(131, 58, 180, 0.88));
    border-color: rgba(255, 255, 255, 0.35);
}

/* Reel Destacado (span 2 rows en desktop) */
.tc-collage-item-featured {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.tc-collage-play-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
}

.tc-collage-play-disc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.tc-collage-item-featured:hover .tc-collage-play-disc {
    transform: scale(1.14);
    background: #0284C7;
    border-color: #38BDF8;
}

/* Metadatos inferiores */
.tc-collage-bottom-meta {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 5;
    pointer-events: none;
}

.tc-collage-item-title {
    margin: 0 0 3px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-collage-item-featured .tc-collage-item-title {
    font-size: 0.8125rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tc-collage-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.5625rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.tc-collage-caption-clamp {
    margin: 4px 0 0 0;
    font-size: 0.625rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Botón flotante al pasar el cursor */
.tc-collage-hover-action {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.tc-collage-hover-action span {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(2, 132, 199, 0.92);
    backdrop-filter: blur(6px);
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tc-collage-item:hover .tc-collage-hover-action {
    opacity: 1;
    transform: translateY(0);
}

/* Tarjeta de Campaña Meta Ads dentro del Collage */
.tc-collage-ads-card {
    border-radius: 12px;
    background: linear-gradient(135deg, #0B132B 0%, #1C2541 100%);
    border: 1.5px solid #334155;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.tc-collage-ads-card:hover {
    transform: translateY(-2px);
    border-color: #0081FB;
    box-shadow: 0 10px 25px -5px rgba(0, 129, 251, 0.25);
}

.tc-collage-ads-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tc-ads-chip {
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
}

.tc-collage-ads-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    display: block;
}

.tc-collage-ads-desc {
    font-size: 0.625rem;
    color: #94A3B8;
    line-height: 1.35;
    display: block;
    margin: 4px 0 6px 0;
}

.tc-collage-ads-tag {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}

/* Responsive para Pantallas Medianas y Pequeñas */
@media (max-width: 1023px) {
    .tc-social-showcase-container {
        height: auto;
        min-height: auto;
    }
    .tc-social-card.active {
        height: auto !important;
        /* Tablet needs the expanded card, not a desktop-height social wall. */
        min-height: clamp(520px, 62vw, 600px) !important;
    }
    .tc-social-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tc-social-profile-col {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #F1F5F9;
        padding-bottom: 16px;
    }
    .tc-social-collage-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 10px;
        min-height: auto;
    }
    .tc-collage-item-featured {
        grid-column: 1 / span 2;
        grid-row: auto;
        height: 260px;
    }
    .tc-collage-item {
        height: 160px;
    }
    .tc-collage-ads-card {
        min-height: 120px;
    }
}

/* Final mobile precedence for the compact 2-column compositions. */
@media (max-width: 640px) {
    .tc-philo-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-tech-vertical-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-direction: initial;
        flex-wrap: initial;
        justify-content: initial;
    }

    .tc-arch-tiers-row,
    .tc-arch-tiers-row.tc-arch-5tiers {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tc-arch-nodes-flow,
    .tc-arch-nodes-flow.tc-arch-5nodes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 28px 16px;
    }

    .tc-arch-nodes-flow .tc-flow-node {
        position: relative;
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(1) { grid-column: 1; grid-row: 1; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(3) { grid-column: 2; grid-row: 1; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(5) { grid-column: 1; grid-row: 2; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(7) { grid-column: 2; grid-row: 2; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(9) { grid-column: 1; grid-row: 3; }

    .tc-arch-nodes-flow .tc-flow-arrow {
        display: none;
    }
}

/* Mobile composition: compact grids, aligned icons and a visible flow path. */
@media (max-width: 640px) {
    .tc-philo-section,
    .tc-enterprise-arch-section {
        padding: 32px 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .tc-philo-section > .tc-container,
    .tc-enterprise-arch-section > .tc-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tc-philo-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
        margin-bottom: 24px;
    }

    .tc-philo-step-item {
        min-width: 0;
        align-items: flex-start;
    }

    .tc-philo-step-icon {
        width: 42px;
        height: 42px;
    }

    .tc-philo-step-info h3,
    .tc-philo-step-info p {
        overflow-wrap: anywhere;
    }

    .tc-philo-stack-col {
        width: 100%;
    }

    .tc-tech-vertical-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        width: 100%;
    }

    .tc-tech-vertical-list li {
        min-width: 0;
        gap: 8px;
        transform: none;
    }

    .tc-tech-vertical-list li:hover {
        transform: none;
    }

    .tc-tech-item-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tc-enterprise-arch-section .tc-container {
        max-width: none;
    }

    .tc-enterprise-arch-section .tc-enterprise-arch-grid {
        gap: 24px;
    }

    .tc-enterprise-arch-section .tc-arch-board-card,
    .tc-enterprise-arch-section .tc-arch-results-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .tc-enterprise-arch-section .tc-board-header {
        margin-bottom: 18px;
    }

    .tc-arch-tiers-row,
    .tc-arch-tiers-row.tc-arch-5tiers {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        margin-bottom: 24px;
    }

    .tc-arch-tier {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        align-items: center;
        min-width: 0;
        padding: 12px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        box-sizing: border-box;
    }

    .tc-tier-num {
        grid-row: 1 / 3;
        margin-bottom: 0;
        font-size: 1.15rem;
    }

    .tc-tier-title,
    .tc-tier-stack span {
        overflow-wrap: anywhere;
    }

    .tc-tier-title {
        font-size: 0.92rem;
        margin-bottom: 2px;
    }

    .tc-tier-stack span {
        font-size: 0.78rem;
    }

    .tc-arch-nodes-flow,
    .tc-arch-nodes-flow.tc-arch-5nodes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
        position: relative;
        padding: 0 8px;
    }

    .tc-arch-nodes-flow .tc-flow-node {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        gap: 8px;
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(1) { grid-column: 1; grid-row: 1; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(3) { grid-column: 2; grid-row: 1; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(5) { grid-column: 1; grid-row: 2; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(7) { grid-column: 2; grid-row: 2; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(9) { grid-column: 1; grid-row: 3; }

    .tc-arch-nodes-flow .tc-flow-arrow {
        display: none;
    }

    .tc-arch-nodes-flow .tc-flow-node::after {
        position: absolute;
        color: var(--tc-color-cyan, #25C8FF);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 0 10px rgba(37, 200, 255, 0.35);
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(1)::after,
    .tc-arch-nodes-flow .tc-flow-node:nth-child(5)::after {
        content: "→";
        right: -14px;
        top: 22px;
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(3)::after,
    .tc-arch-nodes-flow .tc-flow-node:nth-child(7)::after {
        content: "↓";
        right: 50%;
        bottom: -20px;
    }

    .tc-arch-note {
        margin-top: 24px;
        padding: 12px 16px;
        border-radius: 8px;
        background: rgba(37, 200, 255, 0.08);
        border-left: 3px solid var(--tc-color-cyan, #25C8FF);
        color: #FFFFFF;
        font-size: 0.92rem;
        font-weight: 600;
    }
}

@media (max-width: 900px) {
    .tc-social-peek-phone {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .tc-social-collage-grid {
        grid-template-columns: 1fr;
    }
    .tc-collage-item-featured {
        grid-column: 1;
        height: 280px;
    }
    .tc-collage-item {
        height: 180px;
    }
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: min(94vw, 1500px);
    margin: 0 auto;
}
.portfolio-card {
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 25px -10px rgba(0, 0, 0, 0.5);
}
.portfolio-card:hover {
    transform: translateY(-6px);
    border-color: var(--tc-color-cyan, #25c8ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 20px 40px -15px rgba(37, 200, 255, 0.25);
}
.portfolio-link-img {
    display: block;
    text-decoration: none;
    overflow: hidden;
}
.portfolio-img {
    height: 190px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.4s ease;
}
.portfolio-card:hover .portfolio-img {
    transform: scale(1.04);
}
.badge-process {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #25c8ff;
    color: #050b14;
    padding: 4px 10px;
    border-radius: var(--tc-radius-pill, 9999px);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.portfolio-content {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.portfolio-content h4 {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.portfolio-content p {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex: 1;
}
.portfolio-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.portfolio-stats div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.portfolio-icon {
    margin-bottom: 4px;
}
.portfolio-stats strong {
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 700;
}
.portfolio-stats span {
    color: var(--tc-color-muted, #94A3B8);
    font-size: 0.75rem;
}

/* ==========================================================================
   3. NUESTRA FILOSOFÍA & TECNOLOGÍA CON PROPÓSITO + ARQUITECTURA ENTERPRISE
   ========================================================================== */
.tc-redesigned-pt-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 72px);
    width: 100%;
    margin: clamp(40px, 5vh, 80px) auto 0 auto !important;
    padding: 0 clamp(16px, 2.5vw, 32px) !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3A. FILOSOFÍA: TECNOLOGÍA CON PROPÓSITO (Dark Navy Tech Theme)
   -------------------------------------------------------------------------- */
.tc-philo-section {
    position: relative;
    width: 100%;
    padding: clamp(40px, 5vw, 64px) clamp(24px, 3.5vw, 48px);
    border-radius: 24px;
    background: radial-gradient(120% 120% at 30% 0%, #0c1c36 0%, #050b14 100%);
    border: 1px solid rgba(37, 200, 255, 0.22);
    box-shadow: 0 24px 64px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
    box-sizing: border-box;
}

.tc-philo-section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 25%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(37, 200, 255, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

.tc-philo-layout {
    display: grid;
    grid-template-columns: 1.15fr 1.35fr 0.5fr;
    gap: clamp(24px, 3vw, 42px);
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Columna Izquierda: Mensaje y Pasos */
.tc-philo-main-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tc-philo-eyebrow {
    display: inline-block;
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tc-philo-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2.1rem, 3vw, 2.85rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
}

.tc-philo-lead {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0 0 28px 0;
    max-width: 480px;
}

/* 4 Pasos Horizontales */
.tc-philo-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    margin-bottom: 30px;
}

.tc-philo-step-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.tc-philo-step-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(12, 24, 44, 0.85);
    border: 1px solid rgba(37, 200, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-color-cyan, #25C8FF);
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.tc-philo-step-icon svg {
    width: 20px;
    height: 20px;
}

.tc-philo-step-icon.tc-step-glow-cyan,
.tc-philo-step-item:hover .tc-philo-step-icon {
    background: rgba(37, 200, 255, 0.18);
    border-color: var(--tc-color-cyan, #25C8FF);
    box-shadow: 0 0 18px rgba(37, 200, 255, 0.4);
    transform: translateY(-2px);
}

.tc-philo-step-info h3,
.tc-philo-step-info h4 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 3px 0;
}

.tc-philo-step-info p {
    font-size: 0.76rem;
    color: #94A3B8;
    margin: 0;
    line-height: 1.35;
}

/* CTA Pill */
.tc-philo-cta-wrap {
    margin-top: 4px;
}

.tc-philo-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 9999px;
    background: rgba(37, 200, 255, 0.08);
    border: 1px solid var(--tc-color-cyan, #25C8FF);
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 16px rgba(37, 200, 255, 0.15);
}

.tc-philo-btn-pill:hover {
    background: var(--tc-color-cyan, #25C8FF);
    color: #050b14;
    box-shadow: 0 0 24px rgba(37, 200, 255, 0.45);
    transform: translateY(-2px);
}

/* Columna Central: 3D Stage */
.tc-philo-stage-col {
    perspective: 1200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tc-philo-perspective-canvas {
    position: relative;
    width: 100%;
    max-width: 480px;
    transform: rotateX(6deg) rotateY(-10deg) rotateZ(1deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-philo-perspective-canvas:hover {
    transform: rotateX(2deg) rotateY(-4deg) rotateZ(0deg) translateY(-4px);
}

.tc-philo-glow-backdrop {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(37, 200, 255, 0.28) 0%, transparent 65%);
    filter: blur(30px);
    z-index: 1;
    pointer-events: none;
}

.tc-philo-window-ide {
    position: relative;
    z-index: 2;
    background: rgba(8, 16, 30, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(37, 200, 255, 0.35);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.85), 0 0 30px rgba(37, 200, 255, 0.15);
}

.tc-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(14, 24, 44, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tc-window-dots {
    display: flex;
    gap: 6px;
}

.tc-window-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.tc-window-dots .dot-red { background: #FF5F56; }
.tc-window-dots .dot-yellow { background: #FFBD2E; }
.tc-window-dots .dot-green { background: #27C93F; }

.tc-window-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace;
    font-size: 0.72rem;
    color: #CBD5E1;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.tc-tab-icon svg {
    width: 12px;
    height: 12px;
    color: var(--tc-color-cyan, #25C8FF);
}

.tc-window-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: monospace;
    font-size: 0.65rem;
    color: #10B981;
    font-weight: 700;
}

.tc-live-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: tcLivePulse 2s infinite ease-in-out;
}

@keyframes tcLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.tc-window-code-body {
    padding: 14px 16px;
    font-family: 'Fira Code', monospace, Consolas, sans-serif;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #E2E8F0;
    background: rgba(5, 10, 20, 0.8);
}

.tc-code-line {
    white-space: nowrap;
}
.indent-1 { padding-left: 14px; }
.indent-2 { padding-left: 26px; }
.indent-3 { padding-left: 38px; }

.c-kwd { color: #F43F5E; font-weight: 600; }
.c-cls { color: #38BDF8; font-weight: 600; }
.c-fn  { color: #A78BFA; }
.c-var { color: #F59E0B; }
.c-str { color: #34D399; }
.c-val { color: #60A5FA; }
.c-type { color: #FBBF24; }

.tc-window-stage-live {
    height: 110px;
    background: rgba(3, 8, 16, 0.95);
    border-top: 1px solid rgba(37, 200, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.tc-window-stage-live canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Card Flotante de Telemetría */
.tc-philo-floating-telemetry {
    position: absolute;
    right: -20px;
    bottom: -16px;
    z-index: 3;
    background: rgba(14, 24, 44, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(37, 200, 255, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tc-color-cyan, #25C8FF);
    letter-spacing: 0.04em;
}

.tc-telemetry-badge svg {
    width: 13px;
    height: 13px;
}

.tc-telemetry-metrics {
    display: flex;
    gap: 12px;
}

.tc-telemetry-metrics .metric {
    display: flex;
    flex-direction: column;
}

.tc-telemetry-metrics .metric strong {
    font-family: monospace;
    font-size: 0.9rem;
    color: #FFFFFF;
}

.tc-telemetry-metrics .metric span {
    font-size: 0.62rem;
    color: #94A3B8;
    text-transform: uppercase;
}

.tc-philo-ground-reflection {
    position: absolute;
    bottom: -24px;
    left: 10%;
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(37, 200, 255, 0.3) 0%, transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}

/* Columna Derecha: Stack Vertical */
.tc-philo-stack-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tc-tech-vertical-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-tech-vertical-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94A3B8;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.tc-tech-vertical-list li:hover {
    color: #FFFFFF;
    transform: translateX(3px);
}

.tc-tech-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tc-tech-item-icon svg {
    width: 16px;
    height: 16px;
}

.tc-tech-vertical-list li:hover .tc-tech-item-icon {
    background: rgba(37, 200, 255, 0.15);
    border-color: var(--tc-color-cyan, #25C8FF);
    color: var(--tc-color-cyan, #25C8FF);
    box-shadow: 0 0 12px rgba(37, 200, 255, 0.3);
}

/* --------------------------------------------------------------------------
   3B. ARQUITECTURA ENTERPRISE: PRIMERO ENTENDEMOS. DESPUÉS ACTUAMOS (Dark Executive)
   -------------------------------------------------------------------------- */
.tc-enterprise-arch-section {
    position: relative;
    width: 100%;
    padding: clamp(40px, 5vw, 64px) clamp(24px, 3.5vw, 48px);
    border-radius: 24px;
    background: radial-gradient(120% 120% at 30% 0%, #0c1c36 0%, #050b14 100%);
    border: 1px solid rgba(37, 200, 255, 0.22);
    box-shadow: 0 24px 64px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    color: #FFFFFF;
    margin: 60px 0;
    overflow: hidden;
}

.tc-enterprise-arch-section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 40%;
    width: 500px;
    height: 300px;
    background: radial-gradient(circle, rgba(37, 200, 255, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

/* Cabecera Superior Centrada */
.tc-enterprise-arch-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(28px, 3.5vw, 42px);
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.tc-enterprise-arch-header.tc-header-centered {
    align-items: center;
    text-align: center;
}

.tc-arch-header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tc-arch-eyebrow {
    color: var(--tc-color-cyan, #25C8FF);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
}

.tc-arch-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(1.85rem, 2.6vw, 2.5rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 820px;
}

.tc-arch-header-right {
    display: none;
}

/* Grilla Principal Equilibrada: Tarjeta Diagrama + Tarjeta Resultados */
.tc-enterprise-arch-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: clamp(20px, 2.5vw, 32px);
    align-items: stretch;
    position: relative;
    z-index: 2;
}

/* Tarjeta 1: Board de Arquitectura y Flujo */
.tc-arch-board-card {
    background: rgba(12, 24, 44, 0.85);
    border: 1px solid rgba(37, 200, 255, 0.22);
    border-radius: 20px;
    padding: clamp(22px, 2.5vw, 32px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tc-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tc-board-badge {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--tc-color-cyan, #25C8FF);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tc-board-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #34D399;
    background: rgba(16, 185, 129, 0.14);
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.tc-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
}

/* 4 & 5 Tiers Técnicos */
.tc-arch-tiers-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.tc-arch-tiers-row.tc-arch-5tiers {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.tc-arch-tier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tc-tier-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tc-color-cyan, #25C8FF);
    font-family: monospace;
    margin-bottom: 4px;
}

.tc-tier-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
    line-height: 1.25;
}

.tc-tier-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tc-tier-stack span {
    font-size: 0.84rem;
    color: #CBD5E1;
    font-weight: 500;
    line-height: 1.45;
}

/* Línea Conectora / Bus con Nodos Perfectamente Alineados */
.tc-arch-bus-line {
    position: relative;
    height: 16px;
    margin: 6px 0 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(100% / 8);
}

.tc-arch-bus-line.tc-arch-bus-5nodes {
    padding: 0 calc(100% / 10);
}

.tc-bus-track {
    position: absolute;
    left: calc(100% / 8);
    right: calc(100% / 8);
    height: 2px;
    background: rgba(37, 200, 255, 0.35);
    border-radius: 2px;
}

.tc-arch-bus-5nodes .tc-bus-track {
    left: calc(100% / 10);
    right: calc(100% / 10);
}

.tc-bus-node {
    position: relative;
    z-index: 2;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #081120;
    border: 2px solid var(--tc-color-cyan, #25C8FF);
    box-shadow: 0 0 0 3px rgba(37, 200, 255, 0.25), 0 0 10px rgba(37, 200, 255, 0.4);
}

/* Flujo Nodal de Pasos */
.tc-arch-nodes-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.tc-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.tc-node-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 28, 52, 0.95);
    border: 1px solid rgba(37, 200, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    color: var(--tc-color-cyan, #25C8FF);
    transition: all 0.3s ease;
    overflow: hidden;
}

.tc-node-icon canvas.canvas-workflow-node {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    z-index: 2;
    pointer-events: none;
}

.tc-node-icon .tc-node-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.tc-node-icon.canvas-ready .tc-node-icon-fallback {
    opacity: 0;
    pointer-events: none;
}

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

.tc-flow-node:hover .tc-node-icon {
    border-color: var(--tc-color-cyan, #25C8FF);
    background: rgba(37, 200, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(37, 200, 255, 0.4);
}

.tc-node-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #F1F5F9;
    text-align: center;
    white-space: nowrap;
}

.tc-flow-arrow {
    color: rgba(148, 163, 184, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Tarjeta 2: Lo que obtienes (Resultados con Altura Completa) */
.tc-arch-results-card {
    background: rgba(12, 24, 44, 0.85);
    border: 1px solid rgba(37, 200, 255, 0.22);
    border-radius: 20px;
    padding: clamp(22px, 2.5vw, 32px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tc-results-card-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tc-results-eyebrow {
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--tc-color-cyan, #25C8FF);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.tc-results-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px 0;
}

.tc-results-desc {
    font-size: 0.92rem;
    color: #94A3B8;
    margin: 0;
    line-height: 1.55;
}

.tc-results-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tc-results-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tc-check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(37, 200, 255, 0.12);
    border: 1px solid rgba(37, 200, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-color-cyan, #25C8FF);
    flex-shrink: 0;
    margin-top: 2px;
}

.tc-check-icon svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.8;
}

.tc-check-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tc-check-content strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.35;
}

.tc-check-content span {
    font-size: 0.88rem;
    color: #CBD5E1;
    line-height: 1.5;
}

/* Responsive Queries */
@media (max-width: 1200px) {
    .tc-philo-layout {
        grid-template-columns: 1.1fr 1fr;
    }
    .tc-philo-stack-col {
        grid-column: span 2;
        margin-top: 14px;
    }
    .tc-tech-vertical-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .tc-enterprise-arch-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .tc-enterprise-arch-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .tc-philo-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tc-philo-stack-col {
        grid-column: auto;
    }
    .tc-philo-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .tc-arch-tiers-row,
    .tc-arch-tiers-row.tc-arch-5tiers {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px;
    }
    .tc-arch-bus-line,
    .tc-arch-bus-5nodes {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .tc-board-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .tc-board-status {
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
    }
    .tc-check-content {
        min-width: 0;
    }
    .tc-philo-steps-grid {
        grid-template-columns: 1fr;
    }
    .tc-arch-tiers-row,
    .tc-arch-tiers-row.tc-arch-5tiers {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .tc-arch-tier {
        display: grid;
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        align-items: center;
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .tc-tier-num {
        grid-row: 1 / 3;
        font-size: 1.3rem;
        margin-bottom: 0;
    }
    .tc-tier-title {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }
    .tc-tier-stack {
        font-size: 0.8rem;
    }
    .tc-arch-nodes-flow,
    .tc-arch-5nodes {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .tc-flow-arrow {
        display: none;
    }
    .tc-arch-bus-line,
    .tc-arch-bus-5nodes {
        display: none !important;
    }
}

/* Responsive composition for the Filosofía / IDE canvas visual */
@media (max-width: 1023px) {
    .tc-philo-perspective-canvas {
        transform: none;
        max-width: 100%;
    }
    .tc-philo-perspective-canvas:hover {
        transform: none;
    }
    .tc-philo-floating-telemetry {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 16px auto 0;
        align-self: center;
    }
    .tc-window-stage-live {
        height: clamp(90px, 22vw, 110px);
    }
    .tc-window-code-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    .tc-philo-floating-telemetry {
        padding: 8px 12px;
    }
    .tc-telemetry-metrics .metric strong {
        font-size: 0.82rem;
    }
    .tc-telemetry-metrics .metric span {
        font-size: 0.6rem;
    }
}

/* 4. Pricing Grid (v6.2 Pro — Bento & Tier Elevation) */
.pricing-section {
    width: 100%;
    max-width: min(96vw, 1680px);
    margin: 90px auto 0 auto;
    padding: 0 clamp(18px, 3.5vw, 40px);
    box-sizing: border-box;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
    width: 100%;
    box-sizing: border-box;
}
.tc-pricing-expanded-grid {
    align-items: stretch;
}
.price-card {
    position: relative;
    padding: 32px 24px;
    border-radius: 18px;
    background: rgba(12, 24, 44, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.price-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 200, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 20px 45px -12px rgba(37, 200, 255, 0.25);
}
.price-card.featured {
    border-color: var(--tc-color-cyan, #25c8ff);
    background: radial-gradient(circle at 50% 0%, rgba(37, 200, 255, 0.12) 0%, rgba(12, 24, 44, 0.85) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 35px rgba(37, 200, 255, 0.2);
}
.price-tag-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.price-tier-index {
    font-family: var(--tc-font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.05em;
}
.price-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: rgba(37, 200, 255, 0.1);
    border: 1px solid rgba(37, 200, 255, 0.25);
    color: var(--tc-color-cyan, #25c8ff);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tc-badge-blue {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.35);
    color: #60a5fa;
}
.tc-badge-purple {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.35);
    color: #c084fc;
}
.tc-badge-featured {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(37, 200, 255, 0.35) 100%);
    border-color: #38bdf8;
    color: #ffffff;
    font-weight: 800;
}
.price-card h4 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.price-card-summary {
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 16px 0;
}
/* Bento Chips in Pricing Card */
.price-bento-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.price-bento-chip {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}
.p-bento-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.04em;
}
.p-bento-val {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Features List */
.price-features-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 16px;
}
.price-features-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
    display: block;
}
.price-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.price-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #cbd5e1;
}
.price-features-list li strong {
    color: #ffffff;
    font-weight: 600;
}
.p-check-icon {
    flex-shrink: 0;
    margin-top: 2px;
}
/* Pricing Bottom */
.price-bottom {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 18px;
}
.price-value-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.price-from {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.price-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.price-period {
    font-size: 0.8125rem;
    color: #94a3b8;
    font-weight: 500;
}
.price-btn {
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.price-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #25c8ff 100%);
    color: #050b14;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 200, 255, 0.35);
}
.price-btn.featured-btn {
    background: linear-gradient(135deg, #0284c7 0%, #25c8ff 100%);
    color: #050b14;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(37, 200, 255, 0.3);
}
.price-btn.featured-btn:hover {
    box-shadow: 0 12px 32px rgba(37, 200, 255, 0.5);
    transform: translateY(-2px);
}

/* ==========================================================================
/* ==========================================================================
   4.1. TABS & OPTIONS SYSTEM FOR SERVICES & PRICING PLANS (DLG-EXEC SELECTOR DE DECISIÓN)
   ========================================================================== */
.tc-plan-tabs-section {
    width: 100%;
    max-width: min(96vw, 1280px);
    margin: 48px auto 0 auto;
    padding: 0 clamp(14px, 2.5vw, 32px);
    box-sizing: border-box;
}

/* Header */
.tc-plans-header {
    margin: 0 auto 32px auto !important;
    text-align: center;
}
.tc-plans-header .tc-badge-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #20C8F4;
    border: 1px solid rgba(32, 200, 244, 0.28);
    background: rgba(32, 200, 244, 0.06);
    padding: 4px 14px;
    border-radius: 9999px;
    margin-bottom: 12px;
}
.tc-plans-header h3 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2rem, 3.4vw, 2.85rem) !important; /* 42-48px desktop */
    font-weight: 750 !important;
    line-height: 1.08 !important;
    color: #F4F8FC;
    margin: 0 0 14px 0 !important;
    text-align: center;
    letter-spacing: -0.025em;
}
.tc-plans-header p {
    font-size: clamp(0.9375rem, 1.1vw, 1rem) !important; /* 15-16px */
    line-height: 1.5 !important;
    color: #9DAFC4;
    max-width: 850px;
    margin: 0 auto !important;
    text-align: center;
}

/* Options Selector Bar (Tabs de 4 Planes) */
.tc-plan-options-wrapper {
    width: 100%;
    margin-bottom: 20px;
}
.tc-plan-options-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}
.tc-plan-option-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 78px;
    padding: 12px 18px;
    border-radius: 16px;
    background: #081B35;
    border: 1px solid rgba(71, 178, 228, 0.18);
    color: #9DAFC4;
    text-align: left;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}
.tc-plan-option-btn:hover {
    background: #0B2342;
    border-color: rgba(32, 200, 244, 0.38);
    color: #F4F8FC;
    transform: translateY(-2px);
}
.tc-plan-option-btn.active {
    background: radial-gradient(circle at 50% 0%, rgba(32, 200, 244, 0.18) 0%, #0B2342 100%);
    border-color: #16C7F3;
    color: #F4F8FC;
    box-shadow: 0 4px 20px rgba(22, 199, 243, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.tc-opt-num {
    font-family: var(--tc-font-mono, monospace);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #9DAFC4;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s;
}
.tc-plan-option-btn.active .tc-opt-num {
    color: #20C8F4;
    background: rgba(32, 200, 244, 0.12);
    border-color: rgba(32, 200, 244, 0.35);
}
.tc-opt-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tc-opt-name {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: #F4F8FC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-opt-price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #9DAFC4;
    transition: color 0.2s;
}
.tc-plan-option-btn.active .tc-opt-price {
    color: #20C8F4;
}
.tc-opt-badge {
    position: absolute;
    top: -7px;
    right: 14px;
    background: linear-gradient(135deg, #0284c7 0%, #20C8F4 100%);
    color: #050b14;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(32, 200, 244, 0.4);
}

/* Panel Principal Contenedor (38% Izquierda / 62% Derecha) */
.tc-plan-panels-container {
    position: relative;
    width: 100%;
}
.tc-plan-tab-panel {
    width: 100%;
}
.tc-plan-split-card {
    display: grid;
    grid-template-columns: 38% calc(62% - 32px);
    gap: 32px;
    background: #081B35;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(71, 178, 228, 0.18);
    border-radius: 20px;
    padding: 32px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px -10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    align-items: stretch;
}
.tc-card-popular {
    border-color: rgba(32, 200, 244, 0.35);
    background: radial-gradient(circle at 25% 0%, rgba(32, 200, 244, 0.06) 0%, #081B35 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 35px rgba(32, 200, 244, 0.1), 0 20px 50px -15px rgba(0, 0, 0, 0.5);
}

/* Columna Izquierda: Decisión Comercial */
.tc-plan-side-overview {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    padding-right: 24px;
    border-right: 1px solid rgba(71, 178, 228, 0.14);
}
.tc-plan-card-header .price-tag-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.tc-plan-card-header .price-badge {
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 3px 10px;
    letter-spacing: 0.05em;
    border-radius: 9999px;
}
.tc-plan-card-header .price-tier-index {
    font-family: var(--tc-font-mono, monospace);
    font-size: 0.8125rem;
    color: #6F849D;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
}
.tc-plan-card-header h3,
.tc-plan-card-header h4 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(1.6rem, 2.2vw, 1.95rem); /* 32-36px */
    font-weight: 800;
    color: #F4F8FC;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px 0;
}
.tc-plan-summary {
    color: #9DAFC4;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5;
    margin: 0;
    max-width: 420px;
}

/* Beneficios Resumidos: Línea INCLUYE */
.tc-plan-includes-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: #0B2342;
    border: 1px solid rgba(71, 178, 228, 0.14);
    border-radius: 12px;
}
.tc-includes-label {
    font-family: var(--tc-font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6F849D;
    text-transform: uppercase;
}
.tc-includes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.tc-includes-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #F4F8FC;
    white-space: nowrap;
}
.tc-includes-item svg {
    flex-shrink: 0;
}

/* Inversión & Protagonismo de Precio */
.tc-plan-pricing-box {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(71, 178, 228, 0.14);
}
.tc-plan-pricing-box .price-value-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tc-plan-pricing-box .price-from {
    font-family: var(--tc-font-mono, monospace);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6F849D;
    text-transform: uppercase;
}
.tc-plan-pricing-box .price-value {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2.5rem, 3.5vw, 3.25rem); /* 48-56px */
    font-weight: 800;
    color: #F4F8FC;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.tc-plan-pricing-box .price-value.text-cyan {
    color: #20C8F4;
}
.tc-plan-pricing-box .price-period {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #9DAFC4;
    margin-top: 2px;
    letter-spacing: normal;
}

/* CTA Principal */
.tc-plan-action-btn {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    font-size: 0.95rem; /* 15-16px */
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284c7 0%, #20C8F4 100%);
    color: #050b14 !important;
    border: none;
    box-shadow: 0 8px 24px rgba(32, 200, 244, 0.32);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.tc-plan-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(32, 200, 244, 0.45);
    color: #050b14 !important;
}
.tc-plan-guarantee {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: #9DAFC4;
    line-height: 1.35;
}
.tc-plan-guarantee svg {
    flex-shrink: 0;
}

/* Columna Derecha: Lo Esencial que Incluye (2 Columnas) */
.tc-plan-side-features {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    min-width: 0;
}
.tc-features-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-features-heading h4,
.tc-features-heading h5 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #F4F8FC;
    margin: 0;
    letter-spacing: -0.015em;
}
.tc-features-subheading {
    font-size: 0.875rem;
    color: #9DAFC4;
    line-height: 1.45;
    margin: 0;
}

/* Grid de 6 Features Compactas (2 Columnas) */
.tc-detailed-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
}
.tc-feature-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #0B2342;
    border: 1px solid rgba(71, 178, 228, 0.14);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    box-sizing: border-box;
}
.tc-feature-tile:hover {
    background: rgba(11, 35, 66, 0.95);
    border-color: rgba(32, 200, 244, 0.3);
    transform: translateY(-1px);
}
.tc-feature-tile-highlight {
    background: rgba(32, 200, 244, 0.05);
    border-color: rgba(32, 200, 244, 0.25);
}
.tc-feature-tile .tc-feature-icon-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(32, 200, 244, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.tc-feature-tile .tc-feature-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tc-feature-tile .tc-feature-text strong {
    color: #F4F8FC;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.tc-feature-tile .tc-feature-text span {
    color: #9DAFC4;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progressive Disclosure */
.tc-features-disclosure-wrap {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(71, 178, 228, 0.14);
}
.tc-features-disclosure-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(71, 178, 228, 0.22);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.tc-features-disclosure-btn:hover {
    background: rgba(32, 200, 244, 0.06);
    border-color: rgba(32, 200, 244, 0.4);
}
.tc-disclosure-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #F4F8FC;
}
.tc-disclosure-count svg {
    flex-shrink: 0;
}
.tc-disclosure-cta {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #20C8F4;
    transition: transform 0.2s ease;
}
.tc-features-disclosure-btn:hover .tc-disclosure-cta {
    transform: translateX(2px);
}
.tc-features-expanded-panel {
    margin-top: 12px;
}
.tc-features-expanded-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
    background: #0B2342;
    border: 1px solid rgba(71, 178, 228, 0.14);
    border-radius: 12px;
    padding: 16px 18px;
}
.tc-expanded-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-expanded-item strong {
    font-size: 0.875rem;
    color: #20C8F4;
    font-weight: 700;
}
.tc-expanded-item span {
    font-size: 0.8125rem;
    color: #9DAFC4;
    line-height: 1.45;
}

/* 6. Franja Secundaria: Solución a Medida */
.tc-plan-custom-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 18px 26px;
    background: #081B35;
    border: 1px solid rgba(71, 178, 228, 0.18);
    border-radius: 16px;
    box-sizing: border-box;
}
.tc-plan-custom-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tc-custom-question {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 0.95rem;
    font-weight: 750;
    color: #F4F8FC;
}
.tc-plan-custom-text p {
    font-size: 0.84rem;
    color: #9DAFC4;
    margin: 0;
    line-height: 1.4;
}
.tc-plan-custom-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 10px;
    background: #0B2342;
    border: 1px solid rgba(32, 200, 244, 0.3);
    color: #20C8F4;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.tc-plan-custom-btn:hover {
    background: rgba(32, 200, 244, 0.12);
    border-color: #20C8F4;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Responsive Tablet & Mobile */
@media screen and (max-width: 1024px) {
    .tc-plan-options-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .tc-plan-option-btn {
        height: 62px;
        padding: 10px 14px;
        gap: 10px;
    }
    .tc-plan-split-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px 20px;
    }
    .tc-plan-side-overview {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(71, 178, 228, 0.14);
        padding-bottom: 24px;
    }
}

@media screen and (max-width: 768px) {
    .tc-plan-tabs-section {
        margin-top: 36px;
    }
    .tc-plans-header {
        margin-bottom: 24px !important;
    }
    .tc-plan-options-wrapper {
        overflow: visible;
        padding-bottom: 0;
        margin-bottom: 16px;
    }
    .tc-plan-options-bar {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }
    .tc-plan-option-btn {
        width: 100%;
        min-height: 62px;
        height: auto;
        padding: 10px 12px;
        gap: 8px;
    }
    .tc-opt-info {
        gap: 2px;
        padding-right: 4px;
    }
    .tc-opt-name {
        white-space: normal;
        line-height: 1.2;
    }
    .tc-opt-price {
        line-height: 1.2;
    }
    .tc-opt-badge {
        top: 7px;
        right: 10px;
        font-size: 0.56rem;
        padding: 2px 6px;
    }
    .tc-plan-option-btn.tc-opt-popular .tc-opt-info {
        padding-right: 74px;
    }
    .tc-plan-split-card {
        padding: 20px 16px;
        border-radius: 16px;
        gap: 22px;
    }
    .tc-plan-side-overview {
        gap: 16px;
        padding-bottom: 20px;
    }
    .tc-plan-card-header .price-tag-wrap {
        align-items: flex-start;
    }
    .tc-plan-card-header h3,
    .tc-plan-card-header h4 {
        font-size: 1.65rem;
    }
    .tc-plan-summary {
        font-size: 0.9rem;
    }
    .tc-plan-pricing-box {
        gap: 13px;
        padding-top: 16px;
    }
    .tc-plan-pricing-box .price-value {
        font-size: 2.5rem;
    }
    .tc-plan-guarantee {
        align-items: flex-start;
    }
    .tc-detailed-features-grid,
    .tc-features-expanded-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .tc-feature-tile {
        min-height: auto;
        padding: 11px 12px;
    }
    .tc-plan-custom-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
    }
    .tc-plan-custom-btn {
        width: 100%;
        justify-content: center;
    }
}

/* 5. Direct Contact Section & Animated Form (Replaces plain CTA) */
.tc-contact-section {
    width: 100%;
    max-width: min(96vw, 1080px);
    margin: 100px auto 30px auto;
    padding: 0 clamp(16px, 3vw, 32px);
    box-sizing: border-box;
}
.tc-contact-card {
    position: relative;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(37, 200, 255, 0.1) 0%, rgba(12, 24, 44, 0.92) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(37, 200, 255, 0.28);
    box-shadow: 0 0 45px rgba(37, 200, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 56px);
    box-sizing: border-box;
    overflow: hidden;
}
.tc-contact-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px auto;
}
.tc-contact-header h3 {
    font-size: clamp(1.75rem, 2.8vw, 2.35rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 12px 0 10px 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.tc-contact-header p {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}
.tc-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.tc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tc-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.tc-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}
.tc-required {
    color: #38bdf8;
}
.tc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.tc-input-icon {
    position: absolute;
    left: 16px;
    color: #64748b;
    pointer-events: none;
}
.tc-form-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: rgba(8, 17, 32, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.tc-form-textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(8, 17, 32, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    resize: vertical;
    min-height: 110px;
}
.tc-form-input::placeholder,
.tc-form-textarea::placeholder {
    color: #64748b;
}
.tc-form-input:focus,
.tc-form-textarea:focus {
    outline: none;
    border-color: #25c8ff;
    box-shadow: 0 0 0 3px rgba(37, 200, 255, 0.2);
    background: rgba(8, 17, 32, 0.9);
}
.tc-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 16px;
}
.tc-form-privacy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #94a3b8;
}
.tc-form-submit-btn {
    background: linear-gradient(135deg, #0284c7 0%, #25c8ff 100%);
    color: #050b14;
    border: none;
    padding: 15px 36px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(37, 200, 255, 0.35);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tc-form-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(37, 200, 255, 0.5);
    color: #050b14;
}
.tc-form-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.tc-btn-label,
.tc-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tc-form-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    text-align: left;
}
/* Animated Success Screen */
.tc-contact-success {
    text-align: center;
    padding: 30px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tc-success-icon-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}
.tc-success-checkmark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #10b981;
    stroke-miterlimit: 10;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
}
.tc-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: #10b981;
    animation: tc-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.tc-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #10b981;
    stroke-width: 3.5;
    animation: tc-stroke 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}
@keyframes tc-stroke {
    100% { stroke-dashoffset: 0; }
}
.tc-contact-success h4 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
}
.tc-contact-success p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 0 24px 0;
}
.tc-contact-another-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
/* Spinner */
@keyframes tc-spin {
    to { transform: rotate(360deg); }
}
.tc-spinner {
    animation: tc-spin 0.8s linear infinite;
}

/* Fallback / Legacy final-cta */
.final-cta {
    width: 100%;
    max-width: min(96vw, 1480px);
    margin: 100px auto 0 auto;
    padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 60px);
    box-sizing: border-box;
    border-radius: 24px;
    background: radial-gradient(circle at center, rgba(37, 200, 255, 0.12) 0%, rgba(12, 24, 44, 0.85) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(37, 200, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: 0 0 35px rgba(37, 200, 255, 0.15);
}
.final-cta h3 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 10px 0;
}
.final-cta p {
    color: var(--tc-color-text-secondary, #CBD5E1);
    font-size: 1.05rem;
    margin: 0;
}
.final-cta-actions .primary-btn {
    background: linear-gradient(135deg, #0284c7 0%, #25c8ff 100%);
    color: #050b14;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 25px rgba(37, 200, 255, 0.35);
    transition: all 0.25s ease;
    display: inline-block;
}
.final-cta-actions .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(37, 200, 255, 0.5);
    color: #050b14;
}

/* Responsive adjustments */
@media screen and (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 860px) {
    .hero-container {
        grid-template-columns: 1fr;
    }
    .hero-visual {
        min-height: 400px;
        height: clamp(400px, 50vh, 500px);
    }
    .philosophy-grid {
        grid-template-columns: 1fr;
    }
    .final-cta {
        flex-direction: column;
        text-align: center;
    }
    .tc-form-row {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 680px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .tc-form-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .tc-form-privacy {
        justify-content: center;
    }
    .tc-form-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   BALOA AUDIT & SHOWCASE SECTION (User-Requested Hybrid Showcase)
   ========================================================================== */
.tc-baloa-showcase-section {
    padding: clamp(60px, 8vw, 100px) 0;
    position: relative;
    width: 100%;
}
.tc-baloa-showcase-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
    max-width: min(94vw, 1400px);
    margin: 0 auto;
}
@media (max-width: 1023px) {
    .tc-baloa-showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* Simulator Panel (Left) */
.tc-baloa-sim-card {
    background: rgba(12, 24, 44, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 45px -15px rgba(0, 0, 0, 0.7);
}
.tc-baloa-sim-tabs {
    display: flex;
    background: rgba(8, 17, 32, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tc-baloa-sim-tab-btn {
    flex: 1;
    padding: 16px 20px;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 2px solid transparent;
}
.tc-baloa-sim-tab-btn:hover {
    color: #FFFFFF;
}
.tc-baloa-sim-tab-btn.active {
    color: #D946EF;
    border-bottom-color: #D946EF;
    background: rgba(217, 70, 239, 0.06);
}
.tc-baloa-sim-body {
    padding: clamp(24px, 3vw, 36px);
}
.tc-baloa-sim-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 8px 0;
}
.tc-baloa-sim-subtitle {
    font-size: 0.875rem;
    color: #94A3B8;
    margin: 0 0 24px 0;
    line-height: 1.5;
}
.tc-baloa-audit-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tc-baloa-audit-item {
    background: rgba(8, 17, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
}
.tc-baloa-audit-item:hover {
    border-color: rgba(37, 200, 255, 0.3);
    transform: translateX(4px);
}
.tc-baloa-badge-pill {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}
.tc-badge-green {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10B981;
}
.tc-badge-orange {
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #F97316;
}
.tc-badge-gold {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #EAB308;
}
.tc-badge-cyan {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06B6D4;
}
.tc-baloa-audit-content h4 {
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}
.tc-baloa-audit-content p {
    color: #CBD5E1;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}
.tc-baloa-audit-content strong {
    color: #FFFFFF;
}

/* Steps Pane */
.tc-baloa-steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tc-baloa-step-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(8, 17, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
}
.tc-baloa-step-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(217, 70, 239, 0.15);
    border: 1px solid rgba(217, 70, 239, 0.3);
    color: #D946EF;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-baloa-step-info h4 {
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}
.tc-baloa-step-info p {
    color: #CBD5E1;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}

/* Right Panel: Content & Pro Box */
.tc-baloa-info-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tc-baloa-eyebrow {
    color: #F59E0B;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tc-baloa-eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #F59E0B;
    border-radius: 2px;
}
.tc-baloa-main-heading {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.025em;
}
.tc-baloa-sub-heading {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #F59E0B;
    margin: 0;
}
.tc-baloa-desc {
    color: #CBD5E1;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}
.tc-baloa-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
}
.tc-pill-wporg {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #C084FC;
}
.tc-pill-wporg::before {
    content: '•';
    color: #C084FC;
    font-size: 1.2rem;
    line-height: 0;
}
.tc-pill-wpo {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #22D3EE;
}
.tc-pill-wpo::before {
    content: '•';
    color: #22D3EE;
    font-size: 1.2rem;
    line-height: 0;
}
.tc-pill-schema {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #FACC15;
}
.tc-pill-schema::before {
    content: '•';
    color: #FACC15;
    font-size: 1.2rem;
    line-height: 0;
}

/* Pro Support Buy Box Card */
.tc-baloa-pro-box {
    background: rgba(18, 10, 24, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 45px -15px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tc-baloa-pro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(217, 70, 239, 0.15);
}
.tc-baloa-pro-label {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tc-baloa-pro-badge {
    background: rgba(217, 70, 239, 0.15);
    border: 1px solid rgba(217, 70, 239, 0.35);
    color: #E879F9;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tc-baloa-pro-desc {
    color: #CBD5E1;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}
.tc-baloa-pro-btn {
    background: linear-gradient(135deg, #d946ef 0%, #a855f7 100%);
    color: #FFFFFF !important;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(217, 70, 239, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.tc-baloa-pro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(217, 70, 239, 0.6);
}
.tc-baloa-pro-link {
    text-align: center;
    color: #CBD5E1;
    font-size: 0.875rem;
    text-decoration: underline;
    transition: color 0.2s ease;
    cursor: pointer;
}
.tc-baloa-pro-link:hover {
    color: #25C8FF;
}
.tc-baloa-pro-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94A3B8;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ==========================================================================
   LIVE INSTAGRAM FEED & PLAYER (DYNAMIC THEMES / TECNICOELHO)
   ========================================================================== */

.tc-live-indicator-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #DC2626;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tc-live-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: tcPulseLive 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

.tc-live-pulse-dot-sm {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EF4444;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: tcPulseLive 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes tcPulseLive {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Modal Live Instagram Player */
.tc-live-ig-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.tc-live-ig-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 20, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}

.tc-live-ig-modal-window {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    background: #0B0F19;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(37, 200, 255, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 94vh;
}

.tc-live-ig-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tc-live-ig-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tc-live-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #DC2626;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.08em;
}

.tc-live-header-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-live-header-handle {
    font-size: 0.82rem;
    color: #38BDF8;
    font-family: var(--seo-font-mono, monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-live-header-title {
    font-size: 0.75rem;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.tc-live-ig-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tc-live-open-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #E1306C;
    color: #FFFFFF !important;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tc-live-open-app-btn:hover {
    background: #C13584;
    transform: translateY(-1px);
}

.tc-live-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tc-live-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    transform: scale(1.05);
}

.tc-live-ig-frame-container {
    position: relative;
    width: 100%;
    height: 600px;
    background: #000000;
    overflow: hidden;
}

.tc-live-ig-frame-container.is-reel {
    height: 640px;
}

.tc-live-ig-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000000;
}

.tc-live-ig-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #080C14;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94A3B8;
    font-size: 0.72rem;
    font-weight: 500;
}

.tc-live-footer-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
}

/* Modal Transition Helpers */
.tc-modal-enter {
    transition: opacity 0.28s ease-out;
}
.tc-modal-enter-start {
    opacity: 0;
}
.tc-modal-enter-end {
    opacity: 1;
}
.tc-modal-leave {
    transition: opacity 0.2s ease-in;
}
.tc-modal-leave-start {
    opacity: 1;
}
.tc-modal-leave-end {
    opacity: 0;
}

.tc-modal-win-enter {
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.tc-modal-win-enter-start {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
}
.tc-modal-win-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.tc-modal-win-leave {
    transition: all 0.2s ease-in;
}
.tc-modal-win-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.tc-modal-win-leave-end {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
}

@media (max-width: 640px) {
    .tc-live-ig-modal-window {
        max-height: 92vh;
        border-radius: 16px;
    }
    .tc-live-ig-frame-container {
        height: 520px;
    }
    .tc-live-ig-frame-container.is-reel {
        height: 560px;
    }
    .tc-live-header-title {
        display: none;
    }
}

/* ========================================================================== 
   RESPONSIVE COMPOSITION — FASE 3
   Canonical ranges: mobile <640px, tablet 640px–1023px, desktop >=1024px.
   Desktop composition remains unchanged.
   ========================================================================== */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    /* Keep Home grids useful on tablet instead of collapsing to mobile early. */
    .tc-solutions-grid,
    .tc-process-timeline,
    .tc-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-metrics-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The internal visual should support the copy without creating a tall wall. */
    .hero-development {
        min-height: auto;
        padding: 36px 0 48px;
    }

    .hero-visual {
        min-height: clamp(300px, 38vw, 380px);
        height: clamp(300px, 38vw, 380px);
    }

    .tc-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 639px) {
    /* Compact secondary content while preserving readable text and touch targets. */
    .tc-solutions-section,
    .tc-process-section,
    .tc-resources-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

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

    .tc-solution-card {
        padding: 24px 20px;
    }

    .tc-solution-card-top {
        margin-bottom: 18px;
    }

    .tc-solution-desc {
        margin-bottom: 20px;
    }

    .tc-post-card-body {
        padding: 20px;
    }

    .tc-demo-tabs-body {
        padding: 20px 16px;
    }

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

@media screen and (max-width: 1023px) {
    .tc-demo-tab-btn,
    .tc-console-tab-btn,
    .tc-p-tab-btn {
        min-height: 44px;
    }
}

/* Final mobile precedence for the compact 2-column compositions. */
@media screen and (max-width: 640px) {
    /* The visual card already communicates sequence; keep numbering semantic-only. */
    .tc-arch-tier .tc-tier-num {
        display: none;
    }

    .tc-arch-tier {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-philo-section,
    .tc-enterprise-arch-section {
        padding: 32px 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .tc-philo-section > .tc-container,
    .tc-enterprise-arch-section > .tc-container {
        padding-inline: 16px;
    }

    .tc-philo-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
    }

    .tc-tech-vertical-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-direction: initial;
        flex-wrap: initial;
        justify-content: initial;
    }

    .tc-arch-tiers-row,
    .tc-arch-tiers-row.tc-arch-5tiers {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .tc-enterprise-arch-section .tc-arch-board-card,
    .tc-enterprise-arch-section .tc-arch-results-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .tc-arch-nodes-flow,
    .tc-arch-nodes-flow.tc-arch-5nodes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 28px 16px;
    }

    .tc-arch-nodes-flow .tc-flow-node {
        position: relative;
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(1) { grid-column: 1; grid-row: 1; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(3) { grid-column: 2; grid-row: 1; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(5) { grid-column: 1; grid-row: 2; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(7) { grid-column: 2; grid-row: 2; }
    .tc-arch-nodes-flow .tc-flow-node:nth-child(9) { grid-column: 1; grid-row: 3; }

    .tc-arch-nodes-flow .tc-flow-arrow {
        display: none;
    }

    .tc-arch-nodes-flow .tc-flow-node::after {
        position: absolute;
        color: var(--tc-color-cyan, #25C8FF);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 0 10px rgba(37, 200, 255, 0.35);
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(1)::after,
    .tc-arch-nodes-flow .tc-flow-node:nth-child(5)::after {
        content: "→";
        right: -14px;
        top: 22px;
    }

    .tc-arch-nodes-flow .tc-flow-node:nth-child(3)::after,
    .tc-arch-nodes-flow .tc-flow-node:nth-child(7)::after {
        content: "↓";
        right: 50%;
        bottom: -20px;
    }
}

/* Standalone and SPA detail views must remain in normal document flow after refresh. */
html:has(.tc-standalone-web-app),
html:has(.tc-standalone-seo-app),
body:has(.tc-standalone-web-app),
body:has(.tc-standalone-seo-app) {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
}

#app.tc-standalone-web-app,
#app.tc-standalone-seo-app,
.tc-screen-specialized {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    overflow: visible !important;
}

/* ==========================================================================
   FASE 5 — Normalización responsive: laptops 14"–15.6" (1080p @ 125–150%)
   Banda crítica: 1280–1536px de ancho y 720–864px de alto (ancho/alto CSS).
   Reglas ADITIVAS y acotadas por altura: no afectan a monitores grandes
   (altura > 864px) ni a móviles/tablets, que ya tienen sus breakpoints.
   Objetivo: evitar el hero desproporcionado y el amontonamiento de columnas.
   ========================================================================== */
@media (max-width: 1536px) and (max-height: 864px) {
    .hero-development {
        min-height: auto;
        padding: clamp(30px, 4vw, 52px) 0;
    }
    .hero-container {
        margin-top: 48px !important;
        gap: clamp(28px, 3.5vw, 48px);
    }
    .hero-visual {
        min-height: 380px;
        height: clamp(380px, 48vh, 520px);
    }
}
@media (max-width: 1366px) and (max-height: 800px) {
    .hero-text-content h1 {
        font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    }
    .hero-visual {
        min-height: 340px;
        height: clamp(340px, 44vh, 440px);
    }
}
/* === assets/css/components/footer.css === */
/* ==========================================================================
   TECNICOELHO 6.1 - CORPORATE FOOTER (SaaS v6)
   Design Line: DLG-EXEC Corporate High-Contrast
   WCAG 2.1 AAA Compliant Contrast on Light Surfaces
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base */
/* ── 7. CORPORATE FOOTER ── */
.tc-footer {
    --tc-footer-bg: var(--tc-color-surface, #FFFFFF);
    --tc-footer-heading: #0B172A; /* Deep Navy - 17.5:1 contrast against white */
    --tc-footer-text: #334155;    /* Slate 700 - 9.6:1 AAA contrast against white */
    --tc-footer-link: #334155;    /* Slate 700 - 9.6:1 AAA contrast against white */
    --tc-footer-link-hover: #1D4ED8; /* Royal Blue 700 - 5.9:1 contrast against white */
    --tc-footer-muted: #475569;   /* Slate 600 - 7.0:1 AAA contrast against white */
    --tc-footer-border: #E2E8F0;  /* Slate 200 - crisp, clean visual divider */
    --tc-footer-slogan: #1D4ED8;  /* Royal Blue 700 - 5.9:1 contrast */

    background-color: var(--tc-footer-bg);
    border-top: 1px solid var(--tc-footer-border);
    padding: 68px 0 36px 0;
    color: var(--tc-footer-text);
    position: relative;
    z-index: 10;
}

.tc-footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.tc-footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 6px;
    color: var(--tc-footer-heading);
    border-radius: 6px;
    transition: opacity 150ms ease;
}

.tc-footer-brand-link:hover {
    opacity: 0.9;
}

.tc-footer-brand-link:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 3px;
}

.tc-footer-brand-name {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--tc-footer-heading);
}

.tc-footer-descriptor {
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--tc-footer-slogan);
    margin: 2px 0 14px 0;
    line-height: 1.4;
}

.tc-footer-bio {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--tc-footer-text);
    line-height: 1.65;
    max-width: 340px;
    margin: 0;
}

.tc-footer-heading {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tc-footer-heading);
    margin: 0 0 18px 0;
    text-transform: none;
}

.tc-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-footer-links li a {
    color: var(--tc-footer-link);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: color 150ms ease, transform 150ms ease;
}

.tc-footer-links li a:hover {
    color: var(--tc-footer-link-hover);
    transform: translateX(3px);
}

.tc-footer-links li a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

.tc-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    border-top: 1px solid var(--tc-footer-border);
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8125rem;
    color: var(--tc-footer-muted);
}

.tc-footer-copy {
    font-weight: 500;
    color: var(--tc-footer-muted);
}

.tc-footer-legal-links {
    display: flex;
    gap: 24px;
}

.tc-footer-legal-links a {
    color: var(--tc-footer-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms ease;
}

.tc-footer-legal-links a:hover {
    color: var(--tc-footer-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tc-footer-legal-links a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 4px;
}

.tc-footer-social-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tc-footer-social-links a {
    color: var(--tc-footer-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease, transform 150ms ease;
}

.tc-footer-social-links a:hover {
    color: var(--tc-footer-link-hover);
    transform: translateY(-2px);
}

.tc-footer-social-links a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 3px;
    border-radius: 4px;
}

@media screen and (max-width: 1024px) {
    .tc-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media screen and (max-width: 768px) {
    .tc-footer {
        padding: 44px 0 28px 0;
    }
    .tc-footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    .tc-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .tc-footer-legal-links {
        flex-wrap: wrap;
        gap: 16px;
    }
    .tc-footer-social-links {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        justify-content: flex-start;
        margin-top: 6px;
    }
    .tc-footer-social-links a {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.05);
        border: 1px solid rgba(15, 23, 42, 0.1);
        color: var(--tc-footer-heading) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tc-footer-social-links a svg {
        width: 22px;
        height: 22px;
    }

    .tc-footer .tc-container {
        text-align: center;
    }

    .tc-footer-main,
    .tc-footer-brand-col,
    .tc-footer-nav-col {
        justify-items: center;
        align-items: center;
        text-align: center;
    }

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

    .tc-footer-bio {
        margin-left: auto;
        margin-right: auto;
    }

    .tc-footer-links {
        align-items: center;
    }

    .tc-footer-links li a:hover {
        transform: none;
    }

    .tc-footer-bottom {
        align-items: center;
        text-align: center;
    }

    .tc-footer-legal-links {
        justify-content: center;
        align-items: center;
    }

    .tc-footer-social-links {
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
        margin-left: auto;
        margin-right: auto;
    }

    .tc-footer-social-links a {
        flex: 0 0 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-footer-links li a,
    .tc-footer-social-links a {
        transition: none !important;
        transform: none !important;
    }
}
/* === assets/css/components/blog.css === */
/* ==========================================================================
   TECNICOELHO 6.1 - SUBPAGE CONTAINER + BLOG / ARCHIVE (SaaS v6)
   Standard page containers, archive headers, category pills,
   masonry cards and pagination.
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base */
/* Subpage container: full width with lateral breathing room */
.standard-page-container {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 3.5vw, 48px) !important;
    padding-right: clamp(16px, 3.5vw, 48px) !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
}

/* Editorial card: internal breathing room (blog index + single article) */
.tc-blog-shell,
.single-post-glass-card {
    padding: clamp(20px, 3vw, 40px) !important;
    box-sizing: border-box !important;
}
.standard-page-glass-card {
    background: #FFFFFF !important;
    border: 1px solid var(--tc-color-border, #E2E8F0) !important;
    border-radius: var(--tc-radius-lg, 16px) !important;
    box-shadow: var(--tc-shadow-sm, 0 1px 3px rgba(11, 23, 42, 0.06)) !important;
    color: var(--tc-color-navy, #0B172A) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Blog & Archive Header */
.standard-page-header {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}
.search-badge-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tc-color-blue, #2563EB);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.standard-page-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--tc-color-navy, #0B172A);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 12px 0;
}
.search-count-subtitle {
    font-size: 1.0625rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

/* El token --tc-color-text-secondary resuelve a un gris claro (dark shell);
   en superficies blancas forzamos el gris corporativo legible. */
.standard-page-glass-card .search-count-subtitle,
.standard-page-glass-card .archive-description-box,
.standard-page-glass-card .archive-description-box p {
    color: #475569;
}
/* Category Filter Pills */
.blog-categories-pills-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}
.pills-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tc-color-navy, #0B172A);
}
.dt-categories-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dt-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: #FFFFFF;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 150ms ease;
}
.dt-cat-pill:hover,
.dt-cat-pill.active {
    background: var(--tc-color-navy, #0B172A);
    border-color: var(--tc-color-navy, #0B172A);
    color: #FFFFFF !important;
}
.cat-pill-count {
    font-size: 0.75rem;
    opacity: 0.8;
}
/* Clean Corporate Blog Cards */
.dt-blog-masonry-grid {
    gap: 24px !important;
}
.dt-masonry-card {
    background: #FFFFFF !important;
    border: 1px solid var(--tc-color-border, #E2E8F0) !important;
    border-radius: var(--tc-radius-lg, 16px) !important;
    box-shadow: var(--tc-shadow-sm, 0 1px 3px rgba(11, 23, 42, 0.05)) !important;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dt-masonry-card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: var(--tc-shadow-md, 0 6px 20px rgba(11, 23, 42, 0.08)) !important;
    transform: translateY(-2px) !important;
}
.dt-masonry-card.card-hero {
    grid-column: span 12 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {.dt-masonry-card.card-hero {
        grid-template-columns: 1fr !important;
    }
}
.dt-masonry-card.card-tall,
.dt-masonry-card.card-standard,
.dt-masonry-card.card-cover {
    grid-column: span 4 !important;
}
@media (max-width: 992px) {.dt-masonry-card.card-tall,
.dt-masonry-card.card-standard,
.dt-masonry-card.card-cover {
        grid-column: span 6 !important;
    }
}
@media (max-width: 640px) {.dt-masonry-card.card-tall,
.dt-masonry-card.card-standard,
.dt-masonry-card.card-cover {
        grid-column: span 12 !important;
    }
}
.dt-masonry-thumb {
    background: #F1F5F9 !important;
}
.dt-floating-category-badge {
    background: var(--tc-color-navy, #0B172A) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 5px 12px !important;
    border-radius: var(--tc-radius-pill, 9999px) !important;
}
.dt-masonry-content {
    background: #FFFFFF !important;
    padding: 24px !important;
}
.dt-masonry-title a {
    font-family: var(--tc-font-display, 'Figtree', sans-serif) !important;
    color: var(--tc-color-navy, #0B172A) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
.dt-masonry-title a:hover {
    color: var(--tc-color-blue, #2563EB) !important;
}
.dt-masonry-excerpt {
    color: #475569 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}
.dt-masonry-meta {
    color: var(--tc-color-muted, #64748B) !important;
}
.dt-card-readmore-link {
    color: var(--tc-color-blue, #2563EB) !important;
    font-weight: 600 !important;
}
/* Pagination */
.dt-pagination-wrapper {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--tc-color-border, #E2E8F0);
    display: flex;
    justify-content: center;
}
.dt-pagination-wrapper ul.page-numbers {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dt-pagination-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--tc-radius-md, 8px);
    border: 1px solid var(--tc-color-border, #E2E8F0);
    background: #FFFFFF;
    color: var(--tc-color-navy, #0B172A);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 150ms ease;
}
.dt-pagination-wrapper .page-numbers:hover,
.dt-pagination-wrapper .page-numbers.current {
    background: var(--tc-color-blue, #2563EB);
    border-color: var(--tc-color-blue, #2563EB);
    color: #FFFFFF !important;
}

@media (max-width: 1023px) {
    .dt-pagination-wrapper .page-numbers {
        min-width: 44px;
        min-height: 44px;
        height: auto;
    }
}

/* ==========================================================================
   BLOG INDEX — CAPA 1 EDITORIAL (hero · layout · sidebar · cards)
   Alcance: .tc-blog-index / archives. Reutiliza tokens vía alias scoped.
   ========================================================================== */

:root {
    /* Alias scoped (mismos valores corporativos, sin duplicar sistema) */
    --tc-blog-navy: #0B172A;
    --tc-blog-blue: #2563EB;
    --tc-blog-cyan: #06B6D4;
    --tc-blog-text: #0F172A;
    --tc-blog-body: #334155;
    --tc-blog-secondary: #475569;
    --tc-blog-muted: #64748B;
    --tc-blog-border: #E2E8F0;
    --tc-blog-surface: #FFFFFF;
    --tc-blog-subtle: #F8FAFC;
    --tc-blog-radius: 14px;
    --tc-blog-shadow: 0 1px 3px rgba(11, 23, 42, 0.06);
    --tc-blog-shadow-hover: 0 12px 28px -12px rgba(11, 23, 42, 0.18);
}

/* ── Editorial hero ── */
.tc-blog-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-bottom: 32px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--tc-blog-border);
}

.tc-blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.16);
    color: var(--tc-blog-blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.tc-blog-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--tc-blog-navy);
    margin: 0 0 16px;
}

.tc-blog-lede {
    max-width: 60ch;
}

.tc-blog-lede p {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--tc-blog-secondary);
    margin: 0;
}

.tc-blog-lede :is(h1, h2, h3, h4, h5, h6) {
    color: var(--tc-blog-navy);
}

.tc-blog-lede a {
    color: var(--tc-blog-blue);
    text-decoration: underline;
}

.tc-blog-hero-search {
    margin-top: 26px;
    max-width: 460px;
}

.tc-blog-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tc-blog-hero-visual svg {
    width: min(100%, 420px);
    height: auto;
    opacity: 0.9;
}

/* ── Layout principal + sidebar ── */
.tc-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
    margin-top: 8px;
}

.tc-blog-main {
    min-width: 0;
}

.tc-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* ── Widgets de sidebar ── */
.tc-widget {
    background: var(--tc-blog-surface);
    border: 1px solid var(--tc-blog-border);
    border-radius: var(--tc-blog-radius);
    box-shadow: var(--tc-blog-shadow);
    padding: 22px;
}

.tc-widget-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-blog-navy);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tc-blog-border);
}

.tc-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tc-widget-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--tc-blog-body);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.tc-widget-list a:hover,
.tc-widget-list a:focus-visible {
    background: #F1F5F9;
    color: var(--tc-blog-blue);
}

.tc-widget-count {
    color: var(--tc-blog-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: var(--tc-blog-subtle);
    border: 1px solid var(--tc-blog-border);
}

.tc-widget-cta {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* ── Buscador (searchform.php) ── */
.dt-search-form,
.dt-search-input-wrap {
    width: 100%;
}

.dt-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dt-search-field {
    width: 100%;
    padding: 14px 56px 14px 16px;
    border: 1px solid var(--tc-blog-border);
    border-radius: 12px;
    background: var(--tc-blog-surface);
    color: var(--tc-blog-text);
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dt-search-field::placeholder {
    color: var(--tc-blog-muted);
}

.dt-search-field:focus {
    outline: none;
    border-color: var(--tc-blog-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.dt-search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 9px;
    background: var(--tc-blog-blue);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.dt-search-submit:hover {
    background: #1D4ED8;
}

/* ── Grid de cards editoriales ── */
.tc-blog-index .dt-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.dt-ecard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tc-blog-surface);
    border: 1px solid var(--tc-blog-border);
    border-radius: var(--tc-blog-radius);
    box-shadow: var(--tc-blog-shadow);
    overflow: hidden;
    transition: transform 200ms var(--tc-ease, ease), box-shadow 200ms var(--tc-ease, ease), border-color 200ms ease;
}

.dt-ecard:hover {
    border-color: #CBD5E1;
    box-shadow: var(--tc-blog-shadow-hover);
    transform: translateY(-3px);
}

.dt-ecard-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: #F1F5F9;
    overflow: hidden;
}

.dt-ecard-media img,
.dt-ecard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--tc-ease, ease);
}

.dt-ecard:hover .dt-ecard-media img {
    transform: scale(1.04);
}

.dt-ecard-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94A3B8;
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
}

.dt-ecard-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    flex: 1 1 auto;
}

.dt-ecard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tc-blog-muted);
}

.dt-ecard-cat {
    color: var(--tc-blog-blue);
    text-decoration: none;
    font-weight: 700;
}

.dt-ecard-cat:hover {
    color: #1D4ED8;
    text-decoration: underline;
}

.dt-ecard-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #CBD5E1;
}

.dt-ecard-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0;
}

.dt-ecard-title a {
    color: var(--tc-blog-navy);
    text-decoration: none;
}

.dt-ecard-title a:hover {
    color: var(--tc-blog-blue);
}

.dt-ecard-excerpt {
    color: var(--tc-blog-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}

.dt-ecard-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--tc-blog-muted);
}

.dt-ecard-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.dt-ecard-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tc-blog-blue);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

.dt-ecard-more svg {
    transition: transform 180ms var(--tc-ease, ease);
}

.dt-ecard-more:hover svg {
    transform: translateX(3px);
}

/* Card destacada (horizontal) */
.dt-ecard--featured {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
}

.dt-ecard--featured .dt-ecard-media {
    width: 48%;
    aspect-ratio: auto;
    min-height: 320px;
    flex: 0 0 48%;
}

.dt-ecard--featured .dt-ecard-body {
    justify-content: center;
    padding: 36px;
    gap: 16px;
}

.dt-ecard--featured .dt-ecard-title {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
}

.dt-ecard--featured .dt-ecard-excerpt {
    font-size: 1rem;
    max-width: 52ch;
}

/* Card compacta (relacionados / sidebar) */
.dt-ecard--compact {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.dt-ecard--compact:hover {
    transform: none;
    box-shadow: none;
}

.dt-ecard--compact .dt-ecard-media {
    flex: 0 0 84px;
    width: 84px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid var(--tc-blog-border);
}

.dt-ecard--compact:hover .dt-ecard-media img {
    transform: none;
}

.dt-ecard--compact .dt-ecard-body {
    padding: 0;
    gap: 6px;
}

.dt-ecard--compact .dt-ecard-meta {
    font-size: 0.6875rem;
    gap: 6px;
}

.dt-ecard--compact .dt-ecard-read,
.dt-ecard--compact .dt-ecard-sep:last-of-type {
    display: none;
}

.dt-ecard--compact .dt-ecard-title {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.dt-ecard--compact .dt-ecard-more {
    display: none;
}

.dt-related-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dt-related-list .dt-ecard--compact + .dt-ecard--compact {
    padding-top: 16px;
    border-top: 1px solid var(--tc-blog-border);
}

/* ── Masonry legacy (archives) — por fin es un grid real ── */
.dt-blog-masonry-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.dt-masonry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dt-masonry-card.card-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.dt-masonry-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.card-hero .dt-masonry-thumb {
    aspect-ratio: auto;
    min-height: 300px;
    height: 100%;
}

.card-tall .dt-masonry-thumb {
    aspect-ratio: 4 / 5;
}

.dt-thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}

.dt-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--tc-ease, ease);
}

.dt-masonry-card:hover .dt-thumb-link img {
    transform: scale(1.04);
}

.dt-thumb-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 23, 42, 0) 45%, rgba(11, 23, 42, 0.45) 100%);
    pointer-events: none;
}

.dt-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
}

.dt-placeholder-pattern {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;
    color: #64748B;
    font-size: 0.875rem;
    text-align: center;
}

.dt-sticky-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: var(--tc-blog-blue);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dt-floating-category-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
}

.dt-masonry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tc-blog-border);
}

.dt-card-author-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--tc-blog-muted);
    font-size: 0.8125rem;
}

.dt-card-author-mini img,
.author-avatar-mini {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.author-name-mini {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-card-readmore-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tc-blog-blue) !important;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.dt-card-readmore-link svg {
    transition: transform 180ms var(--tc-ease, ease);
}

.dt-card-readmore-link:hover svg {
    transform: translateX(3px);
}

/* ── Empty state ── */
.dt-empty-search-state {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed var(--tc-blog-border);
    border-radius: var(--tc-blog-radius);
    background: var(--tc-blog-subtle);
}

.dt-empty-search-state .empty-icon {
    color: var(--tc-blog-blue);
    margin-bottom: 16px;
}

.dt-empty-search-state h2,
.dt-empty-search-state h3 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.25rem;
    color: var(--tc-blog-navy);
    margin: 0 0 8px;
}

.dt-empty-search-state p {
    color: var(--tc-blog-secondary);
    font-size: 0.9375rem;
    margin: 0 auto 20px;
    max-width: 46ch;
}

.empty-search-form-wrap {
    max-width: 420px;
    margin: 0 auto;
}

/* ── Responsive Blog ── */
@media (max-width: 1023px) {
    .tc-blog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .tc-blog-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }

    .tc-widget-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .tc-blog-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-bottom: 28px;
    }

    .tc-blog-hero-visual {
        justify-content: flex-start;
    }

    .tc-blog-hero-visual svg {
        width: min(58%, 260px);
        opacity: 0.75;
    }
}

@media (max-width: 680px) {
    .tc-blog-index .dt-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .dt-ecard--featured {
        flex-direction: column;
    }

    .dt-ecard--featured .dt-ecard-media {
        width: 100%;
        flex-basis: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .dt-ecard--featured .dt-ecard-body {
        padding: 24px;
    }

    .tc-blog-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .tc-blog-hero-search,
    .dt-search-field {
        font-size: 16px;
    }

    .tc-blog-title {
        font-size: clamp(1.75rem, 7vw, 2.15rem);
    }
}
/* === assets/css/components/editorial.css === */
/* ==========================================================================
   TECNICOELHO 6.1 - EDITORIAL SINGLE POST SUITE (SaaS v6)
   Reading column, share bar, tags, author bio, related posts, contextual CTA.
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base */
/* Editorial Single Post Clean Corporate */
.editorial-post-hero {
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
    padding-bottom: 24px;
    margin-bottom: 32px;
}
.editorial-kicker-text {
    color: var(--tc-color-blue, #2563EB) !important;
    font-family: var(--tc-font-body, 'Figtree', sans-serif) !important;
    font-weight: 700 !important;
}
.editorial-sq-marker {
    background: var(--tc-color-blue, #2563EB) !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}
.editorial-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif) !important;
    color: var(--tc-color-navy, #0B172A) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
}
.editorial-standfirst {
    color: #475569 !important;
    border-left: 3px solid var(--tc-color-blue, #2563EB) !important;
}
.editorial-meta-ledger {
    border-top: 1px solid var(--tc-color-border, #E2E8F0) !important;
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0) !important;
}
.ledger-label {
    color: var(--tc-color-muted, #64748B) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}
.ledger-val {
    color: var(--tc-color-navy, #0B172A) !important;
    font-weight: 600 !important;
}
.ledger-author-name a {
    color: var(--tc-color-navy, #0B172A) !important;
    font-weight: 600 !important;
}
.editorial-media-wrap {
    margin: 36px 0;
}
.editorial-media-frame {
    border-radius: var(--tc-radius-lg, 16px);
    overflow: hidden;
    border: 1px solid var(--tc-color-border, #E2E8F0);
}
.editorial-caption-ledger {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--tc-color-muted, #64748B);
    display: flex;
    align-items: center;
    gap: 8px;
}
.single-post-reading-column {
    max-width: 780px !important;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--tc-color-navy, #0B172A);
}
.single-post-reading-column h2,
.single-post-reading-column h3,
.single-post-reading-column h4 {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    color: var(--tc-color-navy, #0B172A);
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.8em;
}
.single-post-reading-column p {
    margin-bottom: 1.6em;
    color: #334155;
}
.single-post-reading-column ul,
.single-post-reading-column ol {
    margin-bottom: 1.6em;
    padding-left: 1.5em;
    color: #334155;
}
.single-post-reading-column li {
    margin-bottom: 0.5em;
}
/* Social Share Bar */
.editorial-share-toolbar {
    margin: 48px auto;
    max-width: 780px;
    padding: 24px;
    background: #F8FAFC;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 14px);
}
.share-kicker-label {
    color: var(--tc-color-blue, #2563EB) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}
.share-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.dt-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--tc-radius-pill, 9999px);
    background: #FFFFFF;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    color: var(--tc-color-navy, #0B172A);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 150ms ease;
}
.dt-share-btn:hover {
    background: var(--tc-color-surface-subtle, #F1F5F9);
    border-color: #CBD5E1;
}
/* Author Bio Card */
.editorial-author-card {
    margin: 48px auto;
    max-width: 780px;
    padding: 28px;
    background: #F8FAFC;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 16px);
}
.author-bio-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 14px;
}
.author-bio-name {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    margin: 0 0 8px 0;
}
.author-bio-desc {
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 12px 0;
}
.author-more-posts {
    color: var(--tc-color-blue, #2563EB);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
/* Related Posts */
.dt-related-posts-section {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--tc-color-border, #E2E8F0);
}
.related-section-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    margin-bottom: 24px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 768px) {.related-grid {
        grid-template-columns: 1fr;
    }
}
.dt-blog-card {
    background: #FFFFFF;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 14px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dt-blog-card-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #F1F5F9;
}
.dt-blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dt-blog-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.dt-blog-card-meta {
    font-size: 0.8125rem;
    color: var(--tc-color-muted, #64748B);
    margin-bottom: 8px;
}
.dt-blog-card-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px 0;
}
.dt-blog-card-title a {
    color: var(--tc-color-navy, #0B172A);
    text-decoration: none;
}
.dt-blog-card-title a:hover {
    color: var(--tc-color-blue, #2563EB);
}
.dt-card-readmore {
    margin-top: auto;
    color: var(--tc-color-blue, #2563EB) !important;
    font-size: 0.875rem;
    font-weight: 600;
}
/* Dedicated Contextual CTA Box inside single post */
.tc-editorial-cta-box {
    margin: 48px auto;
    max-width: 780px;
    background: var(--tc-color-navy, #0B172A);
    border-radius: var(--tc-radius-lg, 16px);
    padding: 36px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tc-editorial-cta-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tc-color-cyan, #06B6D4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tc-editorial-cta-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
}
.tc-editorial-cta-desc {
    font-size: 0.9375rem;
    color: #94A3B8;
    line-height: 1.6;
    margin: 0;
}
.tc-editorial-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ── TABLE OF CONTENTS (TOC) ── */
.dt-article-toc {
    background: var(--tc-color-surface, #FFFFFF);
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 8px);
    padding: 24px;
    margin: 32px 0;
    box-shadow: var(--tc-shadow-sm);
}

.dt-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}

.dt-toc-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    margin: 0;
}

.dt-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dt-toc-item a {
    color: #475569;
    font-size: 0.9375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 150ms ease;
}

.dt-toc-item a:hover {
    color: var(--tc-color-blue, #2563EB);
}

.dt-toc-item.dt-toc-level-3 {
    padding-left: 20px;
    font-size: 0.875rem;
}

/* ==========================================================================
   EDITORIAL SINGLE ARTICLE v2 — CAPA 1 (hero · contenido · sidebar)
   Alcance: .tc-single-post / .editorial-* · Sin impacto en otras plantillas.
   ========================================================================== */

/* ── Layout contenido + sidebar ── */
.tc-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 56px;
    align-items: start;
    margin-top: 40px;
}

.tc-editorial-main {
    min-width: 0;
}

.tc-editorial-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.tc-editorial-sidebar .dt-article-toc {
    position: sticky;
    top: 96px;
    margin-top: 0;
}

.tc-editorial-main .single-post-reading-column {
    max-width: none !important;
    margin: 0;
}

/* ── Breadcrumbs ── */
.dt-breadcrumbs {
    margin-bottom: 22px;
}

.dt-breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--tc-color-muted, #64748B);
}

.dt-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dt-breadcrumb-item + .dt-breadcrumb-item::before {
    content: "/";
    color: #CBD5E1;
    font-weight: 400;
}

.dt-breadcrumbs-list a {
    color: var(--tc-color-muted, #64748B);
    text-decoration: none;
    font-weight: 600;
}

.dt-breadcrumbs-list a:hover {
    color: var(--tc-color-blue, #2563EB);
}

.dt-breadcrumb-item [aria-current="page"] {
    color: var(--tc-color-navy, #0B172A);
    font-weight: 600;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Hero del artículo ── */
.editorial-post-hero {
    padding-bottom: 28px;
}

.editorial-kicker-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.editorial-kicker-text {
    color: var(--tc-color-blue, #2563EB);
    font-family: var(--tc-font-body, 'Figtree', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kicker-slash {
    margin: 0 6px;
    color: #CBD5E1;
}

.single-post-title {
    margin: 0 0 20px;
}

.editorial-standfirst {
    margin: 0 0 26px;
    padding-left: 18px;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: #475569;
    border-left: 3px solid var(--tc-color-blue, #2563EB);
}

.editorial-standfirst p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.editorial-meta-ledger {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    padding: 20px 0;
    border-top: 1px solid var(--tc-color-border, #E2E8F0);
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}

.ledger-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ledger-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tc-color-muted, #64748B);
}

.ledger-val {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tc-color-navy, #0B172A);
    font-size: 0.875rem;
    font-weight: 600;
}

.ledger-val svg {
    color: var(--tc-color-blue, #2563EB);
    flex: 0 0 auto;
}

.ledger-author-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ledger-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ledger-author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ledger-author-name a {
    color: var(--tc-color-navy, #0B172A);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
}

.ledger-author-name a:hover {
    color: var(--tc-color-blue, #2563EB);
}

.ledger-author-role {
    font-size: 0.75rem;
    color: var(--tc-color-muted, #64748B);
}

.ledger-comments-link {
    color: var(--tc-color-navy, #0B172A);
    font-weight: 600;
    text-decoration: none;
}

.ledger-comments-link:hover {
    color: var(--tc-color-blue, #2563EB);
}

/* ── Media destacada ── */
.editorial-media-wrap {
    margin: 0 0 36px;
}

.editorial-media-frame {
    border-radius: var(--tc-radius-lg, 14px);
    overflow: hidden;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    background: #F1F5F9;
}

.editorial-featured-image {
    width: 100%;
    height: auto;
    display: block;
}

.editorial-caption-ledger {
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--tc-color-muted, #64748B);
}

/* ── Tipografía de lectura ── */
.single-post-reading-column {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--tc-color-body, #334155);
    overflow-wrap: break-word;
}

.single-post-reading-column > *:first-child {
    margin-top: 0;
}

.single-post-reading-column p {
    margin: 0 0 1.5em;
    color: #334155;
}

.single-post-reading-column h2,
.single-post-reading-column h3 {
    color: var(--tc-color-navy, #0B172A);
    scroll-margin-top: 96px;
}

.single-post-reading-column h2 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    margin: 2.2em 0 0.7em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}

.single-post-reading-column h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    margin: 1.8em 0 0.6em;
}

.single-post-reading-column h4 {
    font-size: 1.125rem;
    margin: 1.6em 0 0.5em;
    color: var(--tc-color-navy, #0B172A);
}

.single-post-reading-column h5,
.single-post-reading-column h6 {
    color: var(--tc-color-navy, #0B172A);
    margin: 1.4em 0 0.5em;
}

.single-post-reading-column h5 {
    font-size: 1rem;
}

.single-post-reading-column h6 {
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.single-post-reading-column ul,
.single-post-reading-column ol {
    margin: 0 0 1.5em;
    padding-left: 1.5em;
}

.single-post-reading-column li {
    margin-bottom: 0.55em;
    line-height: 1.7;
}

.single-post-reading-column li::marker {
    color: var(--tc-color-blue, #2563EB);
    font-weight: 700;
}

.single-post-reading-column a {
    color: var(--tc-color-blue, #2563EB);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-weight: 600;
}

.single-post-reading-column a:hover {
    color: #1D4ED8;
    text-decoration-thickness: 2px;
}

.single-post-reading-column a[href^="http"]:not([href*="tecnicoelho.com"])::after {
    content: " \2197";
    font-size: 0.85em;
    text-decoration: none;
}

.single-post-reading-column img {
    border-radius: 12px;
    display: block;
    margin: 1.8em auto;
}

.single-post-reading-column figure {
    margin: 1.8em 0;
}

.single-post-reading-column figcaption {
    margin-top: 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--tc-color-muted, #64748B);
    text-align: center;
}

.single-post-reading-column hr,
.single-post-reading-column .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--tc-color-border, #E2E8F0);
    margin: 2.4em auto;
    max-width: 180px;
}

/* Blockquote / cita */
.single-post-reading-column blockquote,
.single-post-reading-column .wp-block-quote {
    position: relative;
    margin: 2em 0;
    padding: 20px 24px 20px 56px;
    background: #F8FAFC;
    border-left: 4px solid var(--tc-color-blue, #2563EB);
    border-radius: 0 12px 12px 0;
    font-size: 1.125rem;
    font-style: italic;
    color: var(--tc-color-navy, #0B172A);
}

.single-post-reading-column blockquote::before,
.single-post-reading-column .wp-block-quote::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 16px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--tc-color-blue, #2563EB);
    opacity: 0.35;
}

.single-post-reading-column blockquote p,
.single-post-reading-column .wp-block-quote p {
    color: inherit;
    margin-bottom: 0.6em;
}

.single-post-reading-column blockquote cite,
.single-post-reading-column .wp-block-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    color: var(--tc-color-muted, #64748B);
}

/* Tablas */
.single-post-reading-column table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 0.9375rem;
}

.single-post-reading-column th,
.single-post-reading-column td {
    padding: 12px 14px;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    text-align: left;
    vertical-align: top;
}

.single-post-reading-column thead th {
    background: #F1F5F9;
    color: var(--tc-color-navy, #0B172A);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.single-post-reading-column tbody tr:nth-child(even) {
    background: #F8FAFC;
}

/* Código */
.single-post-reading-column code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: #F1F5F9;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: 5px;
    padding: 2px 6px;
    color: #B91C1C;
}

.single-post-reading-column pre {
    background: #0B172A;
    color: #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    margin: 1.8em 0;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.single-post-reading-column pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ── Callouts / checklist / quote / compare (reutilizables) ── */
.tc-callout {
    position: relative;
    margin: 1.8em 0;
    padding: 18px 22px 18px 56px;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: 12px;
    background: #F8FAFC;
    font-size: 1rem;
}

.tc-callout::before {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.875rem;
    color: #FFFFFF;
    background: var(--tc-color-blue, #2563EB);
}

.tc-callout > :last-child {
    margin-bottom: 0;
}

.tc-callout-title {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.tc-callout--info {
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(37, 99, 235, 0.06);
}

.tc-callout--info::before {
    content: "i";
    background: var(--tc-color-blue, #2563EB);
}

.tc-callout--warning {
    border-color: rgba(217, 119, 6, 0.32);
    background: rgba(217, 119, 6, 0.08);
}

.tc-callout--warning::before {
    content: "!";
    background: #D97706;
}

.tc-callout--success {
    border-color: rgba(22, 163, 74, 0.3);
    background: rgba(22, 163, 74, 0.07);
}

.tc-callout--success::before {
    content: "\2713";
    background: #16A34A;
}

.tc-checklist {
    list-style: none;
    margin: 1.8em 0;
    padding: 0;
}

.tc-checklist li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    line-height: 1.65;
}

.tc-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.tc-checklist li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--tc-color-blue, #2563EB);
    border-bottom: 2px solid var(--tc-color-blue, #2563EB);
    transform: rotate(-45deg);
}

.tc-quote {
    margin: 2em 0;
    padding: 24px 28px;
    border-left: 4px solid var(--tc-color-cyan, #06B6D4);
    background: #F8FAFC;
    border-radius: 0 12px 12px 0;
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--tc-color-navy, #0B172A);
}

.tc-quote footer,
.tc-quote cite {
    display: block;
    margin-top: 12px;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    color: var(--tc-color-muted, #64748B);
}

.tc-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 1.8em 0;
}

.tc-compare-col {
    padding: 20px;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: 12px;
    background: #FFFFFF;
}

.tc-compare-col > :first-child {
    margin-top: 0;
}

.tc-compare-col h3,
.tc-compare-col h4 {
    margin-top: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tc-color-muted, #64748B);
}

.tc-compare-col:first-child {
    border-top: 3px solid #16A34A;
}

.tc-compare-col:last-child {
    border-top: 3px solid #D97706;
}

/* ── TOC: toggle móvil + estado activo ── */
.dt-toc-header {
    justify-content: space-between;
}

.dt-toc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: 9px;
    background: #FFFFFF;
    color: var(--tc-color-navy, #0B172A);
    cursor: pointer;
    transition: transform 200ms var(--tc-ease, ease), background-color 150ms ease;
}

.dt-toc-toggle:hover {
    background: #F1F5F9;
}

.dt-toc-toggle[aria-expanded="false"] svg {
    transform: rotate(-90deg);
}

.dt-toc-toggle[hidden],
.dt-toc-list[hidden] {
    display: none !important;
}

.dt-toc-item a.is-active {
    color: var(--tc-color-blue, #2563EB);
    font-weight: 700;
}

.dt-toc-item a.is-active::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--tc-color-blue, #2563EB);
}

/* ── Bloque compartir ── */
.dt-share-block {
    background: #F8FAFC;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 14px);
    padding: 22px;
}

.dt-share-heading {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}

.dt-share-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-color-navy, #0B172A);
}

.dt-share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dt-share-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-pill, 9999px);
    background: #FFFFFF;
    color: var(--tc-color-navy, #0B172A);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dt-share-link:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: var(--tc-color-blue, #2563EB);
}

.dt-share-link svg {
    flex: 0 0 auto;
}

.dt-share-block--sidebar .dt-share-list {
    flex-direction: column;
    flex-wrap: nowrap;
}

.dt-share-block--sidebar .dt-share-link {
    width: 100%;
    border-radius: 10px;
    justify-content: flex-start;
}

/* ── Relacionados ── */
.dt-related-posts-section {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

.related-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-color-navy, #0B172A);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tc-color-border, #E2E8F0);
}

/* ── CTA Baloa ── */
.dt-baloa-cta {
    position: relative;
    overflow: hidden;
    background: var(--tc-color-navy, #0B172A);
    border-radius: var(--tc-radius-lg, 16px);
    color: #FFFFFF;
}

.dt-baloa-cta--sidebar {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dt-baloa-cta--inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 28px;
    align-items: center;
    padding: 36px;
    margin: 2.5em 0;
}

.dt-baloa-cta-visual {
    display: flex;
    justify-content: center;
}

.dt-baloa-cta--sidebar .dt-baloa-cta-owl {
    width: 96px;
    height: auto;
}

.dt-baloa-cta--inline .dt-baloa-cta-owl {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.dt-baloa-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dt-baloa-cta-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-color-cyan, #06B6D4);
}

.dt-baloa-cta-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
    margin: 0;
}

.dt-baloa-cta-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94A3B8;
    margin: 0;
}

.dt-baloa-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.dt-baloa-cta-btn {
    font-size: 0.875rem;
    padding: 11px 18px;
}

/* ── Autor ── */
.editorial-author-card {
    margin: 48px 0 0;
    max-width: none;
}

.author-bio-kicker-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.author-bio-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-color-muted, #64748B);
}

.author-bio-img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.author-bio-name {
    margin-top: 0;
}

/* ── Navegación anterior / siguiente ── */
.single-post-navigation {
    margin-top: 48px;
}

.nav-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.nav-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--tc-color-border, #E2E8F0);
    border-radius: var(--tc-radius-lg, 14px);
    background: #FFFFFF;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.nav-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 12px 28px -12px rgba(11, 23, 42, 0.18);
    transform: translateY(-2px);
}

.nav-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tc-color-blue, #2563EB);
}

.nav-title {
    font-family: var(--tc-font-display, 'Figtree', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tc-color-navy, #0B172A);
}

.nav-card.next-card {
    text-align: right;
}

.nav-card.next-card .nav-subtitle {
    justify-content: flex-end;
}

/* ── Tags ── */
.editorial-tags-wrap {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--tc-color-border, #E2E8F0);
}

.tags-kicker-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tags-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tc-color-muted, #64748B);
}

.dt-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dt-tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--tc-radius-pill, 9999px);
    border: 1px solid var(--tc-color-border, #E2E8F0);
    background: #FFFFFF;
    color: var(--tc-color-body, #334155);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dt-tag-badge:hover {
    background: var(--tc-color-navy, #0B172A);
    border-color: var(--tc-color-navy, #0B172A);
    color: #FFFFFF;
}

/* ── Responsive artículo ── */
@media (max-width: 1100px) {
    .tc-editorial-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 40px;
    }
}

@media (max-width: 1023px) {
    .tc-editorial-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .tc-editorial-sidebar {
        gap: 24px;
    }

    .tc-editorial-sidebar .dt-article-toc {
        position: static;
        top: auto;
    }

    .dt-article-toc {
        max-width: 720px;
    }

    .dt-baloa-cta--inline {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .dt-baloa-cta--inline .dt-baloa-cta-actions {
        justify-content: center;
    }

    .dt-baloa-cta--inline .dt-baloa-cta-visual {
        order: -1;
    }

    .dt-baloa-cta--inline .dt-baloa-cta-owl {
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    .tc-editorial-layout {
        margin-top: 32px;
        gap: 32px;
    }

    .editorial-meta-ledger {
        gap: 14px 28px;
    }

    .single-post-reading-column {
        font-size: 1.0625rem;
    }

    .single-post-reading-column table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tc-compare {
        grid-template-columns: minmax(0, 1fr);
    }

    .nav-card.next-card {
        text-align: left;
    }

    .author-bio-inner {
        flex-direction: column;
        gap: 16px;
    }

    .dt-share-block--sidebar .dt-share-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .dt-share-block--sidebar .dt-share-link {
        width: auto;
    }
}

@media (max-width: 560px) {
    .single-post-reading-column img {
        border-radius: 10px;
    }

    .editorial-standfirst {
        font-size: 1.0625rem;
    }

    .tc-callout {
        padding: 16px 18px 16px 52px;
    }

    .dt-baloa-cta--sidebar {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.tc-editorial-layout) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dt-ecard,
    .dt-ecard-media img,
    .dt-masonry-card,
    .dt-thumb-link img,
    .nav-card,
    .dt-toc-toggle svg {
        transition: none !important;
        transform: none !important;
    }
}

/* ── Block styles reutilizables (.is-style-tc-*) ── */
.single-post-reading-column p.is-style-tc-callout,
.single-post-reading-column .wp-block-group.is-style-tc-callout {
    position: relative;
    margin: 1.8em 0;
    padding: 18px 22px 18px 56px;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.06);
    color: #0B172A;
    font-weight: 500;
}

.single-post-reading-column p.is-style-tc-warning,
.single-post-reading-column .wp-block-group.is-style-tc-warning {
    position: relative;
    margin: 1.8em 0;
    padding: 18px 22px 18px 56px;
    border: 1px solid rgba(217, 119, 6, 0.32);
    border-radius: 12px;
    background: rgba(217, 119, 6, 0.08);
    color: #7C2D12;
    font-weight: 500;
}

.single-post-reading-column p.is-style-tc-callout::before,
.single-post-reading-column .wp-block-group.is-style-tc-callout::before,
.single-post-reading-column p.is-style-tc-warning::before,
.single-post-reading-column .wp-block-group.is-style-tc-warning::before {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.875rem;
}

.single-post-reading-column p.is-style-tc-callout::before,
.single-post-reading-column .wp-block-group.is-style-tc-callout::before {
    content: "i";
    background: #2563EB;
}

.single-post-reading-column p.is-style-tc-warning::before,
.single-post-reading-column .wp-block-group.is-style-tc-warning::before {
    content: "!";
    background: #D97706;
}

.single-post-reading-column p.is-style-tc-highlight {
    margin: 1.8em 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid #06B6D4;
    color: #0B172A;
    font-size: 1.125rem;
    font-weight: 600;
}

.single-post-reading-column ul.is-style-tc-checklist {
    list-style: none;
    margin: 1.8em 0;
    padding: 0;
}

.single-post-reading-column ul.is-style-tc-checklist li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    line-height: 1.65;
}

.single-post-reading-column ul.is-style-tc-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.single-post-reading-column ul.is-style-tc-checklist li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #2563EB;
    border-bottom: 2px solid #2563EB;
    transform: rotate(-45deg);
}

.single-post-reading-column blockquote.is-style-tc-quote,
.single-post-reading-column .wp-block-quote.is-style-tc-quote {
    border-left-color: #06B6D4;
    font-size: 1.25rem;
    padding-left: 24px;
}

.single-post-reading-column blockquote.is-style-tc-quote::before,
.single-post-reading-column .wp-block-quote.is-style-tc-quote::before {
    content: none;
}
/* === assets/css/components/placeholders.css === */
/* ==========================================================================
   DYNAMIC SPA VIEW PLACEHOLDERS & LOADING STATE STYLES
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base */
.placeholder-icon {
    font-size: 52px;
    margin-bottom: 22px;
    display: inline-block;
    animation: floatAnim 3s ease-in-out infinite alternate;
}
.placeholder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #25c8ff 0%, #0ea5e9 100%);
    color: #081120;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 30px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(37, 200, 255, 0.35);
}
.placeholder-btn:hover {
    background: linear-gradient(135deg, #00b4eb 0%, #0284c7 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 200, 255, 0.55);
    color: #050d1a;
}
@keyframes floatAnim {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}


/* ==========================================================================
   404 PAGE (SaaS v6)
   ========================================================================== */
.error-404-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 130px 24px 80px;
}

.error-404-card {
    max-width: 600px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.error-404-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.error-404-icon {
    display: block;
    font-size: 72px;
    animation: floatAnim 3s ease-in-out infinite alternate;
}

.error-404-glow {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
}

.error-404-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 800;
    margin: 0 0 10px;
    background: linear-gradient(135deg, var(--tc-color-navy, #0B172A) 0%, var(--tc-color-cyan, #06B6D4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
    line-height: 1.1;
}

.error-404-subtitle {
    font-size: 22px;
    font-weight: 700;
    color: var(--tc-color-navy, #0B172A);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}

.error-404-text {
    font-size: 14.5px;
    color: var(--tc-color-text-secondary, #475569);
    line-height: 1.6;
    margin: 0 0 35px;
}

.error-404-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tc-color-blue, #2563EB);
    color: #ffffff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 12px 32px;
    border-radius: var(--tc-radius-md, 10px);
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}

.error-404-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
    background: var(--tc-color-blue-dark, #1D4ED8);
    color: #ffffff;
}
/* === assets/css/components/animations.css === */
/* ==========================================================================
   TÉCNICOELHO 6.1 — ANIMATIONS & TRANSITIONS
   Version: 6.1.0
   Design Line: DLG-EXEC (Corporate Sobriety)
   WCAG 2.1 AA — prefers-reduced-motion respected
   ========================================================================== */
/* CAPA 0/1 · COMPONENTE COMPARTIDO | Alcance: GLOBAL | Enqueue: dt-base */

/* ── REVEAL ON SCROLL (subtle fade-in only) ── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--tc-duration-smooth, 300ms) var(--tc-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                transform var(--tc-duration-smooth, 300ms) var(--tc-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children — max 4 items, 60ms offset */
.reveal-stagger-group .reveal-on-scroll:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger-group .reveal-on-scroll:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger-group .reveal-on-scroll:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger-group .reveal-on-scroll:nth-child(4) { transition-delay: 180ms; }

/* ── HERO TEXT REVEAL (clean slide-up) ── */
@keyframes revealLineUp {
    from {
        opacity: 0;
        transform: translateY(40%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-reveal-wrapper {
    overflow: hidden;
    display: block;
}

.hero-reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40%);
    animation: revealLineUp var(--tc-duration-smooth, 300ms) var(--tc-ease, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

/* ── FADE SLIDE IN (general purpose) ── */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── CARD HOVER (subtle elevation shift) ── */
.tilt-card {
    transition: box-shadow var(--tc-duration-fast, 150ms) ease,
                transform var(--tc-duration-fast, 150ms) ease;
}

.tilt-card:hover {
    box-shadow: var(--tc-shadow-lg, 0 10px 25px -3px rgba(15, 23, 42, 0.08));
    transform: translateY(-2px);
}

/* ── FOCUS VISIBLE: consolidado en la Capa 0 (base.css:47-51) ── */

/* ── BUTTON & LINK TRANSITIONS ── */
a,
button,
.btn,
[role="button"] {
    transition: color var(--tc-duration-fast, 150ms) ease,
                background-color var(--tc-duration-fast, 150ms) ease,
                border-color var(--tc-duration-fast, 150ms) ease,
                box-shadow var(--tc-duration-fast, 150ms) ease;
}

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

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }

    .hero-reveal-word {
        opacity: 1;
        transform: none;
    }
}